From 9da12ae6c4afbbcb409da28734b06f7b65aa4f94 Mon Sep 17 00:00:00 2001 From: Weixuan Fu Date: Sun, 17 Mar 2024 00:22:58 +0800 Subject: [PATCH] set dirty when load/drag drop workflow to canvas --- ui/src/App.tsx | 5 +- .../models-list-drawer/ModelItem.tsx | 12 ++- .../topbar/InstallMissingModelsButton.tsx | 5 +- .../topbar/ModelManagerTopbar.tsx | 101 ++++-------------- ui/src/topbar/Topbar.tsx | 16 +-- 5 files changed, 40 insertions(+), 99 deletions(-) diff --git a/ui/src/App.tsx b/ui/src/App.tsx index fbf884b..6101209 100644 --- a/ui/src/App.tsx +++ b/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() { setRoute("root")} /> )} - {route === "modelList" && ( - setRoute("root")} /> - )} diff --git a/ui/src/model-manager/models-list-drawer/ModelItem.tsx b/ui/src/model-manager/models-list-drawer/ModelItem.tsx index ee71411..1f33ee5 100644 --- a/ui/src/model-manager/models-list-drawer/ModelItem.tsx +++ b/ui/src/model-manager/models-list-drawer/ModelItem.tsx @@ -152,9 +152,17 @@ export function ModelItem({ data }: Props) { fontSize={14} > - + + {data.model_name + data.model_extension} +
+ {data.date.toLocaleDateString()} + + } + > - {model?.modelName ?? data.model_name} + {model?.modelName ?? data.model_name + data.model_extension} diff --git a/ui/src/model-manager/topbar/InstallMissingModelsButton.tsx b/ui/src/model-manager/topbar/InstallMissingModelsButton.tsx index 51d715e..6c1b340 100644 --- a/ui/src/model-manager/topbar/InstallMissingModelsButton.tsx +++ b/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([]); 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}) diff --git a/ui/src/model-manager/topbar/ModelManagerTopbar.tsx b/ui/src/model-manager/topbar/ModelManagerTopbar.tsx index 171636f..4683165 100644 --- a/ui/src/model-manager/topbar/ModelManagerTopbar.tsx +++ b/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(); - + const { setRoute, route } = useContext(WorkspaceContext); const handleModelDrop = async ( e: DragEvent & { 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 ( - { - updatePosition({ top: position.y, right: position.x }, true); - }} - dragIconId="dragModelManagerTopBarIcon" - > - {positionStyle ? ( - - - - - {showMyModels && ( - setShowMyModels(false)} /> - )} - - ) : ( - "" + + +
+ +
+ {route === "modelList" && ( + setRoute("root")} /> )} - + ); } diff --git a/ui/src/topbar/Topbar.tsx b/ui/src/topbar/Topbar.tsx index 72a5a44..96e744c 100644 --- a/ui/src/topbar/Topbar.tsx +++ b/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) { - +