@kanaries/graphic-walker 0.3.13 → 0.3.14

package/dist/store/index.d.ts

@@ -5,16 +5,11 @@ export interface IGlobalStore {
     commonStore: CommonStore;
     vizStore: VizSpecStore;
 }
-export declare function destroyGWStore(): void;
-export declare function rebootGWStore(): void;
 interface StoreWrapperProps {
-    keepAlive?: boolean;
+    keepAlive?: boolean | string;
     storeRef?: React.MutableRefObject<IGlobalStore | null>;
+    children?: React.ReactNode;
 }
-export declare class StoreWrapper extends React.Component<StoreWrapperProps> {
-    constructor(props: StoreWrapperProps);
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-}
+export declare const StoreWrapper: (props: StoreWrapperProps) => JSX.Element;
 export declare function useGlobalStore(): IGlobalStore;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.3.13",
+  "version": "0.3.14",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",

package/src/components/timeoutImg.tsx

@@ -0,0 +1,29 @@
+import React, { useRef, useState, useEffect } from 'react';
+
+export const ImageWithFallback = (
+    props: React.ImgHTMLAttributes<HTMLImageElement> & { fallbackSrc: string; timeout: number }
+) => {
+    const { src, fallbackSrc, timeout, ...rest } = props;
+    const [failed, setFailed] = useState(false);
+    const imgLoadedOnInitSrc = useRef(false);
+
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            if (!imgLoadedOnInitSrc.current) setFailed(true);
+        }, timeout);
+        return () => clearTimeout(timer);
+    }, []);
+
+    return (
+        <img
+            {...rest}
+            src={failed ? src : fallbackSrc}
+            onError={() => {
+                setFailed(true);
+            }}
+            onLoad={() => {
+                imgLoadedOnInitSrc.current = true;
+            }}
+        />
+    );
+};

package/src/components/toolbar/components.tsx

