From 2d65e4e5d46a0c9cd63229ca5c744126f3491049 Mon Sep 17 00:00:00 2001 From: xiaoyixin-cmd <1634228212@qq.com> Date: Fri, 11 Nov 2022 10:28:02 +0800 Subject: [PATCH 1/3] finlys --- frontend/packages/core/package.json | 7 +- .../core/public/locales/en/common.json | 1 + .../core/public/locales/en/graph.json | 2 + .../core/public/locales/en/togglegraph.json | 12 + .../core/public/locales/zh/common.json | 1 + .../core/public/locales/zh/graph.json | 3 + .../core/public/locales/zh/togglegraph.json | 12 + frontend/packages/core/snowpack.config.js | 24 +- frontend/packages/core/src/App.tsx | 2 +- .../src/components/GraphPage/GraphSidebar.tsx | 2 +- .../src/components/GraphPage/GraphStatic.tsx | 4 +- .../src/components/GraphPage/GraphStatic2.tsx | 326 +++ .../src/components/GraphPage/Uploader.tsx | 34 +- .../core/src/components/toggleGraph/index.tsx | 7 + .../packages/core/src/pages/graphStatic.tsx | 70 +- .../packages/core/src/pages/graphStatic2.tsx | 385 +++ frontend/packages/core/src/pages/x2paddle.tsx | 387 +++ frontend/packages/core/src/routes/index.ts | 9 +- frontend/packages/core/src/utils/fetch.ts | 9 +- frontend/packages/core/types/netron.d.ts | 4 + frontend/packages/mock/data/graph/graph.js | 2 +- frontend/packages/netron/src/index.js | 7 +- frontend/packages/netron/src/view.js | 7 +- frontend/packages/netron2/.browserslistrc | 4 + frontend/packages/netron2/README.md | 9 + frontend/packages/netron2/package.json | 64 + frontend/packages/netron2/postcss.config.js | 19 + frontend/packages/netron2/src/index.html | 15 + frontend/packages/netron2/src/index.js | 542 ++++ .../packages/netron2/src/paddle-metadata.js | 2266 +++++++++++++++++ frontend/packages/netron2/src/shim.js | 23 + frontend/packages/netron2/src/sidebar.js | 926 +++++++ frontend/packages/netron2/src/style.scss | 379 +++ frontend/packages/netron2/src/view-grapher.js | 856 +++++++ frontend/packages/netron2/src/view.js | 1700 +++++++++++++ frontend/packages/netron2/src/view2.js | 1379 ++++++++++ frontend/packages/netron2/webpack.config.js | 146 ++ frontend/packages/server/index.ts | 1 + frontend/yarn.lock | 354 ++- 39 files changed, 9936 insertions(+), 64 deletions(-) create mode 100644 frontend/packages/core/public/locales/en/togglegraph.json create mode 100644 frontend/packages/core/public/locales/zh/togglegraph.json create mode 100644 frontend/packages/core/src/components/GraphPage/GraphStatic2.tsx create mode 100644 frontend/packages/core/src/components/toggleGraph/index.tsx create mode 100644 frontend/packages/core/src/pages/graphStatic2.tsx create mode 100644 frontend/packages/core/src/pages/x2paddle.tsx create mode 100644 frontend/packages/netron2/.browserslistrc create mode 100644 frontend/packages/netron2/README.md create mode 100644 frontend/packages/netron2/package.json create mode 100644 frontend/packages/netron2/postcss.config.js create mode 100644 frontend/packages/netron2/src/index.html create mode 100644 frontend/packages/netron2/src/index.js create mode 100644 frontend/packages/netron2/src/paddle-metadata.js create mode 100644 frontend/packages/netron2/src/shim.js create mode 100644 frontend/packages/netron2/src/sidebar.js create mode 100644 frontend/packages/netron2/src/style.scss create mode 100644 frontend/packages/netron2/src/view-grapher.js create mode 100644 frontend/packages/netron2/src/view.js create mode 100644 frontend/packages/netron2/src/view2.js create mode 100644 frontend/packages/netron2/webpack.config.js diff --git a/frontend/packages/core/package.json b/frontend/packages/core/package.json index 476e56052..db1922a1e 100644 --- a/frontend/packages/core/package.json +++ b/frontend/packages/core/package.json @@ -44,8 +44,10 @@ "@tippyjs/react": "4.2.5", "@visualdl/icons": "2.2.1", "@visualdl/netron": "2.2.1", + "@visualdl/netron2": "2.2.1", "@visualdl/wasm": "2.2.1", "antd": "^4.21.0", + "axios": "^1.1.3", "bignumber.js": "9.0.1", "classnames": "2.3.1", "d3": "7.0.1", @@ -54,6 +56,7 @@ "echarts-gl": "^2.0.9", "eventemitter3": "4.0.7", "file-saver": "2.0.5", + "http2-proxy": "^5.0.53", "i18next": "20.6.0", "i18next-browser-languagedetector": "6.1.2", "i18next-fetch-backend": "3.0.0", @@ -66,6 +69,7 @@ "polished": "4.1.3", "query-string": "7.0.1", "react": "17.0.2", + "react-activation": "^0.12.1", "react-content-loader": "6.0.3", "react-dnd": "14.0.3", "react-dnd-html5-backend": "14.0.1", @@ -74,9 +78,10 @@ "react-i18next": "11.11.4", "react-input-range": "1.3.0", "react-rangeslider": "2.2.0", - "react-redux": "7.2.5", + "react-redux": "7.2.9", "react-router-dom": "5.3.0", "react-spinners": "0.11.0", + "react-stillness-component": "^0.9.0", "react-table": "7.7.0", "react-table-sticky": "1.1.3", "react-toastify": "8.0.2", diff --git a/frontend/packages/core/public/locales/en/common.json b/frontend/packages/core/public/locales/en/common.json index 5e6b1652d..710baabb6 100644 --- a/frontend/packages/core/public/locales/en/common.json +++ b/frontend/packages/core/public/locales/en/common.json @@ -11,6 +11,7 @@ "error": "Error occurred", "graph": "Graphs", "graphDynamic": "dynamic", + "ToggleGraph": "X2Paddle", "graphStatic": "static", "high-dimensional": "High Dimensional", "profiler":"performance analysis", diff --git a/frontend/packages/core/public/locales/en/graph.json b/frontend/packages/core/public/locales/en/graph.json index 821fdf439..65ae820e3 100644 --- a/frontend/packages/core/public/locales/en/graph.json +++ b/frontend/packages/core/public/locales/en/graph.json @@ -53,8 +53,10 @@ "supported-model": "Supported models: ", "Choose-model": "Choose a model", "supported-model-list": "PaddlePaddle, ONNX, Keras, Core ML, Caffe, Caffe2, Darknet, MXNet, ncnn, TensorFlow Lite", + "supported-model-list-xpaddle": "ONNX、Caffe、Caffe2", "upload-model": "Upload Model", "upload-tip": "Click or Drop file here to view neural network models", + "upload-tip2": "Click or drag the file to the page to upload the model for model conversion", "vertical": "Vertical", "zoom-in": "Zoom In", "zoom-out": "Zoom Out" diff --git a/frontend/packages/core/public/locales/en/togglegraph.json b/frontend/packages/core/public/locales/en/togglegraph.json new file mode 100644 index 000000000..2e55806ff --- /dev/null +++ b/frontend/packages/core/public/locales/en/togglegraph.json @@ -0,0 +1,12 @@ +{ + "transformation": "transformation", + "download": "download", + "convert_before": "Please convert before viewing", + "warin-info": "Please package the model description file. prototxt and parameter file. caffemodel into. tar to upload", + "warin-info2": "The model file does not support X2Paddle conversion temporarily", + "warin-info3": "Please convert before viewing", + "warin-info4": "The model has been converted, please do not click again", + "warin-info5": "Please upload the model file and convert it", + "warin-info6": "Model file has been converted, please do not click again", + "warin-info7": "Please upload the model file" +} diff --git a/frontend/packages/core/public/locales/zh/common.json b/frontend/packages/core/public/locales/zh/common.json index c379d8039..be9044881 100644 --- a/frontend/packages/core/public/locales/zh/common.json +++ b/frontend/packages/core/public/locales/zh/common.json @@ -11,6 +11,7 @@ "error": "发生错误", "graph": "网络结构", "graphDynamic": "动态", + "ToggleGraph": "X2Paddle", "graphStatic": "静态", "high-dimensional": "数据降维", "profiler": "性能分析", diff --git a/frontend/packages/core/public/locales/zh/graph.json b/frontend/packages/core/public/locales/zh/graph.json index ceec0bf8b..0249fb0aa 100644 --- a/frontend/packages/core/public/locales/zh/graph.json +++ b/frontend/packages/core/public/locales/zh/graph.json @@ -14,6 +14,7 @@ }, "experimental-supported-model": "VisualDL实验性支持：", "experimental-supported-model-list": "TorchScript、PyTorch、Torch、 ArmNN、BigDL、Chainer、CNTK、Deeplearning4j、MediaPipe、ML.NET、MNN、OpenVINO、Scikit-learn、Tengine、TensorFlow.js、TensorFlow", + "export-file": "导出文件", "export-png": "PNG", "export-svg": "SVG", @@ -52,8 +53,10 @@ "keep-expanded": "保持展开", "supported-model": "VisualDL支持：", "supported-model-list": "PaddlePaddle、ONNX、Keras、Core ML、Caffe、Caffe2、Darknet、MXNet、ncnn、TensorFlow Lite", + "supported-model-list-xpaddle": "ONNX、Caffe、Caffe2", "upload-model": "上传模型", "upload-tip": "点击或拖拽文件到页面上传模型，进行结构展示", + "upload-tip2": "点击或拖拽文件到页面上传模型，进行模型转换", "vertical": "垂直", "Choose-model": "选择模型", "zoom-in": "放大", diff --git a/frontend/packages/core/public/locales/zh/togglegraph.json b/frontend/packages/core/public/locales/zh/togglegraph.json new file mode 100644 index 000000000..53785da76 --- /dev/null +++ b/frontend/packages/core/public/locales/zh/togglegraph.json @@ -0,0 +1,12 @@ +{ + "transformation": "转换", + "download": "下载", + "convert_before": "Please convert before viewing", + "warin-info": "请将模型描述文件.prototxt和参数文件.caffemodel打包成.tar上传", + "warin-info2": "该模型文件暂不支持X2Paddle转换", + "warin-info3": "请先进行转换,再查看", + "warin-info4": "模型已转换,请勿再次点击", + "warin-info5": "请上传模型文件并转换", + "warin-info6": "模型文件已转换，请勿再次点击", + "warin-info7": "请上传模型文件" +} diff --git a/frontend/packages/core/snowpack.config.js b/frontend/packages/core/snowpack.config.js index af94d1d73..d92f6b401 100644 --- a/frontend/packages/core/snowpack.config.js +++ b/frontend/packages/core/snowpack.config.js @@ -17,7 +17,7 @@ // cspell:words pnpify svgs entrypoints import * as env from './builder/env.js'; - +import proxy from 'http2-proxy'; import {fileURLToPath} from 'url'; import fs from 'fs'; import path from 'path'; @@ -37,7 +37,8 @@ function isWorkspace() { const iconsPath = path.dirname(resolve.sync(cwd, '@visualdl/icons')); const netronPath = path.dirname(resolve.sync(cwd, '@visualdl/netron')); -const TracePath = path.dirname(resolve.sync(cwd, './public/static')); +const netronPath2 = path.dirname(resolve.sync(cwd, '@visualdl/netron2')); + const wasmPath = path.dirname(resolve.sync(cwd, '@visualdl/wasm')); const dest = path.resolve(cwd, './dist/__snowpack__/link/packages'); @@ -57,6 +58,14 @@ export default { match: 'routes', src: '.*', dest: '/index.html' + }, + { + match: 'all', + src: '/app/api/.*', + dest: (req, res) => { + console.log('被拦截了'); + proxy.web(req, res, {hostname: 'http://10.181.196.14', port: '8040'}); + } } ], env, @@ -66,8 +75,6 @@ export default { plugins: [ '@snowpack/plugin-react-refresh', '@snowpack/plugin-dotenv', - 'snowpack-plugin-less', - '@snowpack/plugin-sass', [ '@snowpack/plugin-typescript', { @@ -101,8 +108,8 @@ export default { destination: path.join(dest, 'netron/dist') }, { - source: [path.join(TracePath, '**/*')], - destination: path.join(dest, 'trace/dist') + source: [path.join(netronPath2, '**/*')], + destination: path.join(dest, 'netron2/dist') }, { source: [path.join(wasmPath, '*.{js,wasm}')], @@ -118,8 +125,9 @@ export default { }, packageOptions: { polyfillNode: true, - // knownEntrypoints: ['chai', '@testing-library/react', 'fetch-mock/esm/client', 'react-is','rc-util/es/hooks/useId','rc-util/es/Portal','rc-util/es/Dom/contains','rc-util/es/Dom/css','rc-util/es/getScrollBarSize','rc-util/es/PortalWrapper','rc-select/es/hooks/useId','rc-util/es/Dom/isVisible','rc-util/es/Dom/focus','rc-util/es/Dom/focus'] - knownEntrypoints: ['chai', '@testing-library/react', 'fetch-mock/esm/client', 'react-is', 'antd'] + namedExports: ['gl-vec2', 'dagre'], + // knownEntrypoints: ['chai', '@testing-library/react', 'fetch-mock/esm/client'] + knownEntrypoints: ['chai', '@testing-library/react'] }, buildOptions: { out: 'dist', diff --git a/frontend/packages/core/src/App.tsx b/frontend/packages/core/src/App.tsx index 6911d4b31..9925891b4 100644 --- a/frontend/packages/core/src/App.tsx +++ b/frontend/packages/core/src/App.tsx @@ -141,7 +141,7 @@ const App: FunctionComponent = () => { - + ); diff --git a/frontend/packages/core/src/components/GraphPage/GraphSidebar.tsx b/frontend/packages/core/src/components/GraphPage/GraphSidebar.tsx index 0118f7959..138e5fc36 100644 --- a/frontend/packages/core/src/components/GraphPage/GraphSidebar.tsx +++ b/frontend/packages/core/src/components/GraphPage/GraphSidebar.tsx @@ -45,7 +45,7 @@ const Title = styled.div` const Content = styled.div` padding: ${rem(20)}; - height: calc(100% - ${rem(60)}); + height: ${rem(600)}; overflow: auto; `; diff --git a/frontend/packages/core/src/components/GraphPage/GraphStatic.tsx b/frontend/packages/core/src/components/GraphPage/GraphStatic.tsx index 6ac3d4fdd..bd68c5d6b 100644 --- a/frontend/packages/core/src/components/GraphPage/GraphStatic.tsx +++ b/frontend/packages/core/src/components/GraphPage/GraphStatic.tsx @@ -208,7 +208,9 @@ const Graph = React.forwardRef( }; }, [handler, dispatch]); - useEffect(() => (ready && dispatch('change-files', files)) || undefined, [dispatch, files, ready]); + useEffect(() => { + (ready && dispatch('change-files', files)) || undefined; + }, [dispatch, files, ready]); useEffect( () => (ready && dispatch('toggle-attributes', showAttributes)) || undefined, [dispatch, showAttributes, ready] diff --git a/frontend/packages/core/src/components/GraphPage/GraphStatic2.tsx b/frontend/packages/core/src/components/GraphPage/GraphStatic2.tsx new file mode 100644 index 000000000..7a74aea0b --- /dev/null +++ b/frontend/packages/core/src/components/GraphPage/GraphStatic2.tsx @@ -0,0 +1,326 @@ +/** + * Copyright 2020 Baidu Inc. 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 type {Documentation, OpenedResult, Properties, SearchItem, SearchResult} from '~/resource/graph/types'; +import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; +import {contentHeight, position, primaryColor, rem, size, transitionProps} from '~/utils/style'; + +import ChartToolbox from '~/components/ChartToolbox'; +import HashLoader from 'react-spinners/HashLoader'; +import logo from '~/assets/images/netron.png'; +import netron2 from '@visualdl/netron2'; +import styled from 'styled-components'; +import {toast} from 'react-toastify'; +import useTheme from '~/hooks/useTheme'; +import {useTranslation} from 'react-i18next'; + +const PUBLIC_PATH: string = import.meta.env.SNOWPACK_PUBLIC_PATH; + +let IFRAME_HOST = `${window.location.protocol}//${window.location.host}`; +if (PUBLIC_PATH.startsWith('http')) { + const url = new URL(PUBLIC_PATH); + IFRAME_HOST = `${url.protocol}//${url.host}`; +} + +const toolboxHeight = rem(40); + +const Wrapper = styled.div` + position: relative; + height: ${contentHeight}; + background-color: var(--background-color); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + ${transitionProps('background-color')} +`; + +const RenderContent = styled.div<{show: boolean}>` + position: absolute; + top: 0; + left: 0; + ${size('100%', '100%')} + opacity: ${props => (props.show ? 1 : 0)}; + z-index: ${props => (props.show ? 0 : -1)}; + pointer-events: ${props => (props.show ? 'auto' : 'none')}; +`; + +const Toolbox = styled(ChartToolbox)` + height: ${toolboxHeight}; + border-bottom: 1px solid var(--border-color); + padding: 0 ${rem(20)}; + ${transitionProps('border-color')} +`; + +const Content = styled.div` + position: relative; + height: calc(100% - ${toolboxHeight}); + + > iframe { + ${size('100%', '100%')} + border: none; + } + + > .powered-by { + display: block; + ${position('absolute', null, null, rem(20), rem(30))} + color: var(--graph-copyright-color); + font-size: ${rem(14)}; + user-select: none; + + img { + height: 1em; + filter: var(--graph-copyright-logo-filter); + vertical-align: middle; + } + } +`; + +const Loading = styled.div` + ${size('100%', '100%')} + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + overscroll-behavior: none; + cursor: progress; + font-size: ${rem(16)}; + line-height: ${rem(60)}; +`; + +export type GraphRef = { + export(type: 'svg' | 'png'): void; + changeGraph(name: string): void; + search(value: string): void; + select(item: SearchItem): void; + showModelProperties(): void; + showNodeDocumentation(data: Properties): void; + show2(): void; +}; + +type GraphProps = { + files: FileList | File[] | null; + uploader: JSX.Element; + showAttributes: boolean; + showInitializers: boolean; + showNames: boolean; + horizontal: boolean; + onRendered?: () => unknown; + onOpened?: (data: OpenedResult) => unknown; + onSearch?: (data: SearchResult) => unknown; + onShowModelProperties?: (data: Properties) => unknown; + onShowNodeProperties?: (data: Properties) => unknown; + onShowNodeDocumentation?: (data: Documentation) => unknown; +}; + +const Graph = React.forwardRef( + ( + { + files, + uploader, + showAttributes, + showInitializers, + showNames, + horizontal, + onRendered, + onOpened, + onSearch, + onShowModelProperties, + onShowNodeProperties, + onShowNodeDocumentation + }, + ref + ) => { + const {t} = useTranslation('graph'); + + const theme = useTheme(); + + const [ready, setReady] = useState(false); + const [loading, setLoading] = useState(false); + const [rendered, setRendered] = useState(false); + + const iframe = useRef(null); + const handler = useCallback( + (event: MessageEvent) => { + if (event.data) { + const {type, data} = event.data; + switch (type) { + case 'status': + switch (data) { + case 'ready': + return setReady(true); + case 'loading': + return setLoading(true); + case 'rendered': + setLoading(false); + setRendered(true); + console.log('函数执行了'); + + onRendered?.(); + return; + } + return; + case 'opened': + return onOpened?.(data); + case 'search': + return onSearch?.(data); + case 'cancel': + return setLoading(false); + case 'error': + toast.error(data); + setLoading(false); + return; + case 'show-model-properties': + return onShowModelProperties?.(data); + case 'show-node-properties': + return onShowNodeProperties?.(data); + case 'show-node-documentation': + return onShowNodeDocumentation?.(data); + } + } + }, + [onRendered, onOpened, onSearch, onShowModelProperties, onShowNodeProperties, onShowNodeDocumentation] + ); + const dispatch = useCallback((type: string, data?: unknown) => { + iframe.current?.contentWindow?.postMessage( + { + type, + data + }, + IFRAME_HOST + ); + }, []); + useEffect(() => { + window.addEventListener('message', handler); + dispatch('ready'); + return () => { + window.removeEventListener('message', handler); + }; + }, [handler, dispatch]); + + useEffect(() => { + console.log('GraphStatic2', files, ready); + (files && ready && dispatch('change-files', files)) || undefined; + }, [dispatch, files, ready]); + useEffect( + () => (ready && dispatch('toggle-attributes', showAttributes)) || undefined, + [dispatch, showAttributes, ready] + ); + useEffect( + () => (ready && dispatch('toggle-initializers', showInitializers)) || undefined, + [dispatch, showInitializers, ready] + ); + useEffect(() => (ready && dispatch('toggle-names', showNames)) || undefined, [dispatch, showNames, ready]); + useEffect( + () => (ready && dispatch('toggle-direction', horizontal)) || undefined, + [dispatch, horizontal, ready] + ); + + useEffect(() => (ready && dispatch('toggle-theme', theme)) || undefined, [dispatch, theme, ready]); + + useImperativeHandle(ref, () => ({ + export(type) { + dispatch('export', type); + }, + changeGraph(name) { + dispatch('change-graph', name); + }, + search(value) { + dispatch('search', value); + }, + select(item) { + dispatch('select', item); + }, + showModelProperties() { + dispatch('show-model-properties'); + }, + showNodeDocumentation(data) { + dispatch('show-node-documentation', data); + }, + show2() { + dispatch('show2'); + } + })); + + const content = useMemo(() => { + if (!ready || loading) { + return ( + + + + ); + } + if (ready && !rendered) { + return ( + + + + ); + } + return null; + }, [ready, loading, rendered, uploader]); + return ( + + {content} + + dispatch('zoom-in') + }, + { + icon: 'zoom-out', + tooltip: t('graph:zoom-out'), + onClick: () => dispatch('zoom-out') + }, + { + icon: 'restore-size', + tooltip: t('graph:restore-size'), + onClick: () => dispatch('zoom-reset') + } + ]} + reversed + tooltipPlacement="bottom" + /> + + + + Powered by netron + + + + + ); + } +); + +Graph.displayName = 'Graph'; + +export default Graph; diff --git a/frontend/packages/core/src/components/GraphPage/Uploader.tsx b/frontend/packages/core/src/components/GraphPage/Uploader.tsx index b82445da3..ad5226462 100644 --- a/frontend/packages/core/src/components/GraphPage/Uploader.tsx +++ b/frontend/packages/core/src/components/GraphPage/Uploader.tsx @@ -77,9 +77,10 @@ const SupportTable = styled.table` type UploaderProps = { onClickUpload?: () => unknown; onDropFiles?: (files: FileList) => unknown; + Xpaddlae?: boolean; }; -const Uploader: FunctionComponent = ({onClickUpload, onDropFiles}) => { +const Uploader: FunctionComponent = ({onClickUpload, onDropFiles, Xpaddlae}) => { const {t} = useTranslation('graph'); const [active, setActive] = useState(false); @@ -112,22 +113,31 @@ const Uploader: FunctionComponent = ({onClickUpload, onDropFiles} onDragLeave={onDragLeave} > - {t('graph:upload-tip')} + {Xpaddlae ? {t('graph:upload-tip2')} : {t('graph:upload-tip')}} - - - {t('graph:supported-model')} - {t('graph:supported-model-list')} - - - {t('graph:experimental-supported-model')} - {t('graph:experimental-supported-model-list')} - - + {Xpaddlae ? ( + + + {t('graph:supported-model')} + {t('graph:supported-model-list-xpaddle')} + + + ) : ( + + + {t('graph:supported-model')} + {t('graph:supported-model-list')} + + + {t('graph:experimental-supported-model')} + {t('graph:experimental-supported-model-list')} + + + )} ); diff --git a/frontend/packages/core/src/components/toggleGraph/index.tsx b/frontend/packages/core/src/components/toggleGraph/index.tsx new file mode 100644 index 000000000..46165db3b --- /dev/null +++ b/frontend/packages/core/src/components/toggleGraph/index.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +function index() { + return
index
; +} + +export default index; diff --git a/frontend/packages/core/src/pages/graphStatic.tsx b/frontend/packages/core/src/pages/graphStatic.tsx index b577ed6e4..61a8348bc 100644 --- a/frontend/packages/core/src/pages/graphStatic.tsx +++ b/frontend/packages/core/src/pages/graphStatic.tsx @@ -17,7 +17,17 @@ import Aside, {AsideSection} from '~/components/Aside'; import type {Documentation, OpenedResult, Properties, SearchItem, SearchResult} from '~/resource/graph/types'; import GraphComponent, {GraphRef} from '~/components/GraphPage/GraphStatic'; -import React, {FunctionComponent, useCallback, useEffect, useMemo, useRef, useState} from 'react'; +import React, { + FunctionComponent, + ForwardRefRenderFunction, + useImperativeHandle, + forwardRef, + useCallback, + useEffect, + useMemo, + useRef, + useState +} from 'react'; import Select, {SelectProps} from '~/components/Select'; import {actions, selectors} from '~/store'; import {primaryColor, rem, size} from '~/utils/style'; @@ -84,8 +94,17 @@ const Loading = styled.div` font-size: ${rem(16)}; line-height: ${rem(60)}; `; - -const Graph: FunctionComponent = () => { +type GraphProps = { + changeName: (name: string) => void; + show?: boolean; + changeshowdata?: () => void; + Xpaddlae?: boolean; +}; +type pageRef = { + files: FileList | File[] | null; + setNodeDocumentations: () => void; +}; +const Graph = React.forwardRef(({changeName, changeshowdata, Xpaddlae, show = true}, ref) => { const {t} = useTranslation(['graph', 'common']); const storeDispatch = useDispatch(); @@ -97,7 +116,10 @@ const Graph: FunctionComponent = () => { const setModelFile = useCallback( (f: FileList | File[]) => { storeDispatch(actions.graph.setModel(f)); + const name = f[0].name.substring(f[0].name.lastIndexOf('.') + 1); + changeName && changeName(name); setFiles(f); + changeshowdata && changeshowdata(); }, [storeDispatch] ); @@ -116,14 +138,13 @@ const Graph: FunctionComponent = () => { }, [setModelFile] ); + const {data, loading} = useRequest(files ? null : '/graph/graph'); - const {data, loading} = useRequest(files ? null : '/graph/static_graph'); - - useEffect(() => { - if (data?.data?.size) { - setFiles([new File([data.data], data.filename || 'unknown_model')]); - } - }, [data]); + // useEffect(() => { + // if (data?.data?.size) { + // setFiles([new File([data.data], data.filename || 'unknown_model')]); + // } + // }, [data]); const [modelGraphs, setModelGraphs] = useState([]); const [selectedGraph, setSelectedGraph] = useState>(''); @@ -156,12 +177,20 @@ const Graph: FunctionComponent = () => { const [modelData, setModelData] = useState(null); const [nodeData, setNodeData] = useState(null); const [nodeDocumentation, setNodeDocumentation] = useState(null); + const [renderedflag3, setRenderedflag3] = useState(true); useEffect(() => { setSearch(''); setSearchResult({text: '', result: []}); }, [files, showAttributes, showInitializers, showNames]); - + useEffect(() => { + if (!show) { + setRenderedflag3(false); + } else { + setRenderedflag3(true); + setNodeData(null); + } + }, [show]); const bottom = useMemo( () => searching ? null : ( @@ -173,7 +202,12 @@ const Graph: FunctionComponent = () => { ); const [rendered, setRendered] = useState(false); - + useImperativeHandle(ref, () => ({ + files, + setNodeDocumentations: () => { + setRenderedflag3(false); + } + })); const aside = useMemo(() => { if (!rendered || loading) { return null; @@ -185,7 +219,8 @@ const Graph: FunctionComponent = () => { ); } - if (nodeData) { + console.log('nodeData && renderedflag3', nodeData, renderedflag3); + if (nodeData && renderedflag3) { return (