Merge pull request #97 from Kanaries/dev

feat: discovery module refactor

package.json

@@ -32,12 +32,14 @@
       "*/webpack-cli",
       "**/vega",
       "**/vega-lite",
-      "**/vega-embed"
+      "**/vega-embed",
+      "**/visual-insights"
     ]
   },
   "homepage": "https://github.com/ObservedObserver/showme#readme",
   "devDependencies": {
     "concurrently": "^4.1.2",
     "yarn": "^1.19.0"
-  }
+  },
+  "dependencies": {}
 }

packages/graphic-walker/package.json

@@ -2,7 +2,7 @@
   "name": "@kanaries/graphic-walker",
   "version": "0.1.0",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "tsc && vite build",
     "serve": "vite preview",
     "type": "tsc src/lib.ts --declaration --emitDeclarationOnly --jsx react --esModuleInterop --outDir dist"

packages/graphic-walker/src/dataSource/config.ts

@@ -9,15 +9,15 @@ export const DemoDataAssets = process.env.NODE_ENV === 'production' ? {
     KELPER: 'https://chspace.oss-cn-hongkong.aliyuncs.com/api/ds-kelper-service.json',
 } : {
     // CARS: "https://chspace.oss-cn-hongkong.aliyuncs.com/api/ds-cars-service.json",
-    CARS: "http://localhost:8080/api/ds-cars-service.json",
-    // STUDENTS: "https://chspace.oss-cn-hongkong.aliyuncs.com/api/ds-students-service.json",
-    STUDENTS: "http://localhost:8080/api/ds-students-service.json",
-    BTC_GOLD: "http://localhost:8080/api/ds_btc_gold_service.json",
-    BIKE_SHARING: 'http://localhost:8080/api/ds-bikesharing-service.json',
-    CAR_SALES: 'http://localhost:8080/api/ds-carsales-service.json',
-    COLLAGE: 'http://localhost:8080/api/ds-collage-service.json',
-    TITANIC: 'http://localhost:8080/api/ds-titanic-service.json',
-    KELPER: 'http://localhost:8080/api/ds-kelper-service.json',
+    CARS: "http://localhost:8080/datasets/ds-cars-service.json",
+    // STUDENTS: "https://chspace.oss-cn-hongkong.aliyuncs.com/datasets/ds-students-service.json",
+    STUDENTS: "http://localhost:8080/datasets/ds-students-service.json",
+    BTC_GOLD: "http://localhost:8080/datasets/ds_btc_gold_service.json",
+    BIKE_SHARING: 'http://localhost:8080/datasets/ds-bikesharing-service.json',
+    CAR_SALES: 'http://localhost:8080/datasets/ds-carsales-service.json',
+    COLLAGE: 'http://localhost:8080/datasets/ds-collage-service.json',
+    TITANIC: 'http://localhost:8080/datasets/ds-titanic-service.json',
+    KELPER: 'http://localhost:8080/datasets/ds-kelper-service.json',
 } as const;
 
 interface IPublicData {

packages/rath-client/.prettierrc.json

@@ -0,0 +1 @@
+{}

packages/rath-client/config-overrides.js

@@ -1,3 +1,13 @@
+// const path = require('path');
+// const { override, babelInclude } = require('customize-cra')
+
+// const mid_override = override(
+//   babelInclude([
+//     path.resolve('src'),
+//     path.resolve(__dirname, '../../node_modules/visual-insights')
+//   ])
+// )
+
 module.exports = function override(config, env) {
   // do stuff with the webpack config...
   config.module.rules.push({
@@ -11,5 +21,8 @@ module.exports = function override(config, env) {
     },
   })
   config.output.globalObject = 'self'
-  return config;
+  // config.module = config.module || {};
+  // config.module.unknownContextCritical = false
+  return config
+  // return mid_override(config)
 };

packages/rath-client/package.json

@@ -5,17 +5,19 @@
   "homepage": "./",
   "prettier": {
     "tabWidth": 4,
-    "printWidth": 140,
+    "printWidth": 120,
     "singleQuote": true
   },
   "dependencies": {
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@kanaries/graphic-walker": "0.1.0",
+    "@kanaries/loa": "^0.0.2",
     "@kanaries/web-data-loader": "0.1.7",
     "@material-ui/core": "^5.0.0-beta.5",
     "@uifabric/icons": "^7.5.17",
     "@uifabric/react-hooks": "^7.13.9",
+    "airtable": "^0.11.4",
     "ali-react-table": "^2.3.1",
     "chroma-js": "^2.0.6",
     "cube-core": "^2.13.0",
@@ -45,7 +47,7 @@
     "vega": "^5.22.1",
     "vega-embed": "^6.20.8",
     "vega-lite": "^5.2.0",
-    "visual-insights": "0.8.11",
+    "visual-insights": "0.11.2",
     "web-vitals": "^0.2.4",
     "worker-loader": "^3.0.7"
   },
@@ -60,8 +62,10 @@
     "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-dom": "^17.0.1",
     "@types/styled-components": "^5.1.7",
+    "customize-cra": "^1.0.0",
+    "prettier": "2.7.1",
     "source-map-explorer": "^2.5.2",
-    "typescript": "^4.8.0-dev.20220630"
+    "typescript": "^4.7.4"
   },
   "scripts": {
     "start": "react-app-rewired start",

packages/rath-client/public/locales/en-US.json

@@ -5,7 +5,9 @@
         "name": "Name",
         "home": "Home",
         "settings": "Settings",
-        "history": "History"
+        "history": "History",
+        "hide": "Hide",
+        "expand": "Expand"
     },
     "menu": {
         "dataSource": "DataSource",
@@ -286,8 +288,8 @@
     "discovery": {
         "main": {
             "mainView": "Main View",
-            "relatePatterns": "relate patterns(default)",
-            "relateFeatures": "relate features",
+            "relatePatterns": "associate patterns",
+            "relateFeatures": "associate features",
             "explainDiff": "explain diff",
             "pointInterests": "split",
             "pin": "pin",
@@ -297,7 +299,15 @@
                 "lite": "Lite mode(fast)",
                 "strict": "Strict mode"
             },
-            "loadMore": "load more"
+            "loadMore": "load more",
+            "associate": {
+                "patterns": "Associated Patterns",
+                "features": "Associated Features",
+                "filters": "Associated Subsets"
+            }
         }
+    },
+    "desc": {
+        "dataViewInfo": "Pattern in {measures} by {dimensions} where {filters}."
     }
 }

