Can set the list of referenced filters in filters list

virtweb_frontend/src/widgets/forms/NWFSelectReferencedFilters.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { NWFilter } from "../../api/NWFilterApi";
+import { NWFilterSelectInput } from "./NWFilterSelectInput";
+import { NWFilterItem } from "../nwfilter/NWFilterItem";
+
+export function NWFSelectReferencedFilters(p: {
+  editable: boolean;
+  selected: string[];
+  nwFiltersList: NWFilter[];
+  onChange?: () => void;
+  excludedFilters?: string[];
+}): React.ReactElement {
+  const nwfilters = React.useMemo(
+    () =>
+      p.excludedFilters
+        ? p.nwFiltersList.filter((f) => !p.excludedFilters!.includes(f.name))
+        : p.nwFiltersList,
+    [p.excludedFilters]
+  );
+
+  const selectedFilters = React.useMemo(
+    () => p.selected.map((f) => p.nwFiltersList.find((s) => s.name === f)),
+    [p.selected.length]
+  );
+
+  return (
+    <>
+      {selectedFilters.map((entry, n) => (
+        <NWFilterItem
+          key={n}
+          value={entry}
+          onDelete={() => {
+            p.selected.splice(n, 1);
+            p.onChange?.();
+          }}
+        />
+      ))}
+
+      {p.editable && (
+        <NWFilterSelectInput
+          editable={p.editable}
+          label="Attach a new filter"
+          canBeNull={false}
+          nwfilters={nwfilters}
+          value={""}
+          onChange={(f) => {
+            p.selected.push(f!);
+            p.onChange?.();
+          }}
+        />
+      )}
+    </>
+  );
+}

virtweb_frontend/src/widgets/forms/NWFilterSelectInput.tsx

@@ -1,6 +1,7 @@
 import { Autocomplete, TextField } from "@mui/material";
 import { NWFilter } from "../../api/NWFilterApi";
 import { NWFilterItem } from "../nwfilter/NWFilterItem";
+import React from "react";
 
 export function NWFilterSelectInput(p: {
   editable: boolean;
@@ -10,6 +11,8 @@ export function NWFilterSelectInput(p: {
   onChange?: (name?: string) => void;
   canBeNull: boolean;
 }): React.ReactElement {
+  const [open, setOpen] = React.useState(false);
+
   const selectedValue = p.nwfilters.find((o) => o.name === p.value);
   if (!p.editable && !selectedValue) return <></>;
 
@@ -23,7 +26,14 @@ export function NWFilterSelectInput(p: {
 
   return (
     <Autocomplete
-      disablePortal
+      open={open}
+      onOpen={() => {
+        setOpen(true);
+      }}
+      onClose={() => {
+        setOpen(false);
+      }}
+      readOnly={!p.editable}
       options={[...(p.canBeNull ? [undefined] : []), ...p.nwfilters]}
       getOptionLabel={(o) => o?.name ?? "Unspecified"}
       value={selectedValue}
@@ -32,7 +42,11 @@ export function NWFilterSelectInput(p: {
       )}
       renderOption={(_props, option, _state) => (
         <NWFilterItem
-          onClick={() => p.onChange?.(option?.name)}
+          dense
+          onClick={() => {
+            p.onChange?.(option?.name);
+            setOpen(false);
+          }}
           value={option}
         />
       )}

virtweb_frontend/src/widgets/nwfilter/NWFilterDetails.tsx

@@ -16,6 +16,7 @@ import { EditSection } from "../forms/EditSection";
 import { TextInput } from "../forms/TextInput";
 import { ServerApi } from "../../api/ServerApi";
 import { SelectInput } from "../forms/SelectInput";
+import { NWFSelectReferencedFilters } from "../forms/NWFSelectReferencedFilters";
 
 interface DetailsProps {
   nwfilter: NWFilter;
@@ -143,6 +144,17 @@ function NetworkFilterDetailsTabGeneral(
           size={ServerApi.Config.constraints.nwfilter_priority}
         />
       </EditSection>
+
+      {/* Referenced filters */}
+      {(p.editable || p.nwfilter.join_filters.length > 0) && (
+        <EditSection title="Referenced filters">
+          <NWFSelectReferencedFilters
+            selected={p.nwfilter.join_filters}
+            excludedFilters={[p.nwfilter.name]}
+            {...p}
+          />
+        </EditSection>
+      )}
     </Grid>
   );
 }

virtweb_frontend/src/widgets/nwfilter/NWFilterItem.tsx

@@ -20,7 +20,6 @@ export function NWFilterItem(p: {
 }): React.ReactElement {
   const inner = (
     <>
-      {" "}
       <ListItemAvatar>
         <Avatar>
           <Icon path={mdiSecurityNetwork} />