make component autocomplete add components to model

Author: bvngee

frontend/app/components/Autocomplete.tsx

@@ -2,14 +2,23 @@
 import { Autocomplete } from "@mantine/core";
 import { useEffect, useState } from "react";
 import { visualizations } from "./visualizations/Visualizations";
+import { layoutModel } from "./FlexLayoutComponent";
+import { Actions, DockLocation } from "flexlayout-react";
 
 const componentArray = Object.keys(visualizations);
 
 export default function AutocompleteSearchbar() {
     const [value, setValue] = useState("");
 
     useEffect(() => {
-        if (componentArray.includes(value)) console.log(value);
+        if (componentArray.includes(value)) {
+            layoutModel.doAction(Actions.addNode({
+                type: "tab",
+                component: value,
+                name: value,
+
+            }, "root", DockLocation.CENTER, 0));
+        }
     }, [value]);
 
     return (

frontend/app/components/FlexLayoutComponent.tsx

@@ -3,11 +3,12 @@ import { CornersOut, X } from "@phosphor-icons/react";
 import { Dispatch, useCallback, useState } from "react";
 import { visualizations } from "./visualizations/Visualizations";
 
-const model = Model.fromJson({
+export const layoutModel = Model.fromJson({
     global: {},
     borders: [],
     layout: {
         type: "row",
+        id: "root",
         weight: 100,
         children: [
             {
@@ -148,7 +149,7 @@ export default function FlexLayoutComponent() {
             // TODO: is this running too many times? idk about this function nesting
             const setStateAndSave = useCallback((newValue: T) => {
                 setState(newValue);
-                model.doAction(
+                layoutModel.doAction(
                     Actions.updateNodeAttributes(node.getId(), {
                         config: { [path]: newValue },
                     }),
@@ -167,7 +168,7 @@ export default function FlexLayoutComponent() {
     return (
         <Layout
             realtimeResize={true}
-            model={model}
+            model={layoutModel}
             factory={factory}
             icons={{
                 close: <X color="gray" weight="bold" />,

frontend/app/components/Navbar.tsx

@@ -68,7 +68,7 @@ export default function Navbar() {
     const [opened, { open, close }] = useDisclosure(false);
     const [fileName, setFileName] = useState("No File Selected");
     const [recordings, setRecordings] = useState<string[] | null>(null);
-    const [production, setProduction] = useState<boolean>(true);
+    const [isProduction, setIsProduction] = useState<boolean>(true);
     const displayedName = fileName.split("/")[fileName.split("/").length - 1];
 
     const { switchToRecording, switchToLiveData, subscribeNumRows } = useDataMethods();
@@ -80,16 +80,10 @@ export default function Navbar() {
             }
         });
     }, []);
-    {
-        /* <p>{myNumRows}</p> */
-    }
-    {
-        /* <button onClick={() => switchToLiveData()}>blah</button> */
-    }
 
     useEffect(() => {
-        availableRecordings(production).then((r) => setRecordings(r));
-    }, [production]);
+        availableRecordings(isProduction).then((r) => setRecordings(r));
+    }, [isProduction]);
 
     function SystemSelector() {
         const [opened, { open, close }] = useDisclosure(false);
@@ -118,8 +112,8 @@ export default function Navbar() {
         return (
             <Switch
                 className="px-3"
-                checked={production}
-                onChange={(e) => setProduction(e.currentTarget.checked)}
+                checked={isProduction}
+                onChange={(e) => setIsProduction(e.currentTarget.checked)}
                 label="production"
             />
         );
@@ -249,8 +243,7 @@ export default function Navbar() {
                             priority={true}
                         />
                     </div>
-                    <AutocompleteSearchbar /> {/* Messing around with Mantine components */}{" "}
-                    {/* console.log("This is the component/widget added") */}
+                    <AutocompleteSearchbar />
                     {/* Modal */}
                     <div className="m-3">
                         <SystemSelector />