fixbug (#1207) (#1216)

Co-authored-by: NRotPublic <63988781+xiaoyixin-cmd@users.noreply.github.com>

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",

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": "直方图",

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<string[]>([]);
     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;
+                    }
                 }
             }
 

frontend/packages/core/src/pages/graphStatic.tsx

@@ -129,13 +129,15 @@ const Graph = React.forwardRef<pageRef, GraphProps>(({changeName, changeshowdata
         },
         [setModelFile]
     );
-    const {loading} = useRequest<BlobResponse>(files ? null : '/graph/graph');
 
-    // useEffect(() => {
-    //     if (data?.data?.size) {
-    //         setFiles([new File([data.data], data.filename || 'unknown_model')]);
-    //     }
-    // }, [data]);
+    const {data, loading} = useRequest<BlobResponse>(files ? null : '/graph/static_graph');
+
+    useEffect(() => {
+        if (data?.data?.size) {
+            setFiles([new File([data.data], data.filename || 'unknown_model')]);
+        }
+    }, [data]);
+    // const {loading} = useRequest<BlobResponse>(files ? null : '/graph/graph');
 
     const [modelGraphs, setModelGraphs] = useState<OpenedResult['graphs']>([]);
     const [selectedGraph, setSelectedGraph] = useState<NonNullable<OpenedResult['selected']>>('');

frontend/packages/core/src/pages/graphStatic3.tsx

+/* 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<React.FunctionComponent<SelectProps<NonNullable<OpenedResult['selected']>>>>(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<pageRef, GraphProps>(({changeName, changeshowdata, Xpaddlae, show = true}, ref) => {
+    const {t} = useTranslation(['graph', 'common']);
+
+    const storeDispatch = useDispatch();
+    // const storeModel = useSelector(selectors.graph.model);
+
+    const graph = useRef<GraphRef>(null);
+    const file = useRef<HTMLInputElement>(null);
+    const [files, setFiles] = useState<any>();
+    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<HTMLInputElement>) => {
+            const target = e.target;
+            if (target && target.files && target.files.length) {
+                setModelFile(target.files);
+            }
+        },
+        [setModelFile]
+    );
+
+    // const {data, loading} = useRequest<BlobResponse>(files ? null : '/graph/static_graph');
+
+    // useEffect(() => {
+    //     if (data?.data?.size) {
+    //         setFiles([new File([data.data], data.filename || 'unknown_model')]);
+    //     }
+    // }, [data]);
+    const {loading} = useRequest<BlobResponse>(files ? null : '/graph/graph');
+
+    const [modelGraphs, setModelGraphs] = useState<OpenedResult['graphs']>([]);
+    const [selectedGraph, setSelectedGraph] = useState<NonNullable<OpenedResult['selected']>>('');
+    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<SearchResult>({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<Properties | null>(null);
+    const [nodeData, setNodeData] = useState<Properties | null>(null);
+    const [nodeDocumentation, setNodeDocumentation] = useState<Documentation | null>(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 : (
+                <FullWidthButton type="primary" rounded onClick={onClickFile}>
+                    {t('graph:change-model')}
+                </FullWidthButton>
+            ),
+        [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 (
+                <Aside width={rem(360)}>
+                    <NodeDocumentationSidebar data={nodeDocumentation} onClose={() => setNodeDocumentation(null)} />
+                </Aside>
+            );
+        }
+        console.log('nodeData && renderedflag3', nodeData, renderedflag3);
+        if (nodeData && renderedflag3) {
+            return (
+                <Aside width={rem(360)}>
+                    <NodePropertiesSidebar
+                        data={nodeData}
+                        onClose={() => setNodeData(null)}
+                        showNodeDocumentation={() => graph.current?.showNodeDocumentation(nodeData)}
+                    />
+                </Aside>
+            );
+        }
+        return (
+            <Aside bottom={bottom}>
+                <SearchSection>
+                    <Search
+                        text={search}
+                        data={searchResult}
+                        onChange={onSearch}
+                        onSelect={onSelect}
+                        onActive={() => setSearching(true)}
+                        onDeactive={() => setSearching(false)}
+                    />
+                </SearchSection>
+                {!searching && (
+                    <>
+                        <AsideSection>
+                            <FullWidthButton onClick={() => graph.current?.showModelProperties()}>
+                                {t('graph:model-properties')}
+                            </FullWidthButton>
+                        </AsideSection>
+                        {modelGraphs.length > 1 && (
+                            <AsideSection>
+                                <Field label={t('graph:subgraph')}>
+                                    <FullWidthSelect list={modelGraphs} value={selectedGraph} onChange={changeGraph} />
+                                </Field>
+                            </AsideSection>
+                        )}
+                        <AsideSection>
+                            <Field label={t('graph:display-data')}>
+                                <div>
+                                    <Checkbox checked={showAttributes} onChange={setShowAttributes}>
+                                        {t('graph:show-attributes')}
+                                    </Checkbox>
+                                </div>
+                                <div>
+                                    <Checkbox checked={showInitializers} onChange={setShowInitializers}>
+                                        {t('graph:show-initializers')}
+                                    </Checkbox>
+                                </div>
+                                <div>
+                                    <Checkbox checked={showNames} onChange={setShowNames}>
+                                        {t('graph:show-node-names')}
+                                    </Checkbox>
+                                </div>
+                            </Field>
+                        </AsideSection>
+                        <AsideSection>
+                            <Field label={t('graph:direction')}>
+                                <RadioGroup value={horizontal} onChange={setHorizontal}>
+                                    <RadioButton value={false}>{t('graph:vertical')}</RadioButton>
+                                    <RadioButton value={true}>{t('graph:horizontal')}</RadioButton>
+                                </RadioGroup>
+                            </Field>
+                        </AsideSection>
+                        <AsideSection>
+                            <Field label={t('graph:export-file')}>
+                                <ExportButtonWrapper>
+                                    <Button onClick={() => graph.current?.export('png')}>
+                                        {t('graph:export-png')}
+                                    </Button>
+                                    <Button onClick={() => graph.current?.export('svg')}>
+                                        {t('graph:export-svg')}
+                                    </Button>
+                                </ExportButtonWrapper>
+                            </Field>
+                        </AsideSection>
+                    </>
+                )}
+            </Aside>
+        );
+    }, [
+        t,
+        bottom,
+        search,
+        searching,
+        searchResult,
+        modelGraphs,
+        selectedGraph,
+        changeGraph,
+        onSearch,
+        onSelect,
+        showAttributes,
+        showInitializers,
+        showNames,
+        horizontal,
+        rendered,
+        loading,
+        nodeData,
+        nodeDocumentation,
+        renderedflag3
+    ]);
+    const uploader = useMemo(
+        () => <Uploader onClickUpload={onClickFile} onDropFiles={setModelFile} Xpaddlae={Xpaddlae} />,
+        [onClickFile, setModelFile]
+    );
+    return (
+        <>
+            <Title>{t('common:graph')}</Title>
+            <ModelPropertiesDialog data={modelData} onClose={() => setModelData(null)} />
+            <Content aside={aside}>
+                {loading ? (
+                    <Loading>
+                        <HashLoader size="60px" color={primaryColor} />
+                    </Loading>
+                ) : (
+                    <GraphComponent
+                        ref={graph}
+                        files={files}
+                        uploader={uploader}
+                        showAttributes={showAttributes}
+                        showInitializers={showInitializers}
+                        showNames={showNames}
+                        horizontal={horizontal}
+                        onRendered={() => setRendered(true)}
+                        onOpened={setOpenedModel}
+                        onSearch={data => {
+                            setSearchResult(data);
+                        }}
+                        onShowModelProperties={data => setModelData(data)}
+                        onShowNodeProperties={data => {
+                            setNodeData(data);
+                            setNodeDocumentation(null);
+                        }}
+                        onShowNodeDocumentation={data => setNodeDocumentation(data)}
+                    />
+                )}
+                <input
+                    ref={file}
+                    type="file"
+                    multiple={false}
+                    onChange={onChangeFile}
+                    style={{
+                        display: 'none'
+                    }}
+                />
+            </Content>
+        </>
+    );
+});
+
+export default Graph;

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() {
             </div>
         );
     }, [show.show2]);
+    console.log('show', show);
     return (
         <Content>
             {loading && (

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'))
             }
         ]

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'];

frontend/packages/mock/data/graph/static_graph.js

+/**
+ * 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"'
+        }
+    });
+};

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());

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());