set dirty when load/drag drop workflow to canvas

ui/src/App.tsx

@@ -446,6 +446,7 @@ export default function App() {
         };
         setCurFlowIDAndName(newFlow);
         await workflowsTable?.createFlow(newFlow);
+        setIsDirty(true);
       }
     };
     fileInput?.addEventListener("change", fileInputListener);
@@ -502,6 +503,7 @@ export default function App() {
         setCurFlowIDAndName(newFlow);
         await workflowsTable?.createFlow(newFlow);
       }
+      setIsDirty(true);
     };
     app.canvasEl.addEventListener("drop", handleDrop);
 
@@ -564,9 +566,6 @@ export default function App() {
                 <GalleryModal onclose={() => setRoute("root")} />
               </Suspense>
             )}
-            {route === "modelList" && (
-              <ModelsListDrawer onClose={() => setRoute("root")} />
-            )}
           </Box>
           <ServerEventListener />
           <AppIsDirtyEventListener />

ui/src/model-manager/models-list-drawer/ModelItem.tsx

@@ -152,9 +152,17 @@ export function ModelItem({ data }: Props) {
           fontSize={14}
         ></Text>
       </Box>
-      <Tooltip label={data.date.toLocaleDateString()}>
+      <Tooltip
+        label={
+          <span>
+            {data.model_name + data.model_extension}
+            <br />
+            {data.date.toLocaleDateString()}
+          </span>
+        }
+      >
         <Text textAlign="center" p="1" fontSize={14} noOfLines={2}>
-          {model?.modelName ?? data.model_name}
+          {model?.modelName ?? data.model_name + data.model_extension}
         </Text>
       </Tooltip>
     </Box>

ui/src/model-manager/topbar/InstallMissingModelsButton.tsx

@@ -28,7 +28,7 @@ export default function InstallMissingModelsButton({}: Props) {
   const [showMyModels, setShowMyModels] = useState(false);
   const [missingModels, setMissingModels] = useState<MissingModel[]>([]);
   useEffect(() => {
-    // temporary disable missing model check
+    // diable until it is working
     return;
     // monkey patch queue prompt api to catch errors
     const queuePrompt = app.queuePrompt as Function;
@@ -43,7 +43,7 @@ export default function InstallMissingModelsButton({}: Props) {
         setMissingModels(
           Object.values(nodeErrors).flatMap((nodeError) =>
             nodeError.errors
-              .filter((error) => error.type === "value_not_in_list")
+              ?.filter((error) => error?.type === "value_not_in_list")
               .map((error) => {
                 const { input_name, received_value } = error.extra_info;
                 return {
@@ -79,6 +79,7 @@ export default function InstallMissingModelsButton({}: Props) {
         aria-label="missing models"
         px={2}
         onClick={() => setShowMyModels(true)}
+        colorScheme="teal"
       >
         Install Missing ({missingModels.length})
       </Button>

ui/src/model-manager/topbar/ModelManagerTopbar.tsx

@@ -1,23 +1,18 @@
-import { Button, HStack } from "@chakra-ui/react";
-import { lazy, useEffect, useState, DragEvent } from "react";
+import { Button, Stack } from "@chakra-ui/react";
+import { lazy, useEffect, DragEvent, useContext } from "react";
 import ModelsListDrawer from "../models-list-drawer/ModelsListDrawer";
-import { IconGripVertical } from "@tabler/icons-react";
-import Draggable from "../../components/Draggable";
 
 // @ts-ignore
 import { app } from "/scripts/app.js";
 import "./index.css";
-import { userSettingsTable } from "../../db-tables/WorkspaceDB";
-import { ModelManagerPosition } from "../../types/dbTypes";
+import { WorkspaceContext } from "../../WorkspaceContext";
 
 const AddMissingModelsButton = lazy(
   () => import("./InstallMissingModelsButton"),
 );
 
 export default function ModelManagerTopbar() {
-  const [showMyModels, setShowMyModels] = useState(false);
-  const [positionStyle, setPositionStyle] = useState<ModelManagerPosition>();
-
+  const { setRoute, route } = useContext(WorkspaceContext);
   const handleModelDrop = async (
     e: DragEvent<HTMLCanvasElement> & { canvasX: number; canvasY: number },
   ) => {
@@ -35,85 +30,29 @@ export default function ModelManagerTopbar() {
   };
 
   useEffect(() => {
-    userSettingsTable?.getSetting("modelManagerTopBarStyle").then((res) => {
-      updatePosition(res, false);
-    });
     app.canvasEl.addEventListener("drop", handleModelDrop);
     return () => {
       app.canvasEl.removeEventListener("drop", handleModelDrop);
     };
   }, []);
 
-  const updatePosition = (
-    position?: ModelManagerPosition,
-    needUpdateDB: boolean = false,
-  ) => {
-    const { top: curTop = 0, right: curRight = 0 } = positionStyle || {};
-    const { top = 0, right = 0 } = position ?? {};
-    let newTop = curTop + top;
-    let newRight = positionStyle === undefined ? right : curRight - right;
-    const clientWidth = document.documentElement.clientWidth;
-    const clientHeight = document.documentElement.clientHeight;
-    const panelElement = document.getElementById("modelManagerTopBar");
-    const offsetWidth = panelElement?.offsetWidth || 224;
-
-    if (newTop + 32 > clientHeight) newTop = clientHeight - 38;
-    if (newRight + offsetWidth > clientWidth)
-      newRight = clientWidth - offsetWidth - 4;
-
-    setPositionStyle({
-      top: Math.max(4, newTop),
-      right: Math.max(4, newRight),
-    });
-
-    needUpdateDB &&
-      userSettingsTable?.upsert({
-        modelManagerTopBarStyle: { top: newTop, right: newRight },
-      });
-  };
-
   return (
-    <Draggable
-      onDragEnd={(position: { x: number; y: number }) => {
-        updatePosition({ top: position.y, right: position.x }, true);
-      }}
-      dragIconId="dragModelManagerTopBarIcon"
-    >
-      {positionStyle ? (
-        <HStack
-          style={{
-            position: "fixed",
-            ...positionStyle,
-          }}
-          gap={2}
-          draggable={false}
-          id="modelManagerTopBar"
-          className="model-manager-top-bar"
-        >
-          <IconGripVertical
-            id="dragModelManagerTopBarIcon"
-            className="drag-model-manager-top-bar-icon"
-            cursor="move"
-            size={15}
-            color="#FFF"
-          />
-          <AddMissingModelsButton />
-          <Button
-            size={"sm"}
-            colorScheme="blue"
-            aria-label="My models"
-            onClick={() => setShowMyModels(true)}
-            px={1}
-          >
-            Models
-          </Button>
-          {showMyModels && (
-            <ModelsListDrawer onClose={() => setShowMyModels(false)} />
-          )}
-        </HStack>
-      ) : (
-        ""
+    <Stack style={{ position: "relative" }}>
+      <Button
+        size={"sm"}
+        colorScheme="blue"
+        aria-label="My models"
+        onClick={() => setRoute("modelList")}
+        px={1}
+      >
+        Models
+      </Button>
+      <div style={{ position: "absolute", top: "38px", left: "0px" }}>
+        <AddMissingModelsButton />
+      </div>
+      {route === "modelList" && (
+        <ModelsListDrawer onClose={() => setRoute("root")} />
       )}
-    </Draggable>
+    </Stack>
   );
 }

ui/src/topbar/Topbar.tsx

@@ -10,7 +10,7 @@ import {
   IconLock,
 } from "@tabler/icons-react";
 import DropdownTitle from "../components/DropdownTitle";
-import { useCallback, useContext, useEffect, useState } from "react";
+import { lazy, useCallback, useContext, useEffect, useState } from "react";
 import EditFlowName from "../components/EditFlowName";
 import { WorkspaceContext } from "../WorkspaceContext";
 import { PanelPosition } from "../types/dbTypes";
@@ -19,6 +19,9 @@ import { SharedTopbarButton } from "../share/SharedTopbarButton";
 import VersionNameTopbar from "./VersionNameTopbar";
 import { userSettingsTable, workflowsTable } from "../db-tables/WorkspaceDB";
 import { TOPBAR_BUTTON_HEIGHT } from "../const";
+const ModelManagerTopbar = lazy(
+  () => import("../model-manager/topbar/ModelManagerTopbar"),
+);
 
 interface Props {
   curFlowName: string | null;
@@ -94,16 +97,7 @@ export function Topbar({ curFlowName, setCurFlowName }: Props) {
             <IconTriangleInvertedFilled size={8} />
           </HStack>
         </Button>
-        <Button
-          size={"sm"}
-          colorScheme="blue"
-          height={TOPBAR_BUTTON_HEIGHT + "px"}
-          aria-label="My models"
-          onClick={() => setRoute("modelList")}
-          px={1}
-        >
-          Models
-        </Button>
+        <ModelManagerTopbar />
         <Tooltip label="New workflow">
           <Button
             size={"sm"}