Dev

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 120
+}

README.md

@@ -6,7 +6,7 @@
 ![](https://img.shields.io/github/license/ObservedObserver/showme)
 
 
-<img src="https://ch-rath.oss-ap-northeast-1.aliyuncs.com/assets/kanaries-light-bg.png" alt="logo" width="360px" style="" />
+<img src="https://ch-rath.oss-ap-northeast-1.aliyuncs.com/assets/kanaries-light-bg.png" alt="logo" width="180px" style="" />
 
 Automatic insights extraction and visualization specification based on `visual-insights`.
 
@@ -140,4 +140,14 @@ Rath is insipired by several excellent works below:
 + Wongsuphasawat, Kanit, et al. "Voyager 2: Augmenting visual analysis with partial view specifications." Proceedings of the 2017 CHI Conference on Human Factors in Computing Systems. ACM, 2017.
 + B. Tang et al, "Extracting top-K insights from multi-dimensional data," in 2017, . DOI: 10.1145/3035918.3035922.
 + A. Satyanarayan, K. Wongsuphasawat and J. Heer, "Declarative interaction design for data visualization," in 2014, . DOI: 10.1145/2642918.2647360.
-+ Cleveland, W., & McGill, R. (1984). Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods. Journal of the American Statistical Association, 79(387), 531-554. doi:10.2307/2288400
++ Cleveland, W., & McGill, R. (1984). Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods. Journal of the American Statistical Association, 79(387), 531-554. doi:10.2307/2288400
+
+## Story behind Rath
+
+Rath is original from Mome Raths in *Alice's Adventures in Wonderland*.
+
+<div style="text-align:center;">
+    <img src="https://ch-resources.oss-cn-shanghai.aliyuncs.com/images/mome-raths.png" alt="logo" width="280px" />
+</div>
+
+The word Rath is used in SAO Alicization as name of org. developing Soul Translator (STL) and Under World, which creates A.L.I.C.E.

README.zh-CN.md

@@ -142,4 +142,14 @@ Rath is insipired by several excellent works below:
 + Wongsuphasawat, Kanit, et al. "Voyager 2: Augmenting visual analysis with partial view specifications." Proceedings of the 2017 CHI Conference on Human Factors in Computing Systems. ACM, 2017.
 + B. Tang et al, "Extracting top-K insights from multi-dimensional data," in 2017, . DOI: 10.1145/3035918.3035922.
 + A. Satyanarayan, K. Wongsuphasawat and J. Heer, "Declarative interaction design for data visualization," in 2014, . DOI: 10.1145/2642918.2647360.
-+ Cleveland, W., & McGill, R. (1984). Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods. Journal of the American Statistical Association, 79(387), 531-554. doi:10.2307/2288400
++ Cleveland, W., & McGill, R. (1984). Graphical Perception: Theory, Experimentation, and Application to the Development of Graphical Methods. Journal of the American Statistical Association, 79(387), 531-554. doi:10.2307/2288400
+
+## Story behind Rath
+
+Rath is original from Mome Raths in *Alice's Adventures in Wonderland*.
+
+<div style="text-align:center;">
+    <img src="https://ch-resources.oss-cn-shanghai.aliyuncs.com/images/mome-raths.png" alt="logo" width="280px" />
+</div>
+
+The word Rath is used in SAO Alicization as name of org. developing Soul Translator (STL) and Under World, which creates A.L.I.C.E.

packages/augmented-pivot-table/package.json

@@ -11,7 +11,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "pivot-chart": "^0.1.3",
+    "pivot-chart": "0.1.7",
     "react": "^16.13.1",
     "react-beautiful-dnd": "^13.0.0",
     "react-dom": "^16.13.1",

packages/augmented-pivot-table/src/app.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo, useCallback } from "react";
+import React, { useEffect, useState, useMemo, useCallback, useRef } from "react";
 import { Insight } from 'visual-insights';
 import {
   ToolBar,
@@ -8,19 +8,24 @@ import {
   VisType,
   Field,
   AggNodeConfig,
+  NestTree,
 } from "pivot-chart";
 import { TitanicCubeService, getTitanicData } from "./service";
-import { QueryPath, queryCube } from "pivot-chart/build/utils";
+import { QueryPath, queryCube, AsyncCacheCube } from "pivot-chart/build/utils";
 import { ViewSpace } from "visual-insights/build/esm/insights/dev";
 import DragableFields, { DraggableFieldState, RecField } from './dragableFields/index'
 import { buildCubePool } from "./dragableFields/utils";
+import { enumerateExpandableNode, getViewFinalScore } from "./autoPath";
 
 const initDraggableState: DraggableFieldState = {
   fields: [],
   rows: [],
   columns: [],
   measures: [],
 };
+interface ViewSpaceWithCor extends ViewSpace {
+  corValue: number;
+}
 interface Dataset {
   dataSource: DataSource;
   fields: Field[];
@@ -32,10 +37,14 @@ function AsyncApp() {
   const [recFields, setRecFields] = useState<RecField[]>([]);
   const [fstate, setFstate] = useState<DraggableFieldState>(initDraggableState);
   const [visType, setVisType] = useState<VisType>("number");
+  const [rowScoreList, setRowScoreList] = useState<Array<[QueryPath, number]>>([]);
+  const [colScoreList, setColScoreList] = useState<Array<[QueryPath, number]>>([]);
   const [aggNodeConfig, setAggNodeConfig] = useState<AggNodeConfig>({
     row: false,
     column: false,
   });
+  const cubeRef = useRef<AsyncCacheCube>();
+  const [nestTrees, setNestTrees] = useState<{left: NestTree; top: NestTree}>({ left: null, top: null });
 
   const cubeQuery = useCallback(async (path: QueryPath, measures: string[]) => {
     return TitanicCubeService(
@@ -79,9 +88,7 @@ function AsyncApp() {
       dimensions,
       [...fstate.rows, ...fstate.columns].map((d) => d.id)
     );
-    interface ViewSpaceWithCor extends ViewSpace {
-      corValue: number;
-    }
+
     const viewSpaces: ViewSpaceWithCor[] = [];
     for (let recDim of result) {
         const dimsInView = [...fstate.rows, ...fstate.columns]
@@ -125,6 +132,106 @@ function AsyncApp() {
 
   }, [fstate.rows, fstate.columns, fstate.measures, dataset])
 
+  useEffect(() => {
+    console.log('nestTrees', nestTrees)
+    if (nestTrees.left !== null && nestTrees.top !== null) {
+
+      let leftStatus = {
+        isEnd: false,
+        count: 0,
+        asyncCount: 0,
+        ans: []
+      };
+      let topStatus = {
+        isEnd: false,
+        count: 0,
+        asyncCount: 0,
+        ans: [],
+      };
+      enumerateExpandableNode(nestTrees.left, fstate.rows.map(f => f.id), (path) => {
+        console.log(path)
+        leftStatus.count++;
+        cubeRef.current.cacheQuery(path, fstate.measures.map(m => m.id))
+          .then(res => {
+            console.log('cube res', res)
+            let cubePool = new Map();
+            const viewSpace: ViewSpace = {
+              dimensions: path.map(p => p.dimCode),
+              measures: fstate.measures.map(m => m.id)
+            }
+            cubePool.set(viewSpace.dimensions.join('=;='), res)
+            return Insight.getIntentionSpaces(
+              cubePool,
+              [viewSpace],
+              Insight.IntentionWorkerCollection.init()
+            );
+          })
+          .then(spaces => {
+            leftStatus.asyncCount++;
+            console.log('spaces', spaces, path.map(p => p.dimValue))
+            const score = getViewFinalScore(spaces);
+            leftStatus.ans.push([path, score])
+            if (leftStatus.isEnd && leftStatus.count === leftStatus.asyncCount) {
+              leftStatus.ans.sort((a, b) => b[1] - a[1])
+              setRowScoreList(leftStatus.ans);
+            }
+          })
+      }, () => {
+        leftStatus.isEnd = true;
+      });
+      enumerateExpandableNode(
+        nestTrees.top,
+        fstate.columns.map((f) => f.id),
+        (path) => {
+          console.log(path);
+          topStatus.count++;
+          cubeRef.current
+            .cacheQuery(
+              path,
+              fstate.measures.map((m) => m.id)
+            )
+            .then((res) => {
+              console.log("cube res", res);
+              let cubePool = new Map();
+              const viewSpace: ViewSpace = {
+                dimensions: path.map((p) => p.dimCode),
+                measures: fstate.measures.map((m) => m.id),
+              };
+              cubePool.set(viewSpace.dimensions.join("=;="), res);
+              return Insight.getIntentionSpaces(
+                cubePool,
+                [viewSpace],
+                Insight.IntentionWorkerCollection.init()
+              );
+            })
+            .then((spaces) => {
+              topStatus.asyncCount++;
+              console.log(
+                "spaces",
+                spaces,
+                path.map((p) => p.dimValue)
+              );
+              const score = getViewFinalScore(spaces);
+              topStatus.ans.push([path, score]);
+              if (topStatus.isEnd && topStatus.count === topStatus.asyncCount) {
+                topStatus.ans.sort((a, b) => b[1] - a[1]);
+                setColScoreList(topStatus.ans);
+              }
+            });
+        },
+        () => {
+          topStatus.isEnd = true;
+        }
+      );
+    }
+
+  }, [nestTrees, fstate.measures])
+
+  const highlightList = useMemo<any[]>(() => {
+    let scoreList = [...rowScoreList.slice(0, 1), ...colScoreList.slice(0, 1)];
+    return scoreList.map(s => s[0].slice(0, -1).map(f => f.dimValue))
+  }, [rowScoreList, colScoreList])
+  console.log('high', highlightList)
   return (
     <div>
       <DragableFields
@@ -146,18 +253,22 @@ function AsyncApp() {
       />
 
       <AsyncPivotChart
+        cubeRef={cubeRef}
         visType={visType}
         rows={fstate["rows"]}
         columns={fstate["columns"]}
-        defaultExpandedDepth={{
-          rowDepth: 20,
-          columnDepth: 20,
-        }}
         showAggregatedNode={aggNodeConfig}
         cubeQuery={cubeQuery}
         measures={choosenMeasures}
+        onNestTreeChange={(left, top) => {
+          setNestTrees({ left, top });
+        }}
+        defaultExpandedDepth={{
+          rowDepth: 1,
+          columnDepth: 1
+        }}
+        highlightPathList={highlightList}
       />
-
     </div>
   );
 }

packages/augmented-pivot-table/src/autoPath.ts

@@ -0,0 +1,45 @@
+import { NestTree } from "pivot-chart";
+import { QueryPath } from "pivot-chart/build/utils";
+import { ViewSpace } from "visual-insights/build/esm/insights/dev";
+import { Insight } from "visual-insights";
+
+export function enumerateExpandableNode (tree: NestTree, dimensions: string[], each: (path: QueryPath, node: NestTree) => void, end?: () => void) {
+  const queue: Array<[NestTree, QueryPath, number]> = [];
+  queue.push([tree, [], 0]);
+  while(queue.length > 0) {
+    const [node, parentPath, depth] = queue.shift();
+    const path: QueryPath = [...parentPath];
+    const currentDimension = dimensions[depth - 1];
+    if (depth >= 1) {
+      path.push({
+        dimCode: currentDimension,
+        dimValue: node.id
+      })
+    }
+    if (node.expanded) {
+      if (node.children && node.children.length > 0) {
+        for (let child of node.children) {
+          queue.push([child, path, depth + 1])
+        }
+      }
+    } else {
+      const prePath: QueryPath = [...path];
+      if (depth < dimensions.length) {
+        prePath.push({
+          dimCode: dimensions[depth],
+          dimValue: '*'
+        });
+        each(prePath, node);
+      } 
+    }
+  }
+  if (end) {
+    end();
+  }
+}
+
+export function getViewFinalScore(spacesOfOneView: Insight.InsightSpace[]): number {
+  let totalSig = spacesOfOneView.map(space => space.significance).reduce((total, val) => total +val);
+  totalSig /= spacesOfOneView.length;
+  return totalSig;
+}