Support interesting modules and ignored functions

page/src/components/item-list.tsx

@@ -0,0 +1,81 @@
+import { Input } from "./ui/input";
+import { Button } from "./ui/button";
+import { Plus, Trash } from "react-bootstrap-icons";
+import { Label } from "./ui/label";
+
+interface ItemListProps {
+  title: string;
+  items: string[];
+  onChange: (items: string[]) => void;
+}
+
+export function ItemList(props: ItemListProps) {
+  const removeItem = (index: number) => {
+    const newItems = [...props.items];
+    newItems.splice(index, 1);
+    props.onChange(newItems);
+  };
+
+  const addItem = (item: string) => {
+    if (item.length == 0) {
+      return;
+    }
+
+    const newItems = props.items.concat(item);
+    props.onChange(newItems);
+  };
+
+  return (
+    <div className="grid gap-3">
+      <div className="space-y-2">
+        <h4 className="font-medium leading-none">{props.title}</h4>
+        {/*<p className="text-sm text-muted-foreground">
+          Set the settings for the emulation.
+        </p>*/}
+      </div>
+
+      <div className="grid gap-2 overflow-auto max-h-40 mt-2 mb-2">
+        {props.items.map((item, index) => {
+          return (
+            <div
+              key={`item-list-item-${index}-${item}`}
+              className="flex gap-3 items-center"
+            >
+              <Label className="flex-1 text-left">{item}</Label>
+              <Button
+                onClick={() => removeItem(index)}
+                variant="ghost"
+                size="sm"
+                className="fancy rounded-lg"
+              >
+                <Trash />
+              </Button>
+            </div>
+          );
+        })}
+      </div>
+
+      <form
+        onSubmit={(e) => {
+          const nameInput = (e.target as any).elements.name;
+          const newItem = nameInput.value;
+          nameInput.value = "";
+
+          addItem(newItem);
+          e.preventDefault();
+        }}
+      >
+        <div className="flex gap-3 items-center">
+          <Input id="name" />
+          <Button
+            type="submit"
+            variant="secondary"
+            className="fancy rounded-lg"
+          >
+            <Plus />
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}

page/src/components/settings-menu.tsx

@@ -4,6 +4,14 @@ import { Label } from "./ui/label";
 
 import { Settings } from "@/settings";
 import { TextTooltip } from "./text-tooltip";
+import { ItemList } from "./item-list";
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { ChevronDown } from "react-bootstrap-icons";
 
 interface SettingsMenuProps {
   settings: Settings;
@@ -167,6 +175,46 @@ export class SettingsMenu extends React.Component<SettingsMenuProps, Settings> {
             }
           />
         </div>
+
+        <Popover>
+          <PopoverTrigger>
+            <TextTooltip tooltip="Don't log executions of listed functions">
+              <div className="flex items-center">
+                <Label className="flex-1 text-left cursor-pointer">
+                  Ignored Functions
+                </Label>
+                <ChevronDown />
+              </div>
+            </TextTooltip>
+          </PopoverTrigger>
+          <PopoverContent className="shadow-2xl">
+            <ItemList
+              title="Ignored Functions"
+              items={this.state.ignoredFunctions}
+              onChange={(items) => this.setState({ ignoredFunctions: items })}
+            />
+          </PopoverContent>
+        </Popover>
+
+        <Popover>
+          <PopoverTrigger>
+            <TextTooltip tooltip="Log interactions of additional modules">
+              <div className="flex items-center">
+                <Label className="flex-1 text-left cursor-pointer">
+                  Interesting Modules
+                </Label>
+                <ChevronDown />
+              </div>
+            </TextTooltip>
+          </PopoverTrigger>
+          <PopoverContent className="shadow-2xl">
+            <ItemList
+              title="Interesting Modules"
+              items={this.state.interestingModules}
+              onChange={(items) => this.setState({ interestingModules: items })}
+            />
+          </PopoverContent>
+        </Popover>
       </div>
     );
   }