未验证 提交 4bd760ac 编写于 作者: R RotPublic 提交者: GitHub

fixbug (#1207)

上级 fa34d6da
...@@ -10,11 +10,11 @@ ...@@ -10,11 +10,11 @@
"empty": "Nothing to display", "empty": "Nothing to display",
"error": "Error occurred", "error": "Error occurred",
"graph": "Graphs", "graph": "Graphs",
"graphDynamic": "dynamic", "dynamic_graph": "dynamic",
"ToggleGraph": "X2Paddle", "ToggleGraph": "X2Paddle",
"graphStatic": "static", "static_graph": "static",
"high-dimensional": "High Dimensional", "high-dimensional": "High Dimensional",
"profiler":"performance analysis", "profiler": "performance analysis",
"histogram": "Histogram", "histogram": "Histogram",
"hyper-parameter": "Hyper Parameters", "hyper-parameter": "Hyper Parameters",
"image": "Image", "image": "Image",
......
...@@ -10,9 +10,9 @@ ...@@ -10,9 +10,9 @@
"empty": "暂无数据", "empty": "暂无数据",
"error": "发生错误", "error": "发生错误",
"graph": "网络结构", "graph": "网络结构",
"graphDynamic": "动态", "dynamic_graph": "动态",
"ToggleGraph": "X2Paddle", "ToggleGraph": "X2Paddle",
"graphStatic": "静态", "static_graph": "静态",
"high-dimensional": "数据降维", "high-dimensional": "数据降维",
"profiler": "性能分析", "profiler": "性能分析",
"histogram": "直方图", "histogram": "直方图",
......
...@@ -268,7 +268,16 @@ const SubNav: FunctionComponent<{ ...@@ -268,7 +268,16 @@ const SubNav: FunctionComponent<{
const Navbar: FunctionComponent = () => { const Navbar: FunctionComponent = () => {
const history = useHistory(); const history = useHistory();
const {t, i18n} = useTranslation('common'); 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 {pathname} = useLocation();
const [navList, setNavlist] = useState<string[]>([]); const [navList, setNavlist] = useState<string[]>([]);
const changeLanguage = useCallback(() => { const changeLanguage = useCallback(() => {
const language = i18n.language; const language = i18n.language;
...@@ -285,8 +294,8 @@ const Navbar: FunctionComponent = () => { ...@@ -285,8 +294,8 @@ const Navbar: FunctionComponent = () => {
audio: 'audio', audio: 'audio',
text: 'text', text: 'text',
fastdeploy_server: 'fastdeploy_server', fastdeploy_server: 'fastdeploy_server',
graphStatic: 'static_graph', static_graph: 'static_graph',
graphDynamic: 'dynamic_graph', dynamic_graph: 'dynamic_graph',
'high-dimensional': 'embeddings', 'high-dimensional': 'embeddings',
'pr-curve': 'pr_curve', 'pr-curve': 'pr_curve',
'roc-curve': 'roc_curve', 'roc-curve': 'roc_curve',
...@@ -397,14 +406,18 @@ const Navbar: FunctionComponent = () => { ...@@ -397,14 +406,18 @@ const Navbar: FunctionComponent = () => {
id = `/${route.id}`; id = `/${route.id}`;
} }
// debugger; // debugger;
if (routeEm[route.id] === path) { const paths = path.split('/');
console.log('path', route); if (routeEm[route.id] === paths[paths.length - 1]) {
console.log('path', route.id);
history.push(id); history.push(id);
return; return true;
} }
if (route.children) { if (route.children) {
for (const Route of 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 = () => { ...@@ -427,13 +440,25 @@ const Navbar: FunctionComponent = () => {
// const path = routeEm[pathNames]; // const path = routeEm[pathNames];
if (pathname === '/index') { if (pathname === '/index') {
const path = navList[0]; const path = navList[0];
for (const route of routes) { // for (const route of routes) {
routesChange(route, '', path); // routesChange(route, '', path);
// }
for (let index = 0; index < routes.length; index++) {
const route = routes[index];
const flag = routesChange(route, '', path);
if (flag) {
return;
}
} }
} else { } else {
const path = pathname; 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;
}
} }
} }
......
...@@ -129,13 +129,15 @@ const Graph = React.forwardRef<pageRef, GraphProps>(({changeName, changeshowdata ...@@ -129,13 +129,15 @@ const Graph = React.forwardRef<pageRef, GraphProps>(({changeName, changeshowdata
}, },
[setModelFile] [setModelFile]
); );
const {loading} = useRequest<BlobResponse>(files ? null : '/graph/graph');
// useEffect(() => { const {data, loading} = useRequest<BlobResponse>(files ? null : '/graph/static_graph');
// if (data?.data?.size) {
// setFiles([new File([data.data], data.filename || 'unknown_model')]); useEffect(() => {
// } if (data?.data?.size) {
// }, [data]); 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 [modelGraphs, setModelGraphs] = useState<OpenedResult['graphs']>([]);
const [selectedGraph, setSelectedGraph] = useState<NonNullable<OpenedResult['selected']>>(''); const [selectedGraph, setSelectedGraph] = useState<NonNullable<OpenedResult['selected']>>('');
......
/* 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;
...@@ -3,7 +3,7 @@ import {rem, primaryColor, size} from '~/utils/style'; ...@@ -3,7 +3,7 @@ import {rem, primaryColor, size} from '~/utils/style';
import Content from '~/components/Content'; import Content from '~/components/Content';
import {toast} from 'react-toastify'; import {toast} from 'react-toastify';
import {fetcher} from '~/utils/fetch'; import {fetcher} from '~/utils/fetch';
import GraphStatic from '~/pages/graphStatic'; import GraphStatic from '~/pages/graphStatic3';
import GraphStatic2 from '~/pages/graphStatic2'; import GraphStatic2 from '~/pages/graphStatic2';
import HashLoader from 'react-spinners/HashLoader'; import HashLoader from 'react-spinners/HashLoader';
import styled from 'styled-components'; import styled from 'styled-components';
...@@ -262,6 +262,7 @@ function App() { ...@@ -262,6 +262,7 @@ function App() {
</div> </div>
); );
}, [show.show2]); }, [show.show2]);
console.log('show', show);
return ( return (
<Content> <Content>
{loading && ( {loading && (
......
...@@ -82,13 +82,13 @@ const routes: Route[] = [ ...@@ -82,13 +82,13 @@ const routes: Route[] = [
id: Pages.Graph, id: Pages.Graph,
children: [ children: [
{ {
id: 'graphDynamic', id: 'dynamic_graph',
path: '/graph/graphDynamic', path: '/graph/dynamic_graph',
component: React.lazy(() => import('~/pages/graphDynamic')) component: React.lazy(() => import('~/pages/graphDynamic'))
}, },
{ {
id: 'graphStatic', id: 'static_graph',
path: '/graph/graphStatic', path: '/graph/static_graph',
component: React.lazy(() => import('~/pages/graphStatic')) component: React.lazy(() => import('~/pages/graphStatic'))
} }
] ]
......
...@@ -14,20 +14,20 @@ ...@@ -14,20 +14,20 @@
* limitations under the License. * limitations under the License.
*/ */
// export default [ export default [
// 'scalar', 'scalar',
// 'image', 'image',
// 'text', 'text',
// 'embeddings', 'embeddings',
// 'audio', 'audio',
// 'histogram', 'histogram',
// 'hyper_parameters', 'hyper_parameters',
// 'static_graph', 'static_graph',
// 'dynamic_graph', 'dynamic_graph',
// 'pr_curve', 'pr_curve',
// 'roc_curve', 'roc_curve',
// 'profiler', 'profiler',
// 'x2paddle', 'x2paddle',
// 'fastdeploy_server' 'fastdeploy_server'
// ]; ];
export default ['fastdeploy_client', 'static_graph', 'x2paddle', 'fastdeploy_server']; // export default ['fastdeploy_client', 'static_graph', 'x2paddle', 'fastdeploy_server'];
/**
* 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"'
}
});
};
...@@ -527,7 +527,7 @@ function getCaption(obj) { ...@@ -527,7 +527,7 @@ function getCaption(obj) {
return newObj; return newObj;
} }
const hash = getCaption(document.referrer); const hash = getCaption(document.referrer);
if (hash === 'graphStatic' || hash === 'x2paddle') { if (hash === 'static_graph' || hash === 'x2paddle') {
window.__view__ = new view2.View(new host.BrowserHost()); window.__view__ = new view2.View(new host.BrowserHost());
} else { } else {
window.__view__ = new view.View(new host.BrowserHost()); window.__view__ = new view.View(new host.BrowserHost());
......
...@@ -535,7 +535,7 @@ function getCaption(obj) { ...@@ -535,7 +535,7 @@ function getCaption(obj) {
} }
const hash = getCaption(document.referrer); const hash = getCaption(document.referrer);
console.log('hash', hash); console.log('hash', hash);
if (hash === 'graphStatic' || hash === 'x2paddle') { if (hash === 'static_graph' || hash === 'x2paddle') {
window.__view__ = new view2.View(new host.BrowserHost()); window.__view__ = new view2.View(new host.BrowserHost());
} else { } else {
window.__view__ = new view.View(new host.BrowserHost()); window.__view__ = new view.View(new host.BrowserHost());
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册