Graph

frontend/.eslintrc.js

@@ -27,9 +27,9 @@ module.exports = {
     },
     plugins: ['license-header'],
     rules: {
-        'no-console': 'warn',
-        'sort-imports': 'error',
-        'license-header/header': ['error', './license-header.js']
+        'sort-imports': 'warn',
+        'no-console': 'warn'
+        // 'license-header/header': ['error', './license-header.js']
     },
     overrides: [
         {

frontend/packages/core/package.json

@@ -26,6 +26,7 @@
         "dev": "snowpack dev",
         "dev:reload": "yarn dev --reload",
         "build": "snowpack build && node builder/post-build.js",
+        "lint": "eslint --ext .tsx,.jsx.ts,.js,.mjs",
         "snowpack": "snowpack",
         "test": "web-test-runner \"test/**/*.tsx\""
     },
@@ -48,6 +49,7 @@
         "d3-format": "3.0.1",
         "echarts": "4.9.0",
         "echarts-gl": "1.1.2",
+        "eslint-plugin-simple-import-sort": "^7.0.0",
         "eventemitter3": "4.0.7",
         "file-saver": "2.0.5",
         "i18next": "20.6.0",

frontend/packages/core/public/locales/en/common.json

@@ -10,6 +10,8 @@
     "empty": "Nothing to display",
     "error": "Error occurred",
     "graph": "Graphs",
+    "graphDynamic": "dynamic",
+    "graphStatic": "static",
     "high-dimensional": "High Dimensional",
     "histogram": "Histogram",
     "hyper-parameter": "Hyper Parameters",

frontend/packages/core/public/locales/en/graph.json

@@ -43,12 +43,15 @@
         "type": "Type",
         "version": "Version"
     },
-    "restore-size": "Restore Size",
+    "restore-size": "Fully Shrinked data model",
+    "expend-size": "Fully expanded  Data Model",
     "show-attributes": "Show Attributes",
     "show-initializers": "Show Initializers",
     "show-node-names": "Show Node Names",
+    "keep-expanded": "keep expanded",
     "subgraph": "Select Subgraph",
     "supported-model": "Supported models: ",
+    "Choose-model": "Choose a model",
     "supported-model-list": "PaddlePaddle, ONNX, Keras, Core ML, Caffe, Caffe2, Darknet, MXNet, ncnn, TensorFlow Lite",
     "upload-model": "Upload Model",
     "upload-tip": "Click or Drop file here to view neural network models",

frontend/packages/core/public/locales/zh/common.json

@@ -10,6 +10,8 @@
     "empty": "暂无数据",
     "error": "发生错误",
     "graph": "网络结构",
+    "graphDynamic": "动态",
+    "graphStatic": "静态",
     "high-dimensional": "数据降维",
     "histogram": "直方图",
     "hyper-parameter": "超参可视化",

frontend/packages/core/public/locales/zh/graph.json

@@ -43,16 +43,19 @@
         "type": "类型",
         "version": "版本"
     },
-    "restore-size": "重置大小",
+    "restore-size": "全收缩数据模型",
+    "expend-size": "全展开数据模型",
     "show-attributes": "显示参数",
     "show-initializers": "显示初始化参数",
     "show-node-names": "显示节点名称",
     "subgraph": "选择子图",
+    "keep-expanded": "保持展开",
     "supported-model": "VisualDL支持：",
     "supported-model-list": "PaddlePaddle、ONNX、Keras、Core ML、Caffe、Caffe2、Darknet、MXNet、ncnn、TensorFlow Lite",
     "upload-model": "上传模型",
     "upload-tip": "点击或拖拽文件到页面上传模型，进行结构展示",
     "vertical": "垂直",
+    "Choose-model": "选择模型",
     "zoom-in": "放大",
     "zoom-out": "缩小"
 }

frontend/packages/core/src/components/Check.tsx

