From 75392f7ec9b72dd91e038d8fceb417476c989e50 Mon Sep 17 00:00:00 2001 From: heiheihei <1395202740@qq.com> Date: Thu, 21 Aug 2025 16:15:32 +0800 Subject: [PATCH] =?UTF-8?q?=E6=80=A7=E8=83=BD=E4=BC=98=E5=8C=960821?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ModelVis/app/src/App.tsx | 51 +------------- .../src/ModelStructure/Properties/Header.tsx | 2 +- .../src/ModelStructure/Properties/index.tsx | 45 ++++++++---- .../src/ModelStructure/common/GraphData.tsx | 70 +++++++++++++++++++ .../ModelStructure/common/WorkerMessage.tsx | 24 +++++++ .../ModelVis/app/src/index.tsx | 6 +- 6 files changed, 135 insertions(+), 63 deletions(-) create mode 100644 plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/common/GraphData.tsx create mode 100644 plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/common/WorkerMessage.tsx diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/App.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/App.tsx index 7853b34d2..1b1780995 100644 --- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/App.tsx +++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/App.tsx @@ -13,63 +13,16 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { useAtom, useAtomValue } from "jotai" +import { useAtomValue } from "jotai" import { Toaster } from "sonner" -import { modelDataAtom, modelPathAtom, nodesEdgesAtom, currentGraphAtom, subgraphesAtom } from "stores" +import { modelPathAtom } from "stores" import FileUpload from "./FileUpload" import ModelStructure from "./ModelStructure" import { Toolbar } from "./features" import { Loading } from "./ui" -import useWorkerMessage from "./useWorkerMessage" -import { useEffect } from "react"; -import { cloneDeep } from "lodash"; - -const SUBGRAPH_NODE_HEIGHT = 40 -const SUBGRAPH_NODE_WIDTH = 120 -const SUBGRAPH_NODE_SPACE = 30 -const SUBGRAPH_ROW_COUNT = 10 const App = () => { const modelPath = useAtomValue(modelPathAtom) - const [modelData, setModelData] = useAtom(modelDataAtom) - const [nodesEdges, setNodesEdges] = useAtom(nodesEdgesAtom) - const currentGraph = useAtomValue(currentGraphAtom) - const subgraphs = useAtomValue(subgraphesAtom) - - useWorkerMessage() - - useEffect(() => { - if (!currentGraph) { - return - } - const currentGraphData = subgraphs[currentGraph.name] - if (currentGraphData) { - const maxY = currentGraphData.nodes.reduce((max: number, current: any) => { - return (current.y > max) ? current.y : max - }, 0) - currentGraph.children.forEach((subgraph, index) => { - const foundItem = currentGraphData.nodes.find(item => item.id === subgraph.name) - if (foundItem) { - foundItem.completed = Object.keys(subgraphs).includes(subgraph.name) - } else { - currentGraphData.nodes.push({ - id: subgraph.name, - x: (index % SUBGRAPH_ROW_COUNT) * (SUBGRAPH_NODE_WIDTH + SUBGRAPH_NODE_SPACE), - y: maxY + SUBGRAPH_NODE_SPACE + Math.floor(index / SUBGRAPH_ROW_COUNT) * (SUBGRAPH_NODE_HEIGHT + SUBGRAPH_NODE_SPACE), - height: SUBGRAPH_NODE_HEIGHT, - width: SUBGRAPH_NODE_WIDTH, - opType: `subgraph`, - dynamic: false, - completed: Object.keys(subgraphs).includes(subgraph.name) - }) - } - }) - if (!modelData || !nodesEdges || JSON.stringify(currentGraphData.nodes) !== JSON.stringify(nodesEdges.nodes)) { - setModelData(cloneDeep(currentGraphData.model)) - setNodesEdges({ nodes: cloneDeep(currentGraphData.nodes), edges: cloneDeep(currentGraphData.edges) }); - } - } - }, [currentGraph, JSON.stringify(subgraphs)]); return
diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Header.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Header.tsx index 17f627035..8ac4ae695 100644 --- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Header.tsx +++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/Header.tsx @@ -18,7 +18,7 @@ import { ArrowLeft, ArrowRight } from "lucide-react" import { useSelectionHistory } from "stores" type Props = { - isNode: boolean + isNode?: boolean } const Header = ({ isNode }: Props) => { diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/index.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/index.tsx index fcfc1494e..21cf04aa0 100644 --- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/index.tsx +++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/Properties/index.tsx @@ -24,23 +24,42 @@ import EdgeProperty from "./Edge" import Header from "./Header" import NodeProperty from "./Node" import PropertiesContext from "./context" +import { useEffect, useState } from "react" const Properties = () => { const model = useAtomValue(modelDataAtom) const current = useAtomValue(selectionAtom) - const t = useI18n() + const [isShow, setIsShow] = useState(false) + const [propertyContent, setPropertyContent] = useState() + const [contextValue, setContextValue] = useState({ nodes: {}, parameters: {}, t }) + + const initProperties = () => { + if (!current || !model) { + setIsShow(false) + return + } + + const isNode = typeof current === "string" + const { nodes, parameters } = model - if (!current || !model) return null + if (isNode && nodes[current] === undefined) { + setIsShow(false) + return + } - const isNode = typeof current === "string" - const { nodes, parameters } = model + const content = isNode + ? + : - const content = isNode - ? - : + setPropertyContent(content) + setContextValue({ nodes, parameters, t }) + setIsShow(true) + } - const contextValue = { nodes, parameters, t } + useEffect(() => { + initProperties() + }, [model, current]) return
{ "rounded-2xl shadow-xl backdrop-blur-sm hover:shadow-2xl", "flex flex-col overflow-hidden transition-all duration-300", "glass-effect border border-white/20 dark:border-slate-700/50", - )}> -
- {content} -
+ )} + style={{ display: isShow ? '' : 'none' }} + > +
+ {propertyContent} +
} diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/common/GraphData.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/common/GraphData.tsx new file mode 100644 index 000000000..a9d1f4fc2 --- /dev/null +++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/common/GraphData.tsx @@ -0,0 +1,70 @@ +// Copyright (c) 2025, Huawei Technologies Co., Ltd. +// All rights reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import { useAtom, useAtomValue } from "jotai" +import { modelDataAtom, nodesEdgesAtom, currentGraphAtom, subgraphesAtom } from "stores" +import { useEffect } from "react"; +import { cloneDeep } from "lodash"; + +const SUBGRAPH_NODE_HEIGHT = 40 +const SUBGRAPH_NODE_WIDTH = 120 +const SUBGRAPH_NODE_SPACE = 30 +const SUBGRAPH_ROW_COUNT = 10 + +const GraphData = () => { + const [modelData, setModelData] = useAtom(modelDataAtom) + const [nodesEdges, setNodesEdges] = useAtom(nodesEdgesAtom) + const currentGraph = useAtomValue(currentGraphAtom) + const subgraphs = useAtomValue(subgraphesAtom) + + + + useEffect(() => { + if (!currentGraph) { + return + } + const currentGraphData = subgraphs[currentGraph.name] + if (currentGraphData) { + const maxY = currentGraphData.nodes.reduce((max: number, current: any) => { + return (current.y > max) ? current.y : max + }, 0) + currentGraph.children.forEach((subgraph, index) => { + const foundItem = currentGraphData.nodes.find(item => item.id === subgraph.name) + if (foundItem) { + foundItem.completed = Object.keys(subgraphs).includes(subgraph.name) + } else { + currentGraphData.nodes.push({ + id: subgraph.name, + x: (index % SUBGRAPH_ROW_COUNT) * (SUBGRAPH_NODE_WIDTH + SUBGRAPH_NODE_SPACE), + y: maxY + SUBGRAPH_NODE_SPACE + Math.floor(index / SUBGRAPH_ROW_COUNT) * (SUBGRAPH_NODE_HEIGHT + SUBGRAPH_NODE_SPACE), + height: SUBGRAPH_NODE_HEIGHT, + width: SUBGRAPH_NODE_WIDTH, + opType: `subgraph`, + dynamic: false, + completed: Object.keys(subgraphs).includes(subgraph.name) + }) + } + }) + if (!modelData || !nodesEdges || JSON.stringify(currentGraphData.nodes) !== JSON.stringify(nodesEdges.nodes)) { + setModelData(cloneDeep(currentGraphData.model)) + setNodesEdges({ nodes: cloneDeep(currentGraphData.nodes), edges: cloneDeep(currentGraphData.edges) }); + } + } + }, [currentGraph, JSON.stringify(subgraphs)]); + + return <> +} + +export default GraphData diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/common/WorkerMessage.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/common/WorkerMessage.tsx new file mode 100644 index 000000000..a98faa33c --- /dev/null +++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/common/WorkerMessage.tsx @@ -0,0 +1,24 @@ +// Copyright (c) 2025, Huawei Technologies Co., Ltd. +// All rights reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import useWorkerMessage from "useWorkerMessage"; + +const WorkerMessage = () => { + useWorkerMessage() + + return <> +} + +export default WorkerMessage \ No newline at end of file diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/index.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/index.tsx index a623f42fb..8a448cdc9 100644 --- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/index.tsx +++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/index.tsx @@ -18,11 +18,15 @@ import { createRoot } from "react-dom/client" import App from "./App" import "styles/index.css" import "./bootstrap" +import WorkerMessage from "ModelStructure/common/WorkerMessage" +import GraphData from "ModelStructure/common/GraphData" const root = createRoot(document.getElementById("root") as HTMLDivElement) root.render( - + + + ) -- Gitee