Merge pull request #223 from Kanaries/feat-causal-auto_vis_tab-ks-1130

[Refactor] causal store

packages/rath-client/package.json

@@ -24,8 +24,6 @@
     "airtable": "^0.11.4",
     "ali-react-table": "^2.6.1",
     "codemirror": "^6.0.1",
-    "d3-dag": "^0.11.5",
-    "d3-shape": "^3.1.0",
     "dayjs": "^1.11.6",
     "immer": "^9.0.6",
     "localforage": "^1.10.0",
@@ -55,7 +53,6 @@
     "@testing-library/react": "^11.2.3",
     "@testing-library/user-event": "^12.6.0",
     "@types/crypto-js": "^4.1.0",
-    "@types/d3-shape": "^3.1.0",
     "@types/jest": "^26.0.20",
     "@types/node": "^12.19.12",
     "@types/react": "^17.0.2",

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

@@ -34,7 +34,7 @@ export const PillPlaceholder = styled.div`
 `
 
 interface FieldPlaceholderProps {
-    fields: IFieldMeta[];
+    fields: readonly IFieldMeta[];
     onAdd: (fid: string) => void;
 }
 const  FieldPlaceholder: React.FC<FieldPlaceholderProps> = props => {

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

@@ -29,7 +29,7 @@ const Cont = styled.div`
     min-width: 16em;
 `;
 interface FilterCreationPillProps {
-    fields: IFieldMeta[];
+    fields: readonly IFieldMeta[];
     onFilterSubmit: (field: IFieldMeta, filter: IFilter) => void;
     onRenderPill?: (text: string, handleClick: () => void) => void;
 }

packages/rath-client/src/components/react-vega.tsx

@@ -6,7 +6,7 @@ import { EDITOR_URL } from '../constants';
 import { getVegaTimeFormatRules } from '../utils';
 
 interface ReactVegaProps {
-    dataSource: any[];
+    dataSource: readonly any[];
     spec: any;
     actions?: boolean;
     signalHandler?: {

packages/rath-client/src/constants.ts

@@ -47,7 +47,7 @@ export const STORAGES = {
     DATASOURCE: 'datasource',
     WORKSPACE: 'workspace',
     META: 'meta',
-    MODEL: 'model',
+    CAUSAL_MODEL: 'causal',
     STATE: 'state',
     ITERATOR: 'iterator',
     CONFIG: 'config',

packages/rath-client/src/hooks/use-bounding-client-rect.ts

@@ -0,0 +1,69 @@
+import { RefObject, useEffect, useRef, useState } from "react";
+
+
+export type BoundingClientRectAttributes = {
+    /** @default true */
+    -readonly [key in keyof Omit<DOMRect, 'toJSON'>]?: boolean;
+};
+
+/**
+ * Updates on certain keys of DOMRect changes, detected using `ResizeObserver`.
+ * DISCUSS: use `IntersectionObserver` with ref elements to implements position changes.
+ */
+const useBoundingClientRect = <
+    T extends BoundingClientRectAttributes = { -readonly [key in keyof Omit<DOMRect, 'toJSON'>]: true },
+    M extends { -readonly [key in keyof Omit<DOMRect, 'toJSON'>]: T[key] extends true ? key : never } = { -readonly [key in keyof Omit<DOMRect, 'toJSON'>]: T[key] extends true ? key : never },
+    E extends Exclude<M[keyof M], never> & keyof DOMRect = Exclude<M[keyof M], never> & keyof DOMRect,
+    R extends { readonly [key in E]?: DOMRect[key] } = { readonly [key in E]?: DOMRect[key] },
+>(
+    ref: RefObject<HTMLElement>,
+    /** @default {height:true,width:true,x:true,y:true,bottom:true,left:true,right:true,top:true} */
+    attributes: T = {
+        height: true,
+        width: true,
+        x: true,
+        y: true,
+        bottom: true,
+        left: true,
+        right: true,
+        top: true,
+    } as T,
+): R => {
+    const compareKeysRef = useRef<(keyof BoundingClientRectAttributes)[]>([]);
+    compareKeysRef.current = (["height", "width", "x", "y", "bottom", "left", "right", "top"] as const).filter(key => {
+        return attributes[key] === true;
+    });
+
+    const [box, setBox] = useState<R>({} as R);
+
+    const prevRectRef = useRef<DOMRect>();
+    const shouldReportRef = useRef<(next: DOMRect) => boolean>(() => true);
+    shouldReportRef.current = (next: DOMRect): boolean => {
+        return !prevRectRef.current || compareKeysRef.current.some(k => next[k] !== prevRectRef.current![k]);
+    };
+
+    useEffect(() => {
+        const { current: element } = ref;
+
+        if (element) {
+            const cb = () => {
+                const rect = element.getBoundingClientRect();
+                if (shouldReportRef.current(rect)) {
+                    setBox(Object.fromEntries(compareKeysRef.current.map(key => [key, rect[key]])) as R);
+                }
+                prevRectRef.current = rect;
+            };
+            const ro = new ResizeObserver(cb);
+            ro.observe(element);
+            cb();
+            return () => {
+                ro.disconnect();
+            };
+        }
+    }, [ref]);
+
+    return box;
+};
+
+
+export default useBoundingClientRect;

packages/rath-client/src/pages/causal/config.ts

@@ -28,6 +28,7 @@ export type IAlgoSchema = {
 };
 
 /**
+ * @deprecated
  * a number match { -1 | [0, 1] }
  * 
  * -1 for not connected: src ---x--> tar
@@ -36,6 +37,9 @@ export type IAlgoSchema = {
  */
 export type BgConfidenceLevel = number;
 
+/**
+ * @deprecated
+ */
 export type BgKnowledge = {
     src: string;
     tar: string;
@@ -56,8 +60,10 @@ export interface PagLink {
     tar_type: PAG_NODE;
 }
 
+/** @deprecated */
 export type BgKnowledgePagLink = PagLink;
 
+/** @deprecated */
 export type ModifiableBgKnowledge = {
     src: BgKnowledge['src'];
     tar: BgKnowledge['tar'];