@@ -0,0 +1,122 @@
+/**
+ * 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 React, {FunctionComponent, useCallback} from 'react';
+import {ellipsis, em, half, math, position, sameBorder, size, transitionProps} from '~/utils/style';
+
+import styled from 'styled-components';
+const height = em(20);
+const checkSize = em(16);
+const checkMark =
+    // eslint-disable-next-line
+    'data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjgiIHZpZXdCb3g9IjAgMCAxMSA4IiB3aWR0aD0iMTEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTkuNDc5NDI3MDggMTAuMTg3NWgtNS4yNXYtMS4zMTI1aDMuOTM3bC4wMDA1LTcuODc1aDEuMzEyNXoiIGZpbGw9IiNmNWY1ZjUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJtYXRyaXgoLjcwNzEwNjc4IC43MDcxMDY3OCAtLjcwNzEwNjc4IC43MDcxMDY3OCA0Ljk2Mjk5NCAtNi4yMDg0NCkiLz48L3N2Zz4=';
+
+const Wrapper = styled.label<{disabled?: boolean}>`
+    position: relative;
+    display: inline-flex;
+    align-items: flex-start;
+    cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
+`;
+const Input = styled.input.attrs<{disabled?: boolean}>(props => ({
+    type: 'checkbox',
+    disabled: !!props.disabled
+}))`
+    ${size(0)}
+    ${position('absolute', 0, null, null, 0)}
+     opacity: 0;
+    pointer-events: none;
+`;
+
+const Inner = styled.div<{checked?: boolean; size?: string; disabled?: boolean}>`
+    color: ${props => (props.checked ? 'var(--text-invert-color)' : 'transparent')};
+    flex-shrink: 0;
+    ${props => size(math(`${checkSize} * ${props.size === 'small' ? 0.875 : 1}`))}
+    margin: ${half(`${height} - ${checkSize}`)} 0;
+    margin-right: ${em(10)};
+    ${props =>
+        sameBorder({color: props.disabled || !props.checked ? 'var(--text-lighter-color)' : 'var(--primary-color)'})};
+    background-color: ${props =>
+        props.disabled
+            ? props.checked
+                ? 'var(--text-lighter-color)'
+                : 'transparent'
+            : props.checked
+            ? 'var(--primary-color)'
+            : 'var(--background-color)'};
+    background-image: ${props => (props.checked ? `url("${checkMark}")` : 'none')};
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: ${em(10)} ${em(8)};
+    position: relative;
+    ${transitionProps(['border-color', 'background-color', 'color'])}
+
+    ${Wrapper}:hover > & {
+        border-color: ${props =>
+            props.disabled
+                ? 'var(--text-lighter-color)'
+                : props.checked
+                ? 'var(--primary-color)'
+                : 'var(--text-lighter-color)'};
+    }
+`;
+
+const Content = styled.div<{disabled?: boolean}>`
+    line-height: ${height};
+    flex-grow: 1;
+    ${props => (props.disabled ? 'color: var(--text-lighter-color);' : '')}
+    ${transitionProps('color')}
+     ${ellipsis()}
+`;
+
+type CheckboxProps = {
+    value: string;
+    checked?: boolean;
+    className?: string;
+    onChange?: (checked: string) => unknown;
+    size?: 'small';
+    title?: string;
+    disabled?: boolean;
+};
+
+const Checkbox: FunctionComponent<CheckboxProps> = ({
+    value,
+    checked,
+    children,
+    size,
+    disabled,
+    className,
+    title,
+    onChange
+}) => {
+    const onChangeInput = useCallback(() => {
+        if (disabled) {
+            return;
+        }
+        if (onChange) {
+            onChange(value);
+        }
+    }, [disabled, onChange]);
+
+    return (
+        <Wrapper disabled={disabled} className={className} title={title}>
+            <Input onChange={onChangeInput} checked={checked} disabled={disabled} />
+            <Inner checked={checked} size={size} disabled={disabled} />
+            <Content disabled={disabled}>{children}</Content>
+        </Wrapper>
+    );
+};
+
+export default Checkbox;

frontend/packages/core/src/components/GraphPage/Argument.tsx

@@ -61,7 +61,7 @@ const Wrapper = styled.div`
             ${transitionProps('color')}
 
             &:hover,
-            &:active {
+              &:active {
                 color: var(--text-light-color);
             }
         }
@@ -96,7 +96,7 @@ const Argument: FunctionComponent<ArgumentProps> = ({value, expand, showNodeDocu
                             {value.name}: <b>{value.value}</b>
                         </>
                     ) : (
-                        value.value.split('\n').map((line, index) => (
+                        new String(value.value).split('\n').map((line, index) => (
                             <React.Fragment key={index}>
                                 {index !== 0 && <br />}
                                 {line}