@kanaries/graphic-walker 0.3.11 → 0.3.13

package/src/fields/filterField/tabs.tsx

@@ -1,107 +1,127 @@
 import { observer } from 'mobx-react-lite';
-import React from 'react';
+import React, { useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 import type { IFilterField, IFilterRule } from '../../interfaces';
 import { useGlobalStore } from '../../store';
-import PureTabs from '../../components/tabs/defaultTab';
 import Slider from './slider';
 
-
 export type RuleFormProps = {
     field: IFilterField;
     onChange: (rule: IFilterRule) => void;
 };
 
-const Container = styled.div({
-    marginBlock: '1em',
-    marginInline: '2em',
+const Container = styled.div`
+    margin-block: 1em;
 
-    '> .btn-grp': {
-        display: 'flex',
-        flexDirection: 'row',
-        marginBlock: '0.4em 0.6em',
+    > .btn-grp {
+        display: flex;
+        flex-direction: row;
+        margin-block: 1em;
 
-        '> *': {
-            marginInlineStart: '0.6em',
+        > * {
+            margin-inline-start: 0.6em;
 
-            '&:first-child': {
-                marginInlineStart: 0,
+            &:first-child: {
+                margin-inline-start: 0;
             },
         },
     },
-});
-
-export const Button = styled.button({
-    '&:hover': {
-        backgroundColor: 'rgba(243, 244, 246, 0.5)',
-    },
-    color: 'rgb(55, 65, 81)',
-    boxShadow: '1px 1px 2px #0002, inset 2px 2px 4px #0001',
-    paddingBlock: '0.2em',
-    paddingInline: '0.5em',
-    userSelect: 'none',
-    cursor: 'pointer',
-});
-
-const Table = styled.div({
-    display: 'grid',
-    gridTemplateColumns: '4em auto max-content',
-    maxHeight: '30vh',
-    overflowY: 'scroll',
-    '& > *': {
-        marginBlock: '2px',
-        paddingInline: '4px',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        userSelect: 'none',
-    },
-    '& > input, & > *[for]': {
-        cursor: 'pointer',
-    },
-});
-
-const TabsContainer = styled.div({
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'stretch',
-    justifyContent: 'stretch',
-});
+`;
+
+export const Button = styled.button`
+    :hover: {
+        background-color: rgba(243, 244, 246, 0.5);
+    };
+    color: rgb(55, 65, 81);
+    border: 1px solid rgb(226 232 240);
+    border-radius: 0.5em;
+    padding-block: 0.4em;
+    padding-inline: 1em;
+    user-select: none;
+    font-weight: bold;
+    cursor: pointer;
+`;
+
+const Table = styled.div`
+    display: grid;
+    grid-template-columns: 4em auto max-content;
+    max-height: 30vh;
+    overflow-y: scroll;
+    
+    & > * {
+        padding-block: 0.6em;
+        padding-inline: 0.2em;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        user-select: none;
+        border-bottom: 0.8px solid rgb(226 232 240);
+    }
+
+    & > input,
+    & > *[for] {
+        cursor: pointer;
+    }
+`;
+
+const TabsContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: stretch;
+`;
+
+const CalendarInputContainer = styled.div`
+    display: flex;
+    padding-block: 1em;
+    width: 100%;
+
+    > .calendar-input {
+        width: 100%;
+    }
+
+    > .calendar-input:first-child {
+        margin-right: 0.5em;
+    }
+
+    > .calendar-input:last-child {
+        margin-left: 0.5em;
+    }
+`;
+
+const TabPanel = styled.div``;
+
+const TabItem = styled.div``;
+
+const StatusCheckbox: React.FC<{currentNum: number; totalNum: number; onChange: () => void}> = props => {
+    const { currentNum, totalNum, onChange } = props;
+    const checkboxRef = useRef(null);
 
-const TabList = styled.div({
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'stretch',
-    justifyContent: 'flex-start',
-    overflow: 'hidden',
-});
-
-const TabHeader = styled.label({
-    outline: 'none',
-    userSelect: 'none',
-    paddingBlock: '0.4em',
-    paddingInline: '1em 2em',
-    borderWidth: '1px',
-    borderRadius: '4px 4px 0 0',
-    position: 'relative',
-
-    '&[aria-selected]': {
-        borderBottomColor: '#0000',
-        zIndex: 15,
-    },
-    '&[aria-selected=false]': {
-        backgroundColor: '#f8f8f8',
-        borderBottomColor: '#e2e2e2',
-        cursor: 'pointer',
-        zIndex: 14,
-    },
-});
-
-const TabPanel = styled.div({});
+    React.useEffect(() => {
+        if (!checkboxRef.current) return;
+        const checkboxRefDOM = (checkboxRef.current as HTMLInputElement)
+        if (currentNum === totalNum) {
+            checkboxRefDOM.checked = true;
+            checkboxRefDOM.indeterminate = false;
+        } else if (currentNum < totalNum && currentNum > 0) {
+            checkboxRefDOM.indeterminate = true;
+        } else if (currentNum === 0) {
+            checkboxRefDOM.checked = false;
+            checkboxRefDOM.indeterminate = false;
+        }
+    }, [currentNum, totalNum])
 
-const TabItem = styled.div({});
+    return (
+        <input
+            type="checkbox"
+            className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
+            ref={checkboxRef}
+            onChange={() => onChange()}
+        />
+    )
+}
 
 export const FilterOneOfRule: React.FC<RuleFormProps & { active: boolean }> = observer(({
     active,
@@ -121,7 +141,7 @@ export const FilterOneOfRule: React.FC<RuleFormProps & { active: boolean }> = ob
         }, new Map<string | number, number>());
     }, [dataSource, field]);
 
-    const { t } = useTranslation('translation', { keyPrefix: 'filters' });
+    const { t } = useTranslation('translation');
 
     React.useEffect(() => {
         if (active && field.rule?.type !== 'one of') {
@@ -132,19 +152,86 @@ export const FilterOneOfRule: React.FC<RuleFormProps & { active: boolean }> = ob
         }
     }, [active, onChange, field, count]);
 
+    const handleToggleFullOrEmptySet = () => {
+        if (!field.rule || field.rule.type !== 'one of') return;
+        const curSet = field.rule.value;
+        onChange({
+            type: 'one of',
+            value: new Set<number | string>(
+                curSet.size === count.size
+                    ? []
+                    : count.keys()
+            ),
+        });
+    }
+    const handleToggleReverseSet = () => {
+        if (!field.rule || field.rule.type !== 'one of') return;
+        const curSet = field.rule.value;
+        onChange({
+            type: 'one of',
+            value: new Set<number | string>(
+                [...count.keys()].filter(key => !curSet.has(key))
+            ),
+        });    
+    }
+    const handleSelectValue = (value, checked) => {
+        if (!field.rule || field.rule?.type !== 'one of') return;
+        const rule: IFilterRule = {
+            type: 'one of',
+            value: new Set(field.rule.value)
+        };
+        if (checked) {
+            rule.value.add(value);
+        } else {
+            rule.value.delete(value);
+        }
+        onChange(rule);
+    }
+    
+    const selectedValueSum = useMemo(() => {
+        if (!field.rule) return 0;
+        return [...field.rule.value].reduce<number>((sum, key) => {
+            const s = dataSource.filter(which => which[field.fid] === key).length;
+            return sum + s;
+        }, 0)
+    }, [field.rule?.value])
+
     return field.rule?.type === 'one of' ? (
         <Container>
-            <Table>
-                <label className="header">
-                    {t('header.visibility')}
-                </label>
-                <label className="header">
-                    {t('header.value')}
+            <div>{t('constant.filter_type.one_of')}</div>
+            <div className="text-gray-500">{t('constant.filter_type.one_of_desc')}</div>
+            <div className="btn-grp">
+                <Button
+                    onClick={() => handleToggleFullOrEmptySet()}
+                >
+                    {
+                        field.rule.value.size === count.size
+                            ? t('filters.btn.unselect_all')
+                            : t('filters.btn.select_all')
+                    }
+                </Button>
+                <Button
+                    onClick={() => handleToggleReverseSet()}
+                >
+                    {t('filters.btn.reverse')}
+                </Button>
+            </div>
+            <Table className="bg-slate-50">
+                <div className="flex justify-center items-center">
+                    <StatusCheckbox
+                        currentNum={field.rule.value.size}
+                        totalNum={count.size}
+                        onChange={handleToggleFullOrEmptySet}
+                    />
+                </div>
+                <label className="header text-gray-500">
+                    {t('filters.header.value')}
                 </label>
-                <label className="header">
-                    {t('header.count')}
+                <label className="header text-gray-500">
+                    {t('filters.header.count')}
                 </label>
             </Table>
+            {/* <hr /> */}
             <Table>
                 {
                     [...count.entries()].map(([value, count], idx) => {
@@ -152,31 +239,17 @@ export const FilterOneOfRule: React.FC<RuleFormProps & { active: boolean }> = ob
 
                         return (
                             <React.Fragment key={idx}>
-                                <input
-                                    type="checkbox"
-                                    checked={field.rule?.type === 'one of' && field.rule.value.has(value)}
-                                    id={id}
-                                    aria-describedby={`${id}_label`}
-                                    title={String(value)}
-                                    onChange={({ target: { checked } }) => {
-                                        if (field.rule?.type !== 'one of') {
-                                            return;
-                                        }
-                                        
-                                        const rule: IFilterRule = {
-                                            type: 'one of',
-                                            value: new Set(field.rule.value)
-                                        };
-
-                                        if (checked) {
-                                            rule.value.add(value);
-                                        } else {
-                                            rule.value.delete(value);
-                                        }
-
-                                        onChange(rule);
-                                    }}
-                                />
+                                <div className="flex justify-center items-center">
+                                    <input
+                                        type="checkbox"
+                                        className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                                        checked={field.rule?.type === 'one of' && field.rule.value.has(value)}
+                                        id={id}
+                                        aria-describedby={`${id}_label`}
+                                        title={String(value)}
+                                        onChange={({ target: { checked } }) => handleSelectValue(value, checked)}
+                                    />
+                                </div>
                                 <label
                                     id={`${id}_label`}
                                     htmlFor={id}
@@ -197,60 +270,45 @@ export const FilterOneOfRule: React.FC<RuleFormProps & { active: boolean }> = ob
             <Table className="text-gray-600">
                 <label></label>
                 <label>
-                    {t('selected_keys', { count: field.rule.value.size })}
+                    {t('filters.selected_keys', { count: field.rule.value.size })}
                 </label>
                 <label>
-                    {[...field.rule.value].reduce<number>((sum, key) => {
-                        const s = dataSource.filter(which => which[field.fid] === key).length;
-
-                        return sum + s;
-                    }, 0)}
+                    {selectedValueSum}
                 </label>
             </Table>
-            <div className="btn-grp">
-                <Button
-                    onClick={() => {
-                        if (field.rule?.type === 'one of') {
-                            const curSet = field.rule.value;
-
-                            onChange({
-                                type: 'one of',
-                                value: new Set<number | string>(
-                                    curSet.size === count.size
-                                        ? []
-                                        : count.keys()
-                                ),
-                            });
-                        }
-                    }}
-                >
-                    {
-                        field.rule.value.size === count.size
-                            ? t('btn.unselect_all')
-                            : t('btn.select_all')
-                    }
-                </Button>
-                <Button
-                    onClick={() => {
-                        if (field.rule?.type === 'one of') {
-                            const curSet = field.rule.value;
-
-                            onChange({
-                                type: 'one of',
-                                value: new Set<number | string>(
-                                    [...count.keys()].filter(key => !curSet.has(key))
-                                ),
-                            });
-                        }
-                    }}
-                >
-                    {t('btn.reverse')}
-                </Button>
-            </div>
         </Container>
     ) : null;
 });
 
+interface CalendarInputProps {
+    min: number;
+    max: number;
+    value: number;
+    onChange: (value: number) => void;
+}
+
+const CalendarInput: React.FC<CalendarInputProps> = props => {
+    const { min, max, value, onChange } = props;
+    const dateStringFormatter = (timestamp: number) => {
+        return new Date(timestamp).toISOString().slice(0, 19);
+    }
+    const handleSubmitDate = (value) => {
+        if (new Date(value).getTime() <= max && new Date(value).getTime() >= min) {
+            onChange(new Date(value).getTime())
+        }
+    }
+    return (
+        <input
+            className="block w-full rounded-md border-0 py-1 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+            type="datetime-local" 
+            min={dateStringFormatter(min)}
+            max={dateStringFormatter(max)}
+            defaultValue={dateStringFormatter(value)}
+            onChange={(e) => handleSubmitDate(e.target.value)}
+        />
+    )
+}
+
 export const FilterTemporalRangeRule: React.FC<RuleFormProps & { active: boolean }> = observer(({
     active,
     field,
@@ -259,6 +317,8 @@ export const FilterTemporalRangeRule: React.FC<RuleFormProps & { active: boolean
     const { commonStore } = useGlobalStore();
     const { currentDataset: { dataSource } } = commonStore;
 
+    const { t } = useTranslation('translation');
+
     const sorted = React.useMemo(() => {
         return dataSource.reduce<number[]>((list, d) => {
             try {
@@ -293,14 +353,29 @@ export const FilterTemporalRangeRule: React.FC<RuleFormProps & { active: boolean
     }, []);
 
     return field.rule?.type === 'temporal range' ? (
-        <Container>
-            <Slider
-                min={min}
-                max={max}
-                value={field.rule.value}
-                onChange={handleChange}
-                isDateTime
-            />
+        <Container className="overflow-visible">
+            <div>{t('constant.filter_type.temporal_range')}</div>
+            <div className="text-gray-500">{t('constant.filter_type.temporal_range_desc')}</div>
+            <CalendarInputContainer>
+                <div className="calendar-input">
+                    <div className="my-1">{t('filters.range.start_value')}</div>
+                    <CalendarInput
+                        min={min}
+                        max={field.rule.value[1]}
+                        value={field.rule.value[0]}
+                        onChange={(value) => handleChange([value, field.rule?.value[1]])}
+                    />
+                </div>
+                <div className="calendar-input">
+                    <div className="my-1">{t('filters.range.end_value')}</div>
+                    <CalendarInput
+                        min={field.rule.value[0]}
+                        max={max}
+                        value={field.rule.value[1]}
+                        onChange={(value) => handleChange([field.rule?.value[0], value])}
+                    />
+                </div>
+            </CalendarInputContainer>
         </Container>
     ) : null;
 });
@@ -313,6 +388,8 @@ export const FilterRangeRule: React.FC<RuleFormProps & { active: boolean }> = ob
     const { commonStore } = useGlobalStore();
     const { currentDataset: { dataSource } } = commonStore;
 
+    const { t } = useTranslation('translation', { keyPrefix: 'constant.filter_type' });
+
     const sorted = React.useMemo(() => {
         return dataSource.map(d => d[field.fid]).sort((a, b) => a - b);
     }, [dataSource, field]);
@@ -339,6 +416,8 @@ export const FilterRangeRule: React.FC<RuleFormProps & { active: boolean }> = ob
 
     return field.rule?.type === 'range' ? (
         <Container>
+            <div>{t('range')}</div>
+            <div className="text-gray-500">{t('range_desc')}</div>
             <Slider
                 min={min}
                 max={max}
@@ -355,6 +434,21 @@ const filterTabs: Record<IFilterRule['type'], React.FC<RuleFormProps & { active:
     'temporal range': FilterTemporalRangeRule,
 };
 
+const tabOptionDict = {
+    "one of": {
+        key: "one_of",
+        descKey: "one_of_desc"
+    },
+    "range": {
+        key: "range",
+        descKey: "range_desc"
+    },
+    "temporal range": {
+        key: "temporal_range",
+        descKey: "temporal_range_desc"
+    }
+};
+
 export interface TabsProps extends RuleFormProps {
     tabs: IFilterRule['type'][];
 }
@@ -366,19 +460,42 @@ const Tabs: React.FC<TabsProps> = observer(({ field, onChange, tabs }) => {
     const { t } = useTranslation('translation', { keyPrefix: 'constant.filter_type' });
 
     const [which, setWhich] = React.useState(field.rule?.type ?? tabs[0]!);
-
+    React.useEffect(() => {
+        if (!tabs.includes(which)) setWhich(tabs[0]);
+    }, [tabs])
+    
     return (
         <TabsContainer>
-            <PureTabs
-                selectedKey={which}
-                tabs={tabs.map(tab => ({
-                    key: tab,
-                    label: t(tab.replaceAll(/ /g, '_')),
-                }))}
-                onSelected={sk => {
-                    setWhich(sk as typeof which);
-                }}
-            />
+            <div>
+                {
+                    tabs.map((option) => {
+                        return (
+                            <div className="flex my-2" key={option}>
+                                <div className="align-top">
+                                    <input 
+                                        type="radio"
+                                        className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                                        id={option}
+                                        checked={option === which}
+                                        onChange={e => setWhich((e.target as HTMLInputElement).value as typeof which)}
+                                        name="filter_type" 
+                                        value={option}
+                                    />
+                                </div>
+                                <div className="ml-3">
+                                    <label htmlFor={option}>
+                                        {t(tabOptionDict[option].key)}
+                                    </label>
+                                    <div className="text-gray-500">
+                                        {t(tabOptionDict[option].descKey)}
+                                    </div>
+                                </div>
+                            </div>
+                        )
+                    })
+                }
+            </div>
+            <hr className="my-0.5"/>
             <TabPanel>
                 {
                     tabs.map((tab, i) => {
@@ -387,8 +504,8 @@ const Tabs: React.FC<TabsProps> = observer(({ field, onChange, tabs }) => {
                         return draggableFieldState === null ? null : (
                             <TabItem
                                 key={i}
-                                id={`filter-panel-${tab.replaceAll(/ /g, '_')}`}
-                                aria-labelledby={`filter-tab-${tab.replaceAll(/ /g, '_')}`}
+                                id={`filter-panel-${tabOptionDict[tab]}`}
+                                aria-labelledby={`filter-tab-${tabOptionDict[tab]}`}
                                 role="tabpanel"
                                 hidden={which !== tab}
                                 tabIndex={0}

package/src/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import React, { type ForwardedRef, forwardRef } from "react";
 import { DOM } from "@kanaries/react-beautiful-dnd";
 import { observer } from "mobx-react-lite";
 import App, { IGWProps } from "./App";
@@ -6,7 +6,7 @@ import { StoreWrapper } from "./store/index";
 import { FieldsContextWrapper } from "./fields/fieldsContext";
 import { ShadowDom } from "./shadow-dom";
 import AppRoot from "./components/appRoot";
-import type { IGWHandler } from "./interfaces";
+import type { IGWHandler, IGWHandlerInsider } from "./interfaces";
 
 import "./empty_sheet.css";
 
@@ -24,7 +24,7 @@ export const GraphicWalker = observer(forwardRef<IGWHandler, IGWProps>((props, r
 
     return (
         <StoreWrapper keepAlive={props.keepAlive} storeRef={storeRef}>
-            <AppRoot ref={ref}>
+            <AppRoot ref={ref as ForwardedRef<IGWHandlerInsider>}>
                 <ShadowDom onMount={handleMount} onUnmount={handleUnmount}>
                     <FieldsContextWrapper>
                         <App {...props} />