packages/rath-client/public/locales/zh-CN.json

@@ -5,7 +5,9 @@
         "name": "名称",
         "home": "主页",
         "settings": "设置",
-        "history": "历史记录"
+        "history": "历史记录",
+        "hide": "隐藏",
+        "expand": "展开"
     },
     "menu": {
         "dataSource": "数据源",
@@ -136,7 +138,7 @@
         "tip": "记得在开始分析前先调整数据的清洗策略并配置字段的属性",
         "recordCount": "记录数 {count}",
         "upload": {
-            "title": "上传你的数据集，根据需求调整以下配置",
+            "title": "连接你的数据集，根据需求调整以下配置",
             "fileTypes": "支持csv, json文件",
             "uniqueIdIssue": "添加唯一标识(字段是中文字符推荐使用)",
             "sampling": "数据采样",
@@ -224,7 +226,7 @@
         "pageNo": "报表序号: 当前 {current} 总 {total}"
     },
     "explainer": {
-        "notReadyTip": "如果你看到这段文字，说明你还没有在数据页面上传你的数据或者还没有点击数据集页面的获取洞察按钮(它会产生一个当前页面需要使用的计算结果)",
+        "notReadyTip": "如果你看到这段文字，说明你还没有在数据页面连接你的数据或者还没有点击数据集页面的获取洞察按钮(它会产生一个当前页面需要使用的计算结果)",
         "insightButton": "获取洞察",
         "sigThreshold": "显著性阈值",
         "desc": "总共有 {num} 个视图中的洞察显著性不低于 {threshold} %",
@@ -286,8 +288,8 @@
     "discovery": {
         "main": {
             "mainView": "主视图",
-            "relatePatterns": "关联规律(默认)",
-            "relateFeatures": "特征推荐",
+            "relatePatterns": "关联规律",
+            "relateFeatures": "关联特征",
             "explainDiff": "差异性分析",
             "pointInterests": "拆分",
             "pin": "深入分析",
@@ -297,7 +299,15 @@
                 "lite": "轻量模式(近似算法、更快)",
                 "strict": "严格模式(效果更好)"
             },
-            "loadMore": "加载更多"
+            "loadMore": "加载更多",
+            "associate": {
+                "patterns": "关联规律",
+                "features": "关联维度",
+                "filters": "关联子集"
+            }
         }
+    },
+    "desc": {
+        "dataViewInfo": "在 {dimensions} 中 {measures} 的表现， 限制条件 {filters}."
     }
 }