@@ -74,6 +74,7 @@ export const ToolbarItemContainerElement = styled.div<{ split: boolean; dark: bo
     outline: none;
     width: ${({ split }) => split ? 'calc(var(--height) + 10px)' : 'var(--height)'};
     height: var(--height);
+    align-items: center;
     overflow: hidden;
     color: ${({ dark }) => dark ? 'var(--dark-mode-color)' : 'var(--color)'};
     position: relative;

package/src/fields/filterField/slider.tsx

@@ -100,7 +100,7 @@ const ValueInput: React.FC<ValueInputProps> = props => {
             type="number"
             min={min}
             max={max}
-            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"
+            className="block w-full rounded-md border-0 py-1 px-2 text-gray-900 dark:text-white shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 dark:bg-zinc-900 dark:border-gray-700 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
             value={value}
             onChange={(e) => handleSubmitValue(Number(e.target.value))}
         />

package/src/fields/filterField/tabs.tsx

@@ -1,11 +1,15 @@
 import { observer } from 'mobx-react-lite';
-import React, { useMemo, useRef } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 import type { IFilterField, IFilterRule } from '../../interfaces';
 import { useGlobalStore } from '../../store';
 import Slider from './slider';
+import {
+    ChevronDownIcon,
+    ChevronUpIcon,
+} from '@heroicons/react/24/outline';
 
 export type RuleFormProps = {
     field: IFilterField;
@@ -95,7 +99,7 @@ const TabPanel = styled.div``;
 
 const TabItem = styled.div``;
 
-const StatusCheckbox: React.FC<{currentNum: number; totalNum: number; onChange: () => void}> = props => {
+const StatusCheckbox: React.FC<{ currentNum: number; totalNum: number; onChange: () => void }> = props => {
     const { currentNum, totalNum, onChange } = props;
     const checkboxRef = useRef(null);
 
@@ -131,16 +135,42 @@ export const FilterOneOfRule: React.FC<RuleFormProps & { active: boolean }> = ob
     const { commonStore } = useGlobalStore();
     const { currentDataset: { dataSource } } = commonStore;
 
+    interface SortConfig {
+        key: 'value' | 'count';
+        ascending: boolean;
+    }
+    const [sortConfig, setSortConfig] = useState<SortConfig>({
+        key: "count",
+        ascending: true
+    });
+
     const count = React.useMemo(() => {
         return dataSource.reduce<Map<string | number, number>>((tmp, d) => {
             const val = d[field.fid];
 
             tmp.set(val, (tmp.get(val) ?? 0) + 1);
-            
+
             return tmp;
         }, new Map<string | number, number>());
     }, [dataSource, field]);
 
+    const sortedList = useMemo(() => {
+        const entries = Array.from(count.entries());
+        const compare = (a: [string | number, number], b: [string | number, number]) => {
+            if (sortConfig.key === 'count') {
+                return a[1] - b[1];
+            } else {
+                if (typeof a[0] === 'number' && typeof b[0] === 'number') {
+                    return a[0] - b[0];
+                } else {
+                    return String(a[0]).localeCompare(String(b[0]))
+                }
+            }
+        }
+        entries.sort(sortConfig.ascending ? compare : (a, b) => -compare(a, b));
+        return entries;
+    }, [count, sortConfig]);
+
     const { t } = useTranslation('translation');
 
     React.useEffect(() => {
@@ -172,7 +202,7 @@ export const FilterOneOfRule: React.FC<RuleFormProps & { active: boolean }> = ob
             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;
@@ -187,21 +217,37 @@ export const FilterOneOfRule: React.FC<RuleFormProps & { active: boolean }> = ob
         }
         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])
+    }, [field.rule?.value]);
+
+    const SortButton: React.FC<{ currentKey: SortConfig["key"] }> = ({ currentKey }) => {
+        const isCurrentKey = sortConfig.key === currentKey;
+        return (
+            <span
+                className={`ml-2 flex-none rounded bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer ${isCurrentKey ? "text-indigo-600" : "text-gray-500"}`}
+                onClick={() => setSortConfig({ key: currentKey, ascending: (isCurrentKey ? !sortConfig.ascending : true) })}
+            >
+                {isCurrentKey && !sortConfig.ascending
+                    ? <ChevronDownIcon className="h-4 w-4" />
+                    : <ChevronUpIcon className="h-4 w-4" />
+                }
+            </span>
+        );
+    }
 
     return field.rule?.type === 'one of' ? (
         <Container>
             <div>{t('constant.filter_type.one_of')}</div>
-            <div className="text-gray-500">{t('constant.filter_type.one_of_desc')}</div>
+            <div className="text-gray-500 dark:text-gray-300">{t('constant.filter_type.one_of_desc')}</div>
             <div className="btn-grp">
                 <Button
+                    className="dark:bg-zinc-900 dark:text-gray-200 dark:hover:bg-gray-800"
                     onClick={() => handleToggleFullOrEmptySet()}
                 >
                     {
@@ -211,12 +257,13 @@ export const FilterOneOfRule: React.FC<RuleFormProps & { active: boolean }> = ob
                     }
                 </Button>
                 <Button
+                    className="dark:bg-zinc-900 dark:text-gray-200 dark:hover:bg-gray-800"
                     onClick={() => handleToggleReverseSet()}
                 >
                     {t('filters.btn.reverse')}
                 </Button>
             </div>
-            <Table className="bg-slate-50">
+            <Table className="bg-slate-50 dark:bg-gray-800">
                 <div className="flex justify-center items-center">
                     <StatusCheckbox
                         currentNum={field.rule.value.size}
@@ -224,17 +271,19 @@ export const FilterOneOfRule: React.FC<RuleFormProps & { active: boolean }> = ob
                         onChange={handleToggleFullOrEmptySet}
                     />
                 </div>
-                <label className="header text-gray-500">
+                <label className="header text-gray-500 dark:text-gray-300 flex items-center">
                     {t('filters.header.value')}
+                    <SortButton currentKey="value" />
                 </label>
-                <label className="header text-gray-500">
+                <label className="header text-gray-500 dark:text-gray-300 flex items-center">
                     {t('filters.header.count')}
+                    <SortButton currentKey="count" />
                 </label>
             </Table>
             {/* <hr /> */}
             <Table>
                 {
-                    [...count.entries()].map(([value, count], idx) => {
+                    sortedList.map(([value, count], idx) => {
                         const id = `rule_checkbox_${idx}`;
 
                         return (
@@ -299,8 +348,8 @@ const CalendarInput: React.FC<CalendarInputProps> = props => {
     }
     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" 
+            className="block w-full rounded-md border-0 py-1 px-2 text-gray-900 dark:text-white shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 dark:bg-zinc-900 dark:border-gray-700 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)}
@@ -326,7 +375,7 @@ export const FilterTemporalRangeRule: React.FC<RuleFormProps & { active: boolean
 
                 list.push(time);
             } catch (error) {
-                
+
             }
             return list;
         }, []).sort((a, b) => a - b);
@@ -463,7 +512,7 @@ const Tabs: React.FC<TabsProps> = observer(({ field, onChange, tabs }) => {
     React.useEffect(() => {
         if (!tabs.includes(which)) setWhich(tabs[0]);
     }, [tabs])
-    
+
     return (
         <TabsContainer>
             <div>
@@ -472,13 +521,13 @@ const Tabs: React.FC<TabsProps> = observer(({ field, onChange, tabs }) => {
                         return (
                             <div className="flex my-2" key={option}>
                                 <div className="align-top">
-                                    <input 
+                                    <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" 
+                                        name="filter_type"
                                         value={option}
                                     />
                                 </div>
@@ -495,7 +544,7 @@ const Tabs: React.FC<TabsProps> = observer(({ field, onChange, tabs }) => {
                     })
                 }
             </div>
-            <hr className="my-0.5"/>
+            <hr className="my-0.5" />
             <TabPanel>
                 {
                     tabs.map((tab, i) => {

package/src/store/index.tsx

@@ -1,62 +1,63 @@
-import React, { useContext } from 'react';
-import { CommonStore } from './commonStore'
-import { VizSpecStore } from './visualSpecStore'
+import React, { useContext, useMemo, useEffect } from 'react';
+import { CommonStore } from './commonStore';
+import { VizSpecStore } from './visualSpecStore';
 
 export interface IGlobalStore {
     commonStore: CommonStore;
     vizStore: VizSpecStore;
 }
 
-const commonStore = new CommonStore();
-const vizStore = new VizSpecStore(commonStore);
-
-const initStore: IGlobalStore = {
-    commonStore,
-    vizStore
-}
+const StoreDict: Record<string, IGlobalStore> = {};
+const createStore = () => {
+    const commonStore = new CommonStore();
+    const vizStore = new VizSpecStore(commonStore);
+    return {
+        commonStore,
+        vizStore,
+    };
+};
+const getStore = (key?: string): IGlobalStore => {
+    if (key) {
+        if (!StoreDict[key]) StoreDict[key] = createStore();
+        return StoreDict[key];
+    } else {
+        return createStore();
+    }
+};
 
 const StoreContext = React.createContext<IGlobalStore>(null!);
-
-export function destroyGWStore() {
-    initStore.commonStore.destroy();
-    initStore.vizStore.destroy();
-}
-
-export function rebootGWStore() {
-    const cs = new CommonStore();
-    const vs = new VizSpecStore(cs);
-    initStore.commonStore = cs;
-    initStore.vizStore = vs;
-}
-
 interface StoreWrapperProps {
-    keepAlive?: boolean;
+    keepAlive?: boolean | string;
     storeRef?: React.MutableRefObject<IGlobalStore | null>;
+    children?: React.ReactNode;
 }
-export class StoreWrapper extends React.Component<StoreWrapperProps> {
-    constructor(props: StoreWrapperProps) {
-        super(props)
+
+const noop = () => {};
+
+export const StoreWrapper = (props: StoreWrapperProps) => {
+    const storeKey = props.keepAlive ? `${props.keepAlive}` : '';
+    const store = useMemo(() => getStore(storeKey), [storeKey]);
+    useEffect(() => {
         if (props.storeRef) {
-            props.storeRef.current = initStore;
+            const ref = props.storeRef;
+            ref.current = store;
+            return () => {
+                ref.current = null;
+            };
         }
-        if (props.keepAlive) {
-            rebootGWStore();
-        }
-    }
-    componentWillUnmount() {
-        if (!this.props.keepAlive) {
-            if (this.props.storeRef) {
-                this.props.storeRef.current = null;
-            }
-            destroyGWStore();
+        return noop;
+    }, [props.storeRef]);
+    useEffect(() => {
+        if (!storeKey) {
+            return () => {
+                store.commonStore.destroy();
+                store.vizStore.destroy();
+            };
         }
-    }
-    render() {
-        return <StoreContext.Provider value={initStore}>
-            { this.props.children }
-        </StoreContext.Provider>
-    }
-}
+        return noop;
+    }, [storeKey]);
+    return <StoreContext.Provider value={store}>{props.children}</StoreContext.Provider>;
+};
 
 export function useGlobalStore() {
     return useContext(StoreContext);

package/src/visualSettings/index.tsx

@@ -33,7 +33,8 @@ import Toolbar, { ToolbarItemProps } from '../components/toolbar';
 import { ButtonWithShortcut } from './menubar';
 import { useCurrentMediaTheme } from '../utils/media';
 import throttle from '../utils/throttle';
-import KanariesLogo from '../assets/kanaries-logo.svg';
+import KanariesLogo from '../assets/kanaries.png';
+import { ImageWithFallback } from '../components/timeoutImg';
 
 const Invisible = styled.div`
     clip: rect(1px, 1px, 1px, 1px);
@@ -101,30 +102,8 @@ const VisualSettings: React.FC<IVisualSettings> = ({
 
     const dark = useCurrentMediaTheme(darkModePreference) === 'dark';
 
-    console.log('kanaries logo', KanariesLogo);
-
     const items = useMemo<ToolbarItemProps[]>(() => {
         const builtInItems = [
-            {
-                key: 'kanaries',
-                label: 'kanaries',
-                icon: () => (
-                    // Kanaries brand info is not allowed to be removed or changed unless you are granted with special permission.
-                    <a href="https://kanaries.net" target="_blank">
-                        <img
-                            id="kanaries-logo"
-                            className="m-1"
-                            src="https://imagedelivery.net/tSvh1MGEu9IgUanmf58srQ/b6bc899f-a129-4c3a-d08f-d406166d0c00/public"
-                            alt="kanaries"
-                            onError={(e) => {
-                                // @ts-ignore
-                                e.target.src = KanariesLogo;
-                            }}
-                        />
-                    </a>
-                ),
-            },
-            '-',
             {
                 key: 'undo',
                 label: 'undo (Ctrl + Z)',
@@ -512,6 +491,24 @@ const VisualSettings: React.FC<IVisualSettings> = ({
                     commonStore.setShowCodeExportPanel(true);
                 },
             },
+            '-',
+            {
+                key: 'kanaries',
+                label: 'kanaries',
+                icon: () => (
+                    // Kanaries brand info is not allowed to be removed or changed unless you are granted with special permission.
+                    <a href="https://docs.kanaries.net" target="_blank">
+                        <ImageWithFallback
+                            id="kanaries-logo"
+                            className="p-1.5 opacity-70 hover:opacity-100"
+                            src="https://imagedelivery.net/tSvh1MGEu9IgUanmf58srQ/b6bc899f-a129-4c3a-d08f-d406166d0c00/public"
+                            fallbackSrc={KanariesLogo}
+                            timeout={1000}
+                            alt="kanaries"
+                        />
+                    </a>
+                ),
+            },
         ] as ToolbarItemProps[];
 
         const items = builtInItems.filter((item) => typeof item === 'string' || !exclude.includes(item.key));