[feat] Dashboard Update

packages/rath-client/config-overrides.js

@@ -29,6 +29,9 @@ module.exports = function override(config, env) {
       },
     }, 'ts-loader'],
   })
+  config.stats = {
+    children: true
+  }
   config.output.globalObject = 'self'
   // config.module = config.module || {};
   // config.module.unknownContextCritical = false

packages/rath-client/package.json

@@ -37,7 +37,6 @@
     "react": "^17.0.1",
     "react-app-rewired": "^2.1.5",
     "react-dom": "^17.0.1",
-    "react-grid-layout": "^1.3.4",
     "react-intl-universal": "^2.6.6",
     "react-json-view": "^1.19.1",
     "react-scripts": "^5.0.1",
@@ -61,7 +60,6 @@
     "@types/node": "^12.19.12",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.1",
-    "@types/react-grid-layout": "^1.3.2",
     "@types/styled-components": "^5.1.7",
     "crypto-js": "^4.1.1",
     "customize-cra": "^1.0.0",

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

@@ -31,9 +31,11 @@ const Cont = styled.div`
 interface FilterCreationPillProps {
     fields: IFieldMeta[];
     onFilterSubmit: (field: IFieldMeta, filter: IFilter) => void;
+    onRenderPill?: (text: string, handleClick: () => void) => void;
 }
+const DefaultPill: FilterCreationPillProps['onRenderPill'] = (text, handleClick) => <BasePillPlaceholder text={text} onClick={handleClick} />;
 const FilterCreationPill: React.FC<FilterCreationPillProps> = (props) => {
-    const { fields, onFilterSubmit } = props;
+    const { fields, onFilterSubmit, onRenderPill = DefaultPill } = props;
     const container = useRef<HTMLDivElement>(null);
     const [show, setShow] = useState(false);
     const [filter, setFilter] = useState<IFilter>({
@@ -92,7 +94,7 @@ const FilterCreationPill: React.FC<FilterCreationPillProps> = (props) => {
     };
     return (
         <div ref={container}>
-            <BasePillPlaceholder text={intl.get('common.addFilter')} onClick={toggleShow} />
+            {onRenderPill(intl.get('common.addFilter'), toggleShow)}
             {show && (
                 <Callout
                     target={container}

packages/rath-client/src/components/viewInfo/textInfo.tsx

@@ -19,16 +19,18 @@ const ViewInfo: React.FC<ViewInfoProps> = (props) => {
     return (
         <Cont>
             <div className="chart-desc">
-                {fields
-                    .filter((f) => f.analyticType === 'dimension')
-                    .map((f) => f.name || f.fid)
-                    .join(', ')}{' '}
-                <br />
-                {fields
-                    .filter((f) => f.analyticType === 'measure')
-                    .map((f) => f.name || f.fid)
-                    .join(', ')}{' '}
-                <br />
+                <div>
+                    {fields
+                        .filter((f) => f.analyticType === 'dimension')
+                        .map((f) => f.name || f.fid)
+                        .join(', ')}{' '}
+                </div>
+                <div>
+                    {fields
+                        .filter((f) => f.analyticType === 'measure')
+                        .map((f) => f.name || f.fid)
+                        .join(', ')}{' '}
+                </div>
                 {filters &&
                     filters.map((f) => {
                         const meta = metas.find((m) => m.fid === f.fid);

packages/rath-client/src/interfaces.ts

@@ -178,6 +178,7 @@ export interface IVegaChannel {
     type: ISemanticType;
     aggregate?: string;
     order?: any;
+    bin?: boolean;
     [key: string]: any;
 }
 
@@ -203,6 +204,8 @@ export interface IInsightVizView {
     fields: IFieldMeta[];
     filters: IFilter[];
     score?: number;
+    title?: string;
+    desc?: string;
 }
 
 export enum PAINTER_MODE {

packages/rath-client/src/lib/stat/sampling.ts

@@ -0,0 +1,61 @@
+import { BIN_SIZE, getFreqMap } from "@kanaries/loa";
+import { IFieldMeta, IRow } from "../../interfaces";
+
+function getValueTuple (row: IRow, fields: IFieldMeta[]) {
+    let tuple = '';
+    for (let field of fields) {
+        if (field.semanticType === 'quantitative') {
+            let idx = Math.floor((field.features.max - row[field.fid]) / ((field.features.max - field.features.min) / BIN_SIZE))
+            idx = Math.min(idx, BIN_SIZE);
+            tuple += idx
+        } else {
+            tuple += row[field.fid]
+        }
+        tuple += '_'
+    }
+    return tuple
+}
+
+export function estimateDistribution (data: IRow[], fields: IFieldMeta[]) {
+    const encodedData: string[] = [];
+    for (let i = 0; i < data.length; i++) {
+        let tuple = getValueTuple(data[i], fields)
+        encodedData.push(tuple)
+    }
+    const freqMap = getFreqMap(encodedData)
+    for (let t of freqMap.keys()) {
+        freqMap.set(t, freqMap.get(t)! / data.length)
+    }
+    return freqMap;
+}
+
+export function viewSampling (data: IRow[], fields: IFieldMeta[], sampleSize: number): IRow[] {
+    const distProbMap = estimateDistribution(data, fields);
+    const sizeMap: Map<string, number> = new Map();
+    const counterMap: Map<string, number> = new Map();
+    const sampleMap: Map<string, IRow[]> = new Map();
+    for (let t of distProbMap.keys()) {
+        sizeMap.set(t, Math.round(distProbMap.get(t)! * sampleSize))
+        counterMap.set(t, 0)
+        sampleMap.set(t, [])
+    }
+    let samples: IRow[] = [];
+    for (let i = 0; i < data.length; i++) {
+        let tuple = getValueTuple(data[i], fields);
+        counterMap.set(tuple, counterMap.get(tuple)! + 1)
+        if (sampleMap.get(tuple)!.length < sizeMap.get(tuple)!) {
+            sampleMap.get(tuple)!.push(data[i])
+        } else {
+            let idx = Math.floor(Math.random() * counterMap.get(tuple)!)
+            if (idx < sizeMap.get(tuple)!) {
+                sampleMap.get(tuple)![idx] = data[i]
+            }
+        }
+    }
+    for (let [, values] of sampleMap.entries()) {
+        for (let val of values) {
+            samples.push(val);
+        }
+    }
+    return samples
+}

packages/rath-client/src/pages/causal/hooks/dataViews.ts

@@ -3,7 +3,7 @@ import { applyFilters, IFilter } from '@kanaries/loa'
 import { IRow } from "../../../interfaces";
 import { focusedSample } from "../../../utils/sample";
 import { useGlobalStore } from "../../../store";
-import { baseDemoSample } from "../../painter/sample";
+import { baseDemoSample } from "../../../utils/view-sample";
 
 const VIZ_SUBSET_LIMIT = 2_000;
 const SAMPLE_UPDATE_DELAY = 500;

packages/rath-client/src/pages/collection/collectionView/cardView.tsx

@@ -20,16 +20,35 @@ const CollectContainer = styled.div`
         border-radius: 1em;
         padding: 1em;
         margin: 0.5em;
