update demo (#899)

* docs: update demo

* publish fe@2.1.2

* chore: remove deprecated constants

* publish fe@2.1.3

* fix: fix web worker cross origin

* publish fe@2.1.4

* style: lint shell scripts

Author: PeterPanZH

.pre-commit-config.yaml

@@ -17,6 +17,10 @@ repos:
       - id: flake8
         alias: be
         exclude: ^frontend/
+  - repo: https://github.com/shellcheck-py/shellcheck-py
+    rev: v0.7.1.1
+    hooks:
+      - id: shellcheck
   - repo: local
     hooks:
       - id: fe

frontend/lerna.json

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

frontend/packages/cli/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@visualdl/cli",
-    "version": "2.1.1",
+    "version": "2.1.4",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [
         "visualdl",
@@ -34,7 +34,7 @@
         "dist"
     ],
     "dependencies": {
-        "@visualdl/server": "2.1.1",
+        "@visualdl/server": "2.1.4",
         "open": "7.3.0",
         "ora": "5.1.0",
         "pm2": "4.5.1",

frontend/packages/core/builder/environment.js

@@ -23,7 +23,7 @@ process.env.SNOWPACK_PUBLIC_PATH = process.env.CDN_VERSION
     ? ''
     : process.env.PUBLIC_PATH;
 
-// BASE_URI is for env and router, must be local address which starts with a `/` or empty string
+// BASE_URI is for env, router and workers. Must be local address which starts with a `/` or empty string
 // if it is not set and PUBLIC_PATH is not a CDN address, it will be set to the same value of PUBLIC_PATH
 process.env.SNOWPACK_PUBLIC_BASE_URI =
     process.env.SNOWPACK_PUBLIC_PATH.startsWith('/') || process.env.PUBLIC_PATH === ''

frontend/packages/core/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@visualdl/core",
-    "version": "2.1.1",
+    "version": "2.1.4",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [
         "visualdl",
@@ -35,8 +35,8 @@
     ],
     "dependencies": {
         "@tippyjs/react": "4.2.0",
-        "@visualdl/netron": "2.1.1",
-        "@visualdl/wasm": "2.1.1",
+        "@visualdl/netron": "2.1.4",
+        "@visualdl/wasm": "2.1.4",
         "bignumber.js": "9.0.1",
         "d3": "6.3.1",
         "d3-format": "2.0.0",
@@ -105,7 +105,7 @@
         "@types/react-router-dom": "5.1.6",
         "@types/snowpack-env": "2.3.3",
         "@types/styled-components": "5.1.7",
-        "@visualdl/mock": "2.1.1",
+        "@visualdl/mock": "2.1.4",
         "babel-plugin-styled-components": "1.12.0",
         "dotenv": "8.2.0",
         "enhanced-resolve": "5.4.1",

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

@@ -19,7 +19,7 @@ import {useEffect, useState} from 'react';
 import type {InitializeData} from '~/worker';
 import {WebWorker} from '~/worker';
 
-const PUBLIC_PATH: string = import.meta.env.SNOWPACK_PUBLIC_PATH;
+const BASE_URI: string = import.meta.env.SNOWPACK_PUBLIC_BASE_URI;
 
 type WorkerResult<D, E extends Error> = {
     data?: D;
@@ -31,7 +31,7 @@ const useWorker = <D, P = unknown, E extends Error = Error>(name: string, params
     const [result, setResult] = useState<WorkerResult<D, E>>({});
 
     useEffect(() => {
-        const worker = new WebWorker(`${PUBLIC_PATH}/_dist_/worker/${name}.js`, {type: 'module'});
+        const worker = new WebWorker(`${BASE_URI}/_dist_/worker/${name}.js`, {type: 'module'});
         worker.emit<InitializeData>('INITIALIZE', {env: import.meta.env});
         worker.on('INITIALIZED', () => {
             setResult({worker});

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

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

frontend/packages/demo/builder/index.ts

@@ -17,7 +17,6 @@
 /* eslint-disable no-console */
 
 import IO from './io';
-import {SIGINT} from 'constants';
 import type {Worker} from './types';
 import getPort from 'get-port';
 import mkdirp from 'mkdirp';
@@ -63,7 +62,7 @@ async function start() {
 
     const stop = () => {
         if (!p.killed) {
-            p.kill(SIGINT);
+            p.kill('SIGINT');
         }
     };
 

frontend/packages/demo/builder/io.ts

@@ -174,7 +174,7 @@ export default class IO {
 
         const response = await this.fetch(uri, query);
         if (!response.ok) {
-            throw new Error('not ok');
+            throw new Error(`not ok: ${uri}`);
         }
 
         let content: ResponseData<T> | ArrayBuffer;

frontend/packages/demo/builder/scalar.ts

@@ -16,6 +16,8 @@
 
 import type {Data, Worker} from './types';
 
+const DataTypes = ['csv', 'tsv'];
+
 const worker: Worker = async io => {
     const components = await io.getData<string[]>('/components');
     if (!components.includes('scalar')) {
@@ -26,7 +28,10 @@ const worker: Worker = async io => {
     const q = [];
     for (const [index, run] of runs.entries()) {
         for (const tag of tags[index]) {
-            q.push(io.save('/scalar/list', {run, tag}));
+            q.push(
+                io.save('/scalar/list', {run, tag}),
+                ...DataTypes.map(type => io.saveBinary('/scalar/data', {run, tag, type}))
+            );
         }
     }
     await Promise.all(q);