fix: filter range update bug

packages/rath-client/package.json

@@ -45,7 +45,7 @@
     "vega": "^5.22.1",
     "vega-embed": "^6.21.0",
     "vega-lite": "^5.5.0",
-    "visual-insights": "0.11.2",
+    "visual-insights": "^0.12.1",
     "web-vitals": "^0.2.4",
     "worker-loader": "^3.0.7"
   },

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

@@ -221,7 +221,7 @@
         "filter": {
             "title": "Filter Config",
             "active": "Filter",
-            "enable": "Enabled",
+            "enabled": "Enabled",
             "disabled": "Disabled",
             "key": "Filter by",
             "range": "range",

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

@@ -221,7 +221,7 @@
         "filter": {
             "title": "筛选规则",
             "active": "启用筛选",
-            "enable": "开启",
+            "enabled": "开启",
             "disabled": "关闭",
             "key": "筛选方式",
             "range": "区间",

packages/rath-client/src/components/fieldFilter/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useId } from '@fluentui/react-hooks';
 import produce from 'immer';
 import { toJS } from 'mobx';
@@ -25,14 +25,6 @@ const FieldFilter: React.FC<FieldFilterProps> = props => {
 
     const { rawData } = dataSourceStore;
 
-    const fieldValues = useMemo(() => rawData.map(r => {
-        try {
-            return parseFloat(r[fid]);
-        } catch {
-            return NaN;
-        }
-    }), [rawData, fid]);
-
     const [filter, setFilter] = useState<IFilter>((meta && meta.semanticType === 'quantitative') ? {
         fid,
         type: 'range',
@@ -43,6 +35,21 @@ const FieldFilter: React.FC<FieldFilterProps> = props => {
         values: []
     })
 
+    const filterType = filter.type;
+
+    const fieldValues = useMemo<number[]>(() => {
+        if (filterType === 'range') {
+            return rawData.map(r => {
+                try {
+                    return parseFloat(r[fid]);
+                } catch {
+                    return NaN;
+                }
+            })
+        }
+        return []
+    }, [rawData, fid, filterType]);
+
     const selection = useMemo(() => {
         return new Selection({
             selectionMode: SelectionMode.multiple,
@@ -82,6 +89,24 @@ const FieldFilter: React.FC<FieldFilterProps> = props => {
         })
     }, [])
 
+    const fieldRange = useMemo<[number, number]>(() => {
+        if (fieldValues.length === 0) return [0, 0]
+        let _min = Infinity;
+        let _max = -Infinity;
+        for (const v of fieldValues) {
+            if (Number.isNaN(v)) continue;
+            if (v > _max) _max = v;
+            if (v < _min) _min = v;
+        }
+        return [_min, _max].every(Number.isFinite) ? [_min, _max] : [0, 0];
+    }, [fieldValues])
+
+    useEffect(() => {
+        if (filterType === 'range') {
+            onRangeValueChange(fieldRange);
+        }
+    }, [fieldRange, onRangeValueChange, filterType])
+
     return <div>
         <ActionButton
             text={intl.get('common.filter')}
@@ -141,7 +166,7 @@ const FieldFilter: React.FC<FieldFilterProps> = props => {
                 }
                 {
                     filter.type === 'range' && meta && <RangeSelection
-                        values={fieldValues}
+                        range={fieldRange}
                         left={filter.range[0]}
                         right={filter.range[1]}
                         onValueChange={onRangeValueChange}

packages/rath-client/src/components/fieldFilter/rangeSelection.tsx

@@ -1,37 +1,21 @@
 import { Slider } from '@fluentui/react';
-import React, { useEffect, useMemo } from 'react';
+import React from 'react';
 
 
 interface RangeSelectionProps {
-    values: number[];
+    range: [number, number];
     left: number;
     right: number;
     onValueChange: (range: [number, number]) => void;
 }
 const RangeSelection: React.FC<RangeSelectionProps> = props => {
-    const { values, left, right, onValueChange } = props;
-
-    const fieldRange = useMemo<[number, number]>(() => {
-        if (values.length === 0) return [0, 0]
-        let _min = Infinity;
-        let _max = -Infinity;
-        for (const v of values) {
-            if (Number.isNaN(v)) continue;
-            if (v > _max) _max = v;
-            if (v < _min) _min = v;
-        }
-        return [_min, _max].every(Number.isFinite) ? [_min, _max] : [0, 0];
-    }, [values])
-
-    useEffect(() => {
-        onValueChange(fieldRange);
-    }, [fieldRange, onValueChange])
+    const { range, left, right, onValueChange } = props;
 
     return <div className="flex overflow-hidden items-center">
         <Slider
             label='range'
-            min={fieldRange[0]}
-            max={fieldRange[1]}
+            min={range[0]}
+            max={range[1]}
             value={right}
             lowerValue={left}
             ranged

packages/rath-client/src/queries/baseVis.ts

@@ -1,6 +1,6 @@
 import { ISemanticType } from "visual-insights";
-import { Specification } from "visual-insights";
-import { groupBy } from "visual-insights/build/esm/statistics";
+import { Specification, Statistics } from "visual-insights";
+
 import { IFieldMeta, IResizeMode, IRow } from "../interfaces";
 import { applySizeConfig } from "./base/utils";
 export const geomTypeMap: { [key: string]: any } = {
@@ -14,6 +14,8 @@ export const geomTypeMap: { [key: string]: any } = {
   // density: 'rect'
   density: "point"
 };
+
+const { groupBy } = Statistics;
 interface BaseVisProps {
   query: Specification;
   dataSource: IRow[];

packages/rath-client/src/queries/distribution/bot.ts

@@ -1,6 +1,8 @@
 import { IRow, ISemanticType } from "@kanaries/loa";
-import { groupBy } from "visual-insights/build/esm/statistics";
+import { Statistics } from "visual-insights";
 import { IFieldMeta, IVegaSubset } from "../../interfaces";
+
+const { groupBy } = Statistics;
 interface IFieldEncode {
     field?: string;
     title?: string;

packages/rath-client/src/service.ts

@@ -130,7 +130,9 @@ export interface FieldSummary {
   entropy: number;
   maxEntropy: number;
   distribution: Array<{ memberName: string; count: number }>
-  type: ISemanticType
+  type: ISemanticType;
+  max: number;
+  min: number;
 }
 export async function getFieldsSummaryService (dataSource: IRow[], fields: string[] | Field[], useServer?: boolean): Promise<FieldSummary[]> {
   let fieldSummaryList: FieldSummary[] = [];

packages/rath-client/src/utils/transform.ts

@@ -21,7 +21,9 @@ export function fieldMeta2fieldSummary(metas: IFieldMeta[]): FieldSummary[] {
         entropy: f.features.entropy,
         maxEntropy: f.features.maxEntropy,
         type: f.semanticType,
-        distribution: f.distribution
+        distribution: f.distribution,
+        max: typeof f.features.max === 'number' ? f.features.max : 0,
+        min: typeof f.features.min === 'number' ? f.features.min : 0,
     }))
 }
 
@@ -50,7 +52,9 @@ export function fieldSummary2fieldMeta(props: {
             features: {
                 maxEntropy: s.maxEntropy,
                 entropy: s.entropy,
-                unique: s.distribution.length
+                unique: s.distribution.length,
+                max: s.max,
+                min: s.min
             },
             semanticType: sType,
             analyticType: analyticTypes ? analyticTypes[i] : inferAnalyticTypeFromSemanticType(sType),

packages/rath-client/src/workers/fieldsSummary.worker.js

@@ -2,6 +2,7 @@
 import { UnivariateSummary } from 'visual-insights';
 import { Statistics } from 'visual-insights';
 import { bin, rangeNormilize } from '@kanaries/loa';
+import { getRange } from '../utils';
 import { timer } from './timer';
 
 const { getAllFieldsDistribution, getAllFieldTypes, getAllFieldsEntropy } = UnivariateSummary;
@@ -30,9 +31,13 @@ const fieldSummary = (e) => {
     const fieldEntropyList = getAllFieldsEntropy(dataSource, fieldNames);
     for (let i = 0; i < fieldEntropyList.length; i++) {
       if (fieldTypeList[i].type === 'quantitative') {
-        const bins = bin(dataSource.map(r => r[fieldEntropyList[i].fieldName]));
+        const values = dataSource.map(r => Number(r[fieldEntropyList[i].fieldName]))
+        const bins = bin(values);
         fieldEntropyList[i].entropy = Statistics.entropy(rangeNormilize(bins.filter(b => b > 0)));
         fieldEntropyList[i].maxEntropy = Math.log2(16)
+        const range = getRange(values)
+        fieldEntropyList[i].max = range[1];
+        fieldEntropyList[i].min = range[0];
       }
     }
     self.postMessage({

yarn.lock

@@ -1987,10 +1987,10 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
-"@kanaries/[email protected].3":
-  version "1.0.3"
-  resolved "https://registry.npmmirror.com/@kanaries/adapters/-/adapters-1.0.3.tgz#67704fd94eca59d05edea5f098c8cb867b026dc5"
-  integrity sha512-OlrMGI/w6U5TE9hBH0hH0/fqG/OS0y0OyE1Nvq/vqZXskfLyxmxrRQsSnUvhOe2JgsGi/EtSB4iSh7+rZaF0TA==
+"@kanaries/adapters@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.npmmirror.com/@kanaries/adapters/-/adapters-1.0.5.tgz#bbc4844a772c507f901dd956633e98f14c231049"
+  integrity sha512-wRBlApLlIZ//dHscr+hHUi24QQSyPN/CPCuc364Q97ZjSTY5VWcQBeJ43SEEepZea4Ypy9gXTjnfVkbFEswU1g==
   dependencies:
     localforage "^1.10.0"
 
@@ -3685,6 +3685,14 @@ axios@^0.22.0:
   dependencies:
     follow-redirects "^1.14.4"
 
+axios@^0.27.2:
+  version "0.27.2"
+  resolved "https://registry.npmmirror.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972"
+  integrity sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==
+  dependencies:
+    follow-redirects "^1.14.9"
+    form-data "^4.0.0"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.npm.taobao.org/axobject-query/download/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -7020,6 +7028,11 @@ follow-redirects@^1.0.0, follow-redirects@^1.14.0, follow-redirects@^1.14.4:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.8.tgz#016996fb9a11a100566398b1c6839337d7bfa8fc"
   integrity sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==
 
+follow-redirects@^1.14.9:
+  version "1.15.2"
+  resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
+  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.nlark.com/for-in/download/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -7052,6 +7065,15 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 formidable@^1.1.1:
   version "1.2.2"
   resolved "https://registry.npm.taobao.org/formidable/download/formidable-1.2.2.tgz#bf69aea2972982675f00865342b982986f6b8dd9"
@@ -14724,17 +14746,6 @@ vfile@^4.0.0:
     unist-util-stringify-position "^2.0.0"
     vfile-message "^2.0.0"
 
-[email protected]:
-  version "0.11.2"
-  resolved "https://registry.npmmirror.com/visual-insights/-/visual-insights-0.11.2.tgz#c10f29aeeeca3e35c116b8af2c3ae8e4e4531088"
-  integrity sha512-MFQfIPLDVvCTQ+Mw7aUw5ZOl8sRe5kK4yPsGDH3bsVFwG4KIwYXpTu0tNehwkZC5JG27wAQ7yXM2nBT6HbjzIA==
-  dependencies:
-    "@kanaries/adapters" "1.0.3"
-    axios "^0.22.0"
-    detect-browser "^5.3.0"
-    localforage "^1.10.0"
-    tslib "^2.4.0"
-
 [email protected]:
   version "0.7.15"
   resolved "https://registry.npmmirror.com/visual-insights/-/visual-insights-0.7.15.tgz#04806c8c78739f7bb8a7ee60bb56ee8ddc7668a7"
@@ -14745,6 +14756,17 @@ [email protected]:
     cube-core "^2.13.0"
     simple-statistics "^7.1.0"
 
+visual-insights@^0.12.1:
+  version "0.12.1"
+  resolved "https://registry.npmmirror.com/visual-insights/-/visual-insights-0.12.1.tgz#4c4bcdaf8c5e2d1cfd2845f62746a3ca5453cfb9"
+  integrity sha512-ysKsGKz0WHIB1LzX5VyirNFbyZhY6DGGyjQ4MJntd7GA6uwAZ1Cli6A8dSf73AMDLJiYTRHY1DxIVOCPncLwsQ==
+  dependencies:
+    "@kanaries/adapters" "^1.0.5"
+    axios "^0.27.2"
+    detect-browser "^5.3.0"
+    localforage "^1.10.0"
+    tslib "^2.4.0"
+
 vite@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmmirror.com/vite/-/vite-3.1.0.tgz#3138b279072941d57e76bcf7f66f272fc6a17fe2"