+        cursor: pointer;
+    }
+    .collect-title {
+        width: 100%;
+        font-size: 1.125rem;
+        display: flex;
+        justify-content: center;
+        font-weight: bold;
+        margin-bottom: 2px;
+    }
+    .c-desc {
+        > div:first-child {
+            /* w-full text-gray-700 text-sm */
+            width: 100%;
+            color: rgba(55, 65, 81);
+            font-size: 0.875rem;
+            line-height: 1.25rem;
+        }
     }
 `;
 
 interface CardViewProps {
     data: IRow[];
     metas: IFieldMeta[];
     views: IInsightVizView[];
+    onConfig: (data: IInsightVizView) => void;
 }
 const CardView: React.FC<CardViewProps> = (props) => {
-    const { data, views, metas } = props;
+    const { data, views, metas, onConfig } = props;
     const [pageIndex, setPageIndex] = useState<number>(0);
     return (
         <div>
@@ -46,7 +65,14 @@ const CardView: React.FC<CardViewProps> = (props) => {
             <Divider style={{ marginBottom: '1em', marginTop: '1em' }} />
             <CollectContainer>
                 {views.slice(pageIndex * VIEW_NUM_IN_PAGE, (pageIndex + 1) * VIEW_NUM_IN_PAGE).map((item, i) => (
-                    <div className="chart-container" key={item.viewId}>
+                    <div
+                        className="chart-container"
+                        key={item.viewId}
+                        onClick={() => {
+                            onConfig(item);
+                        }}
+                    >
+                        <div className="collent-title">{item.title}</div>
                         <div className="c-vis">
                             <VisErrorBoundary>
                                 <ReactVega
@@ -57,11 +83,8 @@ const CardView: React.FC<CardViewProps> = (props) => {
                             </VisErrorBoundary>
                         </div>
                         <div className="c-desc">
-                            <ViewInfo
-                                metas={metas}
-                                fields={item.fields}
-                                filters={item.filters}
-                            />
+                            <div>{item.desc}</div>
+                            <ViewInfo metas={metas} fields={item.fields} filters={item.filters} />
                         </div>
                     </div>
                 ))}

packages/rath-client/src/pages/collection/collectionView/listView.tsx

@@ -37,9 +37,10 @@ interface ListViewProps {
     data: IRow[];
     metas: IFieldMeta[];
     views: IInsightVizView[];
+    onConfig: (data: IInsightVizView) => void;
 }
 const ListView: React.FC<ListViewProps> = (props) => {
-    const { data, views, metas } = props;
+    const { data, views, metas, onConfig } = props;
     const [pageIndex, setPageIndex] = useState<number>(0);
     return (
         <div>
@@ -56,8 +57,15 @@ const ListView: React.FC<ListViewProps> = (props) => {
             <Divider style={{ marginBottom: '1em', marginTop: '1em' }} />
             <CollectContainer>
                 {views.slice(pageIndex * VIEW_NUM_IN_PAGE, (pageIndex + 1) * VIEW_NUM_IN_PAGE).map((item, i) => (
-                    <div className="chart-container" key={item.viewId}>
+                    <div
+                        className="chart-container cursor-pointer"
+                        key={item.viewId}
+                        onClick={() => {
+                            onConfig(item);
+                        }}
+                    >
                         <div className="c-vis">
+                            <div className="flex justify-center text-lg font-bold mb-2">{item.title}</div>
                             <VisErrorBoundary>
                                 <ReactVega
                                     dataSource={applyFilters(data, item.filters)}
@@ -67,11 +75,8 @@ const ListView: React.FC<ListViewProps> = (props) => {
                             </VisErrorBoundary>
                         </div>
                         <div className="c-desc">
-                            <ViewInfo
-                                metas={metas}
-                                fields={item.fields}
-                                filters={item.filters}
-                            />
+                            <div className="w-full text-gray-700 text-sm">{item.desc}</div>
+                            <ViewInfo metas={metas} fields={item.fields} filters={item.filters} />
                         </div>
                     </div>
                 ))}