feat: add sort & filter for table

Kanaries · Nov 1, 2023 · d19c109 · d19c109
1 parent bdc6ff9
commit d19c109
Show file tree

Hide file tree

Showing 8 changed files with 227 additions and 96 deletions.
diff --git a/packages/graphic-walker/src/components/dataTable/index.tsx b/packages/graphic-walker/src/components/dataTable/index.tsx
diff --git a/packages/graphic-walker/src/components/modal.tsx b/packages/graphic-walker/src/components/modal.tsx
@@ -9,8 +9,8 @@ const Background = styled.div`
     position: fixed;
     left: 0;
     top: 0;
-    width: 100vw;
-    height: 100vh;
+    right: 0;
+    bottom: 0;
     backdrop-filter: blur(1px);
     z-index: 25535;
 `;

diff --git a/packages/graphic-walker/src/components/smallModal.tsx b/packages/graphic-walker/src/components/smallModal.tsx
@@ -9,8 +9,8 @@ const Background = styled.div`
     position: fixed;
     left: 0;
     top: 0;
-    width: 100vw;
-    height: 100vh;
+    right: 0;
+    bottom: 0;
     backdrop-filter: blur(1px);
     z-index: 25535;
 `;

diff --git a/packages/graphic-walker/src/computation/clientComputation.ts b/packages/graphic-walker/src/computation/clientComputation.ts
@@ -8,7 +8,7 @@ export const dataQueryClient = async (
     limit?: number,
 ): Promise<IRow[]> => {
     if (process.env.NODE_ENV !== "production") {
-        console.log('local query triggered');
+        console.log('local query triggered', workflow);
     }
     let res = rawData;
     for await (const step of workflow) {

diff --git a/packages/graphic-walker/src/dataSource/datasetConfig/index.tsx b/packages/graphic-walker/src/dataSource/datasetConfig/index.tsx
@@ -1,47 +1,17 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 import DatasetTable from '../../components/dataTable';
 import { observer } from 'mobx-react-lite';
 import { useCompututaion, useVizStore } from '../../store';
-import { datasetStats } from '../../computation';
 
 const DatasetConfig: React.FC = () => {
     const vizStore = useVizStore();
     const computation = useCompututaion();
 
-    const [count, setCount] = useState(0);
-    const taskIdRef = useRef(0);
-    const [loading, setLoading] = useState(false);
-
-    useEffect(() => {
-        const taskId = ++taskIdRef.current;
-        setLoading(true);
-        datasetStats(computation)
-            .then((res) => {
-                if (taskId !== taskIdRef.current) {
-                    return;
-                }
-                setCount(res.rowCount);
-                setLoading(false);
-            })
-            .catch((err) => {
-                if (taskId !== taskIdRef.current) {
-                    return;
-                }
-                console.error(err);
-                setLoading(false);
-            });
-        return () => {
-            taskIdRef.current++;
-        };
-    }, [computation]);
-
     return (
         <div className="relative">
             <DatasetTable
                 size={100}
-                total={count}
                 metas={vizStore.meta}
-                loading={loading}
                 computation={computation}
                 onMetaChange={(fid, fIndex, diffMeta) => {
                     vizStore.updateCurrentDatasetMetas(fid, diffMeta);

diff --git a/packages/graphic-walker/src/dataSource/table.tsx b/packages/graphic-walker/src/dataSource/table.tsx
@@ -24,7 +24,6 @@ const Table: React.FC<TableProps> = (props) => {
                 size={size}
                 metas={metas}
                 computation={computation}
-                total={tmpDataSource.length}
                 onMetaChange={(fid, fIndex, diffMeta) => {
                     commonStore.updateTempDatasetMetas(fid, diffMeta);
                 }}

diff --git a/packages/graphic-walker/src/fields/filterField/filterEditDialog.tsx b/packages/graphic-walker/src/fields/filterField/filterEditDialog.tsx
@@ -31,16 +31,14 @@ const EmptyForm: React.FC<RuleFormProps> = () => <React.Fragment />;
 
 export const PureFilterEditDialog = (props: {
     viewFilters: IFilterField[];
-    dimensions: IViewField[];
-    measures: IViewField[];
-    allFields: IViewField[];
+    options: { label: string; value: string }[];
     meta: IMutField[];
     editingFilterIdx: number | null;
     onSelectFilter: (field: string) => void;
     onWriteFilter: (index: number, rule: IFilterRule | null) => void;
     onClose: () => void;
 }) => {
-    const { editingFilterIdx, viewFilters, meta, allFields, onSelectFilter, onWriteFilter, onClose } = props;
+    const { editingFilterIdx, viewFilters, meta, options, onSelectFilter, onWriteFilter, onClose } = props;
     const { t } = useTranslation('translation', { keyPrefix: 'filters' });
     const field = React.useMemo(() => {
         return editingFilterIdx !== null ? viewFilters[editingFilterIdx] : null;
@@ -79,15 +77,6 @@ export const PureFilterEditDialog = (props: {
         onClose();
     }, [editingFilterIdx, uncontrolledField?.rule, onWriteFilter]);
 
-    const allFieldOptions = React.useMemo(() => {
-        return allFields
-            .filter((x) => ![COUNT_FIELD_ID, MEA_KEY_ID, MEA_VAL_ID].includes(x.fid))
-            .map((d) => ({
-                label: d.name,
-                value: d.fid,
-            }));
-    }, [allFields]);
-
     const Form = field
         ? ({
               quantitative: QuantitativeRuleForm,
@@ -101,13 +90,7 @@ export const PureFilterEditDialog = (props: {
         <Modal show={Boolean(uncontrolledField)} title={t('editing')} onClose={onClose}>
             <div className="px-4 py-1">
                 <div className="py-1">{t('form.name')}</div>
-                <DropdownSelect
-                    buttonClassName="w-96"
-                    className="mb-2"
-                    options={allFieldOptions}
-                    selectedKey={uncontrolledField.fid}
-                    onSelect={onSelectFilter}
-                />
+                <DropdownSelect buttonClassName="w-96" className="mb-2" options={options} selectedKey={uncontrolledField.fid} onSelect={onSelectFilter} />
                 <Form rawFields={meta} key={uncontrolledField.fid} field={uncontrolledField} onChange={handleChange} />
                 <div className="mt-4">
                     <PrimaryButton onClick={handleSubmit} text={t('btn.confirm')} />
@@ -147,12 +130,19 @@ const FilterEditDialog: React.FC = observer(() => {
         }
     };
 
+    const allFieldOptions = React.useMemo(() => {
+        return allFields
+            .filter((x) => ![COUNT_FIELD_ID, MEA_KEY_ID, MEA_VAL_ID].includes(x.fid))
+            .map((d) => ({
+                label: d.name,
+                value: d.fid,
+            }));
+    }, [allFields]);
+
     return (
         <PureFilterEditDialog
-            allFields={allFields}
-            dimensions={dimensions}
+            options={allFieldOptions}
             editingFilterIdx={editingFilterIdx}
-            measures={measures}
             meta={meta}
             onClose={handelClose}
             onSelectFilter={handleSelectFilterField}

diff --git a/packages/graphic-walker/src/lib/sort.ts b/packages/graphic-walker/src/lib/sort.ts
@@ -1,10 +1,13 @@
 import { IRow } from '../interfaces';
+import { parseCmpFunction } from '../utils';
 
-function compareMulti(a: number[], b: number[]): number {
+const cmp = parseCmpFunction('');
+
+function compareMulti(a: (number | string)[], b: (number | string)[]): number {
     if (a.length < b.length) return -compareMulti(b, a);
     for (let i = 0; i < a.length; i++) {
         if (!b[i]) return 1;
-        const c = a[i] - b[i];
+        const c = cmp(a[i], b[i]);
         if (c !== 0) return c;
     }
     return 0;
@@ -19,4 +22,4 @@ export function sortBy(data: IRow[], viewMeasures: string[], sort: 'ascending' |
         }))
         .sort((a, b) => sortM * compareMulti(a.value, b.value))
         .map((x) => x.data);
-}
+}