From 4bd760ac1dee3e27e95c895c974ab4b2d10fa915 Mon Sep 17 00:00:00 2001 From: RotPublic <63988781+xiaoyixin-cmd@users.noreply.github.com> Date: Fri, 17 Feb 2023 11:39:08 +0800 Subject: [PATCH] fixbug (#1207) --- .../core/public/locales/en/common.json | 6 +- .../core/public/locales/zh/common.json | 4 +- .../packages/core/src/components/Navbar.tsx | 45 ++- .../packages/core/src/pages/graphStatic.tsx | 14 +- .../packages/core/src/pages/graphStatic3.tsx | 366 ++++++++++++++++++ frontend/packages/core/src/pages/x2paddle.tsx | 3 +- frontend/packages/core/src/routes/index.ts | 8 +- frontend/packages/mock/data/component_tabs.js | 34 +- .../packages/mock/data/graph/static_graph.js | 31 ++ frontend/packages/netron/src/index.js | 2 +- frontend/packages/netron2/src/index.js | 2 +- 11 files changed, 470 insertions(+), 45 deletions(-) create mode 100644 frontend/packages/core/src/pages/graphStatic3.tsx create mode 100644 frontend/packages/mock/data/graph/static_graph.js diff --git a/frontend/packages/core/public/locales/en/common.json b/frontend/packages/core/public/locales/en/common.json index 710baabb..9a2b00d9 100644 --- a/frontend/packages/core/public/locales/en/common.json +++ b/frontend/packages/core/public/locales/en/common.json @@ -10,11 +10,11 @@ "empty": "Nothing to display", "error": "Error occurred", "graph": "Graphs", - "graphDynamic": "dynamic", + "dynamic_graph": "dynamic", "ToggleGraph": "X2Paddle", - "graphStatic": "static", + "static_graph": "static", "high-dimensional": "High Dimensional", - "profiler":"performance analysis", + "profiler": "performance analysis", "histogram": "Histogram", "hyper-parameter": "Hyper Parameters", "image": "Image", diff --git a/frontend/packages/core/public/locales/zh/common.json b/frontend/packages/core/public/locales/zh/common.json index be904488..1537d77f 100644 --- a/frontend/packages/core/public/locales/zh/common.json +++ b/frontend/packages/core/public/locales/zh/common.json @@ -10,9 +10,9 @@ "empty": "暂无数据", "error": "发生错误", "graph": "网络结构", - "graphDynamic": "动态", + "dynamic_graph": "动态", "ToggleGraph": "X2Paddle", - "graphStatic": "静态", + "static_graph": "静态", "high-dimensional": "数据降维", "profiler": "性能分析", "histogram": "直方图", diff --git a/frontend/packages/core/src/components/Navbar.tsx b/frontend/packages/core/src/components/Navbar.tsx index c50c1c17..1ee95af7 100644 --- a/frontend/packages/core/src/components/Navbar.tsx +++ b/frontend/packages/core/src/components/Navbar.tsx @@ -268,7 +268,16 @@ const SubNav: FunctionComponent<{ const Navbar: FunctionComponent = () => { const history = useHistory(); const {t, i18n} = useTranslation('common'); + // const {pathname: pathnames} = useLocation(); + // console.log('pathnames', pathnames); + // const paths = pathnames.split('/'); + // paths.shift(); + // paths.shift(); + // // join('/'); + // const pathname = '/' + paths.join('/'); + // console.log('pathname', pathname); const {pathname} = useLocation(); + const [navList, setNavlist] = useState([]); const changeLanguage = useCallback(() => { const language = i18n.language; @@ -285,8 +294,8 @@ const Navbar: FunctionComponent = () => { audio: 'audio', text: 'text', fastdeploy_server: 'fastdeploy_server', - graphStatic: 'static_graph', - graphDynamic: 'dynamic_graph', + static_graph: 'static_graph', + dynamic_graph: 'dynamic_graph', 'high-dimensional': 'embeddings', 'pr-curve': 'pr_curve', 'roc-curve': 'roc_curve', @@ -397,14 +406,18 @@ const Navbar: FunctionComponent = () => { id = `/${route.id}`; } // debugger; - if (routeEm[route.id] === path) { - console.log('path', route); + const paths = path.split('/'); + if (routeEm[route.id] === paths[paths.length - 1]) { + console.log('path', route.id); history.push(id); - return; + return true; } if (route.children) { for (const Route of route.children) { - routesChange(Route, id, path); + const flag = routesChange(Route, id, path); + if (flag) { + return true; + } } } }; @@ -427,13 +440,25 @@ const Navbar: FunctionComponent = () => { // const path = routeEm[pathNames]; if (pathname === '/index') { const path = navList[0]; - for (const route of routes) { - routesChange(route, '', path); + // for (const route of routes) { + // routesChange(route, '', path); + // } + for (let index = 0; index < routes.length; index++) { + const route = routes[index]; + const flag = routesChange(route, '', path); + if (flag) { + return; + } } } else { const path = pathname; - for (const route of routes) { - routesChange(route, '', path); + // + for (let index = 0; index < routes.length; index++) { + const route = routes[index]; + const flag = routesChange(route, '', path); + if (flag) { + return; + } } } diff --git a/frontend/packages/core/src/pages/graphStatic.tsx b/frontend/packages/core/src/pages/graphStatic.tsx index 951e9839..bfbd6df7 100644 --- a/frontend/packages/core/src/pages/graphStatic.tsx +++ b/frontend/packages/core/src/pages/graphStatic.tsx @@ -129,13 +129,15 @@ const Graph = React.forwardRef(({changeName, changeshowdata }, [setModelFile] ); - const {loading} = useRequest(files ? null : '/graph/graph'); - // useEffect(() => { - // if (data?.data?.size) { - // setFiles([new File([data.data], data.filename || 'unknown_model')]); - // } - // }, [data]); + const {data, loading} = useRequest(files ? null : '/graph/static_graph'); + + useEffect(() => { + if (data?.data?.size) { + setFiles([new File([data.data], data.filename || 'unknown_model')]); + } + }, [data]); + // const {loading} = useRequest(files ? null : '/graph/graph'); const [modelGraphs, setModelGraphs] = useState([]); const [selectedGraph, setSelectedGraph] = useState>(''); diff --git a/frontend/packages/core/src/pages/graphStatic3.tsx b/frontend/packages/core/src/pages/graphStatic3.tsx new file mode 100644 index 00000000..ede65550 --- /dev/null +++ b/frontend/packages/core/src/pages/graphStatic3.tsx @@ -0,0 +1,366 @@ +/* eslint-disable react-hooks/exhaustive-deps */ +/** + * 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 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, {useImperativeHandle, useCallback, useEffect, useMemo, useRef, useState} from 'react'; +import Select, {SelectProps} from '~/components/Select'; +import {actions} from '~/store'; +import {primaryColor, rem, size} from '~/utils/style'; +import {useDispatch} from 'react-redux'; + +import type {BlobResponse} from '~/utils/fetch'; +import Button from '~/components/Button'; +import Checkbox from '~/components/Checkbox'; +import Content from '~/components/Content'; +import Field from '~/components/Field'; +import HashLoader from 'react-spinners/HashLoader'; +import ModelPropertiesDialog from '~/components/GraphPage/ModelPropertiesDialog'; +import NodeDocumentationSidebar from '~/components/GraphPage/NodeDocumentationSidebar'; +import NodePropertiesSidebar from '~/components/GraphPage/NodePropertiesSidebar'; +import RadioButton from '~/components/RadioButton'; +import RadioGroup from '~/components/RadioGroup'; +import Search from '~/components/GraphPage/Search'; +import Title from '~/components/Title'; +import Uploader from '~/components/GraphPage/Uploader'; +import styled from 'styled-components'; +import useRequest from '~/hooks/useRequest'; +import {useTranslation} from 'react-i18next'; + +const FullWidthButton = styled(Button)` + width: 100%; +`; + +const FullWidthSelect = styled>>>(Select)` + width: 100%; +`; + +const ExportButtonWrapper = styled.div` + display: flex; + justify-content: space-between; + + > * { + flex: 1 1 auto; + + &:not(:last-child) { + margin-right: ${rem(20)}; + } + } +`; + +// TODO: better way to auto fit height +const SearchSection = styled(AsideSection)` + max-height: calc(100% - ${rem(40)}); + display: flex; + flex-direction: column; + + &:not(:last-child) { + padding-bottom: 0; + } +`; + +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)}; +`; +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(); + // const storeModel = useSelector(selectors.graph.model); + + const graph = useRef(null); + const file = useRef(null); + const [files, setFiles] = useState(); + 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] + ); + const onClickFile = useCallback(() => { + if (file.current) { + file.current.value = ''; + file.current.click(); + } + }, []); + const onChangeFile = useCallback( + (e: React.ChangeEvent) => { + const target = e.target; + if (target && target.files && target.files.length) { + setModelFile(target.files); + } + }, + [setModelFile] + ); + + // const {data, loading} = useRequest(files ? null : '/graph/static_graph'); + + // useEffect(() => { + // if (data?.data?.size) { + // setFiles([new File([data.data], data.filename || 'unknown_model')]); + // } + // }, [data]); + const {loading} = useRequest(files ? null : '/graph/graph'); + + const [modelGraphs, setModelGraphs] = useState([]); + const [selectedGraph, setSelectedGraph] = useState>(''); + const setOpenedModel = useCallback((data: OpenedResult) => { + setModelGraphs(data.graphs); + setSelectedGraph(data.selected || ''); + }, []); + const changeGraph = useCallback((name: string) => { + setSelectedGraph(name); + graph.current?.changeGraph(name); + }, []); + + const [search, setSearch] = useState(''); + const [searching, setSearching] = useState(false); + const [searchResult, setSearchResult] = useState({text: '', result: []}); + const onSearch = useCallback((value: string) => { + setSearch(value); + graph.current?.search(value); + }, []); + const onSelect = useCallback((item: SearchItem) => { + setSearch(item.name); + graph.current?.select(item); + }, []); + + const [showAttributes, setShowAttributes] = useState(false); + const [showInitializers, setShowInitializers] = useState(true); + const [showNames, setShowNames] = useState(false); + const [horizontal, setHorizontal] = useState(false); + + 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 : ( + + {t('graph:change-model')} + + ), + [t, onClickFile, searching] + ); + + const [rendered, setRendered] = useState(false); + useImperativeHandle(ref, () => ({ + files, + setNodeDocumentations: () => { + setRenderedflag3(false); + } + })); + const aside = useMemo(() => { + if (!rendered || loading) { + return null; + } + if (nodeDocumentation) { + return ( + + ); + } + console.log('nodeData && renderedflag3', nodeData, renderedflag3); + if (nodeData && renderedflag3) { + return ( + + ); + } + return ( + + ); + }, [ + t, + bottom, + search, + searching, + searchResult, + modelGraphs, + selectedGraph, + changeGraph, + onSearch, + onSelect, + showAttributes, + showInitializers, + showNames, + horizontal, + rendered, + loading, + nodeData, + nodeDocumentation, + renderedflag3 + ]); + const uploader = useMemo( + () => , + [onClickFile, setModelFile] + ); + return ( + <> + {t('common:graph')} + setModelData(null)} /> + + {loading ? ( + + + + ) : ( + setRendered(true)} + onOpened={setOpenedModel} + onSearch={data => { + setSearchResult(data); + }} + onShowModelProperties={data => setModelData(data)} + onShowNodeProperties={data => { + setNodeData(data); + setNodeDocumentation(null); + }} + onShowNodeDocumentation={data => setNodeDocumentation(data)} + /> + )} + + + + ); +}); + +export default Graph; diff --git a/frontend/packages/core/src/pages/x2paddle.tsx b/frontend/packages/core/src/pages/x2paddle.tsx index 1f3ae825..e421e34c 100644 --- a/frontend/packages/core/src/pages/x2paddle.tsx +++ b/frontend/packages/core/src/pages/x2paddle.tsx @@ -3,7 +3,7 @@ import {rem, primaryColor, size} from '~/utils/style'; import Content from '~/components/Content'; import {toast} from 'react-toastify'; import {fetcher} from '~/utils/fetch'; -import GraphStatic from '~/pages/graphStatic'; +import GraphStatic from '~/pages/graphStatic3'; import GraphStatic2 from '~/pages/graphStatic2'; import HashLoader from 'react-spinners/HashLoader'; import styled from 'styled-components'; @@ -262,6 +262,7 @@ function App() { ); }, [show.show2]); + console.log('show', show); return ( {loading && ( diff --git a/frontend/packages/core/src/routes/index.ts b/frontend/packages/core/src/routes/index.ts index 8956c8e0..fe1c135b 100644 --- a/frontend/packages/core/src/routes/index.ts +++ b/frontend/packages/core/src/routes/index.ts @@ -82,13 +82,13 @@ const routes: Route[] = [ id: Pages.Graph, children: [ { - id: 'graphDynamic', - path: '/graph/graphDynamic', + id: 'dynamic_graph', + path: '/graph/dynamic_graph', component: React.lazy(() => import('~/pages/graphDynamic')) }, { - id: 'graphStatic', - path: '/graph/graphStatic', + id: 'static_graph', + path: '/graph/static_graph', component: React.lazy(() => import('~/pages/graphStatic')) } ] diff --git a/frontend/packages/mock/data/component_tabs.js b/frontend/packages/mock/data/component_tabs.js index 9e461391..32bc9ec3 100644 --- a/frontend/packages/mock/data/component_tabs.js +++ b/frontend/packages/mock/data/component_tabs.js @@ -14,20 +14,20 @@ * limitations under the License. */ -// export default [ -// 'scalar', -// 'image', -// 'text', -// 'embeddings', -// 'audio', -// 'histogram', -// 'hyper_parameters', -// 'static_graph', -// 'dynamic_graph', -// 'pr_curve', -// 'roc_curve', -// 'profiler', -// 'x2paddle', -// 'fastdeploy_server' -// ]; -export default ['fastdeploy_client', 'static_graph', 'x2paddle', 'fastdeploy_server']; +export default [ + 'scalar', + 'image', + 'text', + 'embeddings', + 'audio', + 'histogram', + 'hyper_parameters', + 'static_graph', + 'dynamic_graph', + 'pr_curve', + 'roc_curve', + 'profiler', + 'x2paddle', + 'fastdeploy_server' +]; +// export default ['fastdeploy_client', 'static_graph', 'x2paddle', 'fastdeploy_server']; diff --git a/frontend/packages/mock/data/graph/static_graph.js b/frontend/packages/mock/data/graph/static_graph.js new file mode 100644 index 00000000..5f90c80a --- /dev/null +++ b/frontend/packages/mock/data/graph/static_graph.js @@ -0,0 +1,31 @@ +/** + * 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. + */ + +// cSpell:disable + +import graph from '../../assets/graph/yolov3.cfg'; + +export default async () => { + const result = await fetch(graph); + console.log('result', result); + return new Response(await result.arrayBuffer(), { + status: 200, + headers: { + 'Content-Type': 'application/octet-stream', + 'Content-Disposition': 'attachment; filename="yolov3.cfg"' + } + }); +}; diff --git a/frontend/packages/netron/src/index.js b/frontend/packages/netron/src/index.js index 8be14ad5..412f4b2e 100644 --- a/frontend/packages/netron/src/index.js +++ b/frontend/packages/netron/src/index.js @@ -527,7 +527,7 @@ function getCaption(obj) { return newObj; } const hash = getCaption(document.referrer); -if (hash === 'graphStatic' || hash === 'x2paddle') { +if (hash === 'static_graph' || hash === 'x2paddle') { window.__view__ = new view2.View(new host.BrowserHost()); } else { window.__view__ = new view.View(new host.BrowserHost()); diff --git a/frontend/packages/netron2/src/index.js b/frontend/packages/netron2/src/index.js index 700637c5..864535d8 100644 --- a/frontend/packages/netron2/src/index.js +++ b/frontend/packages/netron2/src/index.js @@ -535,7 +535,7 @@ function getCaption(obj) { } const hash = getCaption(document.referrer); console.log('hash', hash); -if (hash === 'graphStatic' || hash === 'x2paddle') { +if (hash === 'static_graph' || hash === 'x2paddle') { window.__view__ = new view2.View(new host.BrowserHost()); } else { window.__view__ = new view.View(new host.BrowserHost()); -- GitLab