update demo to latest (#970)

* chore: update demo

* chore: update demo

* bump fe to 2.2.0

* bump fe to 2.2.0-1

* fix: docker runtime error

Dockerfile

@@ -12,7 +12,7 @@ FROM python:3-alpine
 WORKDIR /home/visualdl
 COPY --from=builder /home/visualdl/dist/* dist/
 
-RUN apk add --no-cache jpeg-dev && \
+RUN apk add --no-cache jpeg-dev libstdc++ && \
     apk add --no-cache --virtual .build-deps build-base linux-headers zlib-dev && \
     pip install --disable-pip-version-check --find-links=dist visualdl && \
     apk del --no-network .build-deps && \

frontend/lerna.json

@@ -2,7 +2,7 @@
     "packages": [
         "packages/*"
     ],
-    "version": "2.1.5",
+    "version": "2.2.0-1",
     "npmClient": "yarn",
     "useWorkspaces": true,
     "command": {

frontend/packages/cli/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@visualdl/cli",
-    "version": "2.1.5",
+    "version": "2.2.0-1",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [
         "visualdl",
@@ -34,7 +34,7 @@
         "dist"
     ],
     "dependencies": {
-        "@visualdl/server": "2.1.5",
+        "@visualdl/server": "2.2.0-1",
         "open": "8.0.9",
         "ora": "5.4.0",
         "pm2": "4.5.6",

frontend/packages/core/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@visualdl/core",
-    "version": "2.1.5",
+    "version": "2.2.0-1",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [
         "visualdl",
@@ -35,8 +35,8 @@
     ],
     "dependencies": {
         "@tippyjs/react": "4.2.5",
-        "@visualdl/netron": "2.1.5",
-        "@visualdl/wasm": "2.1.5",
+        "@visualdl/netron": "2.2.0-1",
+        "@visualdl/wasm": "2.2.0-1",
         "bignumber.js": "9.0.1",
         "classnames": "2.3.1",
         "d3": "6.7.0",
@@ -113,7 +113,7 @@
         "@types/snowpack-env": "2.3.3",
         "@types/styled-components": "5.1.9",
         "@types/three": "0.128.0",
-        "@visualdl/mock": "2.1.5",
+        "@visualdl/mock": "2.2.0-1",
         "babel-plugin-styled-components": "1.12.0",
         "dotenv": "9.0.2",
         "enhanced-resolve": "5.8.2",

frontend/packages/core/src/hooks/useECharts.ts

@@ -63,7 +63,7 @@ const useECharts = <T extends HTMLElement, W extends HTMLElement = HTMLDivElemen
                 await import('echarts-gl');
             }
 
-            const echartInstance = echarts.init((ref.current as unknown) as HTMLDivElement);
+            const echartInstance = echarts.init(ref.current as unknown as HTMLDivElement);
 
             ref.current.addEventListener('mouseleave', hideTip);
 

frontend/packages/core/src/hooks/useTagFilter.ts

@@ -251,10 +251,10 @@ const useTagFilter = (type: Page, running: boolean) => {
         [state.tags]
     );
 
-    const runsInTags = useMemo(() => state.selectedRuns.filter(run => !!tags?.[run.label]?.length), [
-        state.selectedRuns,
-        tags
-    ]);
+    const runsInTags = useMemo(
+        () => state.selectedRuns.filter(run => !!tags?.[run.label]?.length),
+        [state.selectedRuns, tags]
+    );
 
     return {
         ...state,

frontend/packages/core/src/hooks/useThrottleFn.ts

@@ -51,7 +51,7 @@ function useThrottleFn<T extends Fn>(fn: T, options?: ThrottleOptions): ReturnVa
     );
 
     return {
-        run: (throttled as any) as T,
+        run: throttled as any as T,
         cancel: throttled.cancel
     };
 }

frontend/packages/core/src/resource/histogram/chart.ts

@@ -45,15 +45,15 @@ export const options: Record<Modes, EChartOption> = {
     },
     offset: {
         ...baseOptions,
-        visualMap: ({
+        visualMap: {
             type: 'continuous',
             show: false,
             dimension: 1,
             inRange: {
                 colorLightness: [0.5, 0.8],
                 colorSaturation: [0.5, 0.8]
             }
-        } as unknown) as VisualMap.Continuous[], // Fix echarts type bug
+        } as unknown as VisualMap.Continuous[], // Fix echarts type bug
         xAxis: {
             axisLine: {
                 onZero: false

frontend/packages/core/src/utils/fetch.ts

@@ -68,7 +68,7 @@ export type BlobResponse = {
 function getT(): Promise<TFunction> {
     return new Promise(resolve => {
         // Bug of i18next
-        i18next.changeLanguage((undefined as unknown) as string).then(t => resolve(t));
+        i18next.changeLanguage(undefined as unknown as string).then(t => resolve(t));
     });
 }
 

frontend/packages/demo/builder/audio.ts

@@ -14,23 +14,18 @@
  * limitations under the License.
  */
 
-import type {Data, Worker} from './types';
-
-interface Audio {
-    step: number;
-    wallTime: number;
-}
+import type {Sample, TagData, Worker} from './types';
 
 const worker: Worker = async io => {
     const components = await io.getData<string[]>('/components');
     if (!components.includes('audio')) {
         return;
     }
 
-    const {runs, tags} = await io.save<Data>('/audio/tags');
+    const {runs, tags} = await io.save<TagData>('/audio/tags');
     for (const [index, run] of runs.entries()) {
         for (const tag of tags[index]) {
-            const list = (await io.save<Audio[]>('/audio/list', {run, tag})) ?? [];
+            const list = (await io.save<Sample[]>('/audio/list', {run, tag})) ?? [];
             for (const [index, audio] of list.entries()) {
                 await io.saveBinary('/audio/audio', {run, tag, index, ts: audio.wallTime});
             }

frontend/packages/demo/builder/high-dimensional.ts

@@ -14,14 +14,15 @@
  * limitations under the License.
  */
 
-import type {Embedding, Worker} from './types';
+import type {Worker} from './types';
 
-const worker: Worker = async io => {
-    const components = await io.getData<string[]>('/components');
-    if (!components.includes('embeddings')) {
-        return;
-    }
+interface Embedding {
+    name: string;
+    shape: [number, number];
+    path: string;
+}
 
+const worker: Worker = async io => {
     const list = await io.save<Embedding[]>('/embedding/list');
     await Promise.all(
         list.map(({name}) =>

frontend/packages/demo/builder/histogram.ts

@@ -14,15 +14,10 @@
  * limitations under the License.
  */
 
-import type {Data, Worker} from './types';
+import type {TagData, Worker} from './types';
 
 const worker: Worker = async io => {
-    const components = await io.getData<string[]>('/components');
-    if (!components.includes('histogram')) {
-        return;
-    }
-
-    const {runs, tags} = await io.save<Data>('/histogram/tags');
+    const {runs, tags} = await io.save<TagData>('/histogram/tags');
     const q = [];
     for (const [index, run] of runs.entries()) {
         for (const tag of tags[index]) {

frontend/packages/demo/builder/hyper-parameter.ts

@@ -0,0 +1,49 @@
+/**
+ * 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 {Worker} from './types';
+
+interface Indicator {
+    name: string;
+    type: string;
+}
+
+interface IndicatorData {
+    hparams: Indicator[];
+    metrics: Indicator[];
+}
+
+interface ListItem {
+    name: string;
+    hparams: Record<string, string | number>;
+    metrics: Record<string, string | number>;
+}
+
+const DataTypes = ['csv', 'tsv'];
+
+const worker: Worker = async io => {
+    const q = [io.save<IndicatorData>('/hparams/indicators'), io.save<ListItem[]>('/hparams/list')] as const;
+    const [{metrics}, list] = await Promise.all(q);
+    for (const row of list) {
+        for (const metric of metrics) {
+            await io.save('/hparams/metric', {run: row.name, metric: metric.name});
+        }
+    }
+
+    await Promise.all(DataTypes.map(type => io.saveBinary('/hparams/data', {type})));
+};
+
+export default worker;

frontend/packages/demo/builder/image.ts

@@ -14,23 +14,13 @@
  * limitations under the License.
  */
 
-import type {Data, Worker} from './types';
-
-interface Image {
-    step: number;
-    wallTime: number;
-}
+import type {Sample, TagData, Worker} from './types';
 
 const worker: Worker = async io => {
-    const components = await io.getData<string[]>('/components');
-    if (!components.includes('image')) {
-        return;
-    }
-
-    const {runs, tags} = await io.save<Data>('/image/tags');
+    const {runs, tags} = await io.save<TagData>('/image/tags');
     for (const [index, run] of runs.entries()) {
         for (const tag of tags[index]) {
-            const list = (await io.save<Image[]>('/image/list', {run, tag})) ?? [];
+            const list = (await io.save<Sample[]>('/image/list', {run, tag})) ?? [];
             for (const [index, image] of list.entries()) {
                 await io.saveBinary('/image/image', {run, tag, index, ts: image.wallTime});
             }

frontend/packages/demo/builder/index.ts

@@ -26,7 +26,19 @@ import {spawn} from 'child_process';
 
 const host = '127.0.0.1';
 const publicPath = '/visualdl';
-const pages = ['common', 'scalar', 'histogram', 'image', 'audio', 'graph', 'pr-curve', 'roc-curve', 'high-dimensional'];
+const pages = [
+    'common',
+    'scalar',
+    'histogram',
+    'image',
+    'audio',
+    'text',
+    'graph',
+    'pr-curve',
+    'roc-curve',
+    'high-dimensional',
+    'hyper-parameter'
+];
 const dataDir = path.resolve(__dirname, '../data');
 
 async function start() {

frontend/packages/demo/builder/pr-curve.ts

@@ -14,15 +14,10 @@
  * limitations under the License.
  */
 
-import type {Data, Worker} from './types';
+import type {TagData, Worker} from './types';
 
 const worker: Worker = async io => {
-    const components = await io.getData<string[]>('/components');
-    if (!components.includes('pr_curve')) {
-        return;
-    }
-
-    const {runs, tags} = await io.save<Data>('/pr-curve/tags');
+    const {runs, tags} = await io.save<TagData>('/pr-curve/tags');
     for (const [index, run] of runs.entries()) {
         await io.save('/pr-curve/steps', {run});
         for (const tag of tags[index]) {

frontend/packages/demo/builder/roc-curve.ts

@@ -14,15 +14,10 @@
  * limitations under the License.
  */
 
-import type {Data, Worker} from './types';
+import type {TagData, Worker} from './types';
 
 const worker: Worker = async io => {
-    const components = await io.getData<string[]>('/components');
-    if (!components.includes('roc_curve')) {
-        return;
-    }
-
-    const {runs, tags} = await io.save<Data>('/roc-curve/tags');
+    const {runs, tags} = await io.save<TagData>('/roc-curve/tags');
     for (const [index, run] of runs.entries()) {
         await io.save('/roc-curve/steps', {run});
         for (const tag of tags[index]) {

frontend/packages/demo/builder/scalar.ts

@@ -14,17 +14,12 @@
  * limitations under the License.
  */
 
-import type {Data, Worker} from './types';
+import type {TagData, Worker} from './types';
 
 const DataTypes = ['csv', 'tsv'];
 
 const worker: Worker = async io => {
-    const components = await io.getData<string[]>('/components');
-    if (!components.includes('scalar')) {
-        return;
-    }
-
-    const {runs, tags} = await io.save<Data>('/scalar/tags');
+    const {runs, tags} = await io.save<TagData>('/scalar/tags');
     const q = [];
     for (const [index, run] of runs.entries()) {
         for (const tag of tags[index]) {

frontend/packages/demo/builder/text.ts

@@ -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.
+ */
+
+import type {Sample, TagData, Worker} from './types';
+
+const worker: Worker = async io => {
+    const {runs, tags} = await io.save<TagData>('/text/tags');
+    for (const [index, run] of runs.entries()) {
+        for (const tag of tags[index]) {
+            const list = (await io.save<Sample[]>('/text/list', {run, tag})) ?? [];
+            for (const [index, text] of list.entries()) {
+                await io.saveBinary('/text/text', {run, tag, index, ts: text.wallTime});
+            }
+        }
+    }
+};
+
+export default worker;

frontend/packages/demo/builder/types.ts

@@ -18,13 +18,12 @@ import type IO from './io';
 
 export type Worker = (io: IO) => Promise<void>;
 
-export type Data = {
+export interface TagData {
     runs: string[];
     tags: string[][];
-};
+}
 
-export type Embedding = {
-    name: string;
-    shape: [number, number];
-    path: string;
-};
+export interface Sample {
+    step: number;
+    wallTime: number;
+}