packages/rath-client/src/App.css

@@ -54,12 +54,20 @@ h2, h3 {
   font-size: 12px;
   color: #8a8886;
 }
+
+.pure-card{
+  background-color: #fff;
+  padding: 28px;
+  border-radius: 2px;
+  box-shadow: 0 1.6px 3.6px 0 rgba(0,0,0,0.132), 0 0.3px 0.9px 0 rgba(0,0,0,0.108);
+  margin-bottom: 1em;
+}
 .card{
   background-color: #fff;
   padding: 28px;
   border-radius: 2px;
   box-shadow: 0 1.6px 3.6px 0 rgba(0,0,0,0.132), 0 0.3px 0.9px 0 rgba(0,0,0,0.108);
-  margin-bottom: 28px;
+  margin-bottom: 1em;
   animation-duration: 0.5s;
   animation-name: showCard;
 }

packages/rath-client/src/components/radarChart.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useMemo } from 'react';
 import embed from 'vega-embed';
 import { scheme } from 'vega';
-import { DefaultIWorker } from "visual-insights/build/esm/insights/dev";
+import { DefaultIWorker } from "visual-insights";
 
 scheme('threshold', ['#1890ff', '#ffccc7']);
 
@@ -47,7 +47,7 @@ const RadarChart: React.FC<RadarChartProps> = props => {
   }, [keyField, valueField, dataSource, threshold])
   useEffect(() => {
     if (container.current) {
-      embed(container.current, {
+      const resultPromise = embed(container.current, {
         width: 280,
         height: 280,
         padding: 50,
@@ -227,6 +227,13 @@ const RadarChart: React.FC<RadarChartProps> = props => {
       } as any, {
         actions: false
       });
+      return () => {
+        resultPromise.then(res => {
+          if (res) {
+            res.finalize()
+          }
+        }).catch(console.error)
+      }
     }
   }, [viewData]);
   return <div ref={container}></div>

packages/rath-client/src/components/vizPreference.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from "react";
 import { observer } from 'mobx-react-lite';
-import { PrimaryButton, Stack, Checkbox, Panel, PanelType, ComboBox, Label } from "office-ui-fabric-react";
+import { PrimaryButton, Stack, Checkbox, Panel, PanelType, ComboBox, Label, Slider } from "office-ui-fabric-react";
 import { Aggregator } from "../global";
 import { useGlobalStore } from "../store";
 const checkboxStyles = () => {
@@ -85,6 +85,20 @@ const PreferencePanel: React.FC = () => {
                     }}
                 />
             </Stack>
+            <Slider
+                disabled={!exploreStore.visualConfig.nlg}
+                value={exploreStore.nlgThreshold}
+                label="NLG Threshold(beta)"
+                min={0}
+                max={1}
+                step={0.01}
+                valueFormat={(value: number) => `${Math.round(value * 100)}%`}
+                showValue={true}
+                onChange={(value: number) => {
+                    exploreStore.setNlgThreshold(value);
+
+                }}
+                />
         </Panel>
     );
 };