@kanaries/graphic-walker 0.2.4 → 0.2.6

package/src/visualSettings/menubar.tsx

@@ -0,0 +1,109 @@
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import styled from 'styled-components'
+import { ArrowUturnLeftIcon, ArrowUturnRightIcon } from '@heroicons/react/24/solid';
+import { useTranslation } from 'react-i18next';
+import { useGlobalStore } from '../store';
+
+
+export const MenubarContainer = styled.div({
+    marginBlock: '0 0.6em',
+    marginInline: '0.2em',
+});
+
+const Button = styled.button(({ disabled = false }) => ({
+    '&:hover': disabled ? {} : {
+        backgroundColor: 'rgba(243, 244, 246, 0.7)',
+    },
+    color: disabled ? 'rgba(156, 163, 175, 0.5)' : 'rgb(55, 65, 81)',
+    '& > pre': {
+        display: 'inline-block',
+        marginInlineStart: '0.2em',
+    },
+    marginInlineStart: '0.6em',
+    '&:first-child': {
+        marginInlineStart: '0',
+    },
+    cursor: disabled ? 'default' : 'pointer',
+}));
+
+interface ButtonWithShortcutProps {
+    label: string;
+    shortcut: string;
+    disabled: boolean;
+    handler: () => void;
+    icon?: JSX.Element;
+}
+
+const ButtonWithShortcut: React.FC<ButtonWithShortcutProps> = ({ label, shortcut, disabled, handler, icon }) => {
+    const { t } = useTranslation('translation', { keyPrefix: 'main.tabpanel.menubar' });
+
+    const rule = React.useMemo(() => {
+        const keys = shortcut.split('+').map(d => d.trim());
+
+        return {
+            key: keys.filter(
+                d => /^[a-z]$/i.test(d)
+            )[0],
+            ctrlKey: keys.includes('Ctrl'),
+            shiftKey: keys.includes('Shift'),
+            altKey: keys.includes('Alt'),
+        };
+    }, [shortcut]);
+
+    React.useEffect(() => {
+        const cb = (ev: KeyboardEvent) => {
+            if (
+                ev.ctrlKey === rule.ctrlKey
+                && ev.shiftKey === rule.shiftKey
+                && ev.altKey === rule.altKey
+                && ev.key.toLowerCase() === rule.key.toLowerCase()
+            ) {
+                handler();
+                ev.stopPropagation();
+            }
+        };
+
+        document.body.addEventListener('keydown', cb);
+
+        return () => document.body.removeEventListener('keydown', cb);
+    }, [rule, handler]);
+
+    return (
+        <Button
+            className="text-sm px-3 py-1 border text-gray-400 select-none"
+            disabled={disabled}
+            onClick={handler}
+            aria-label={t(label)}
+            title={`${t(label)} (${shortcut})`}
+        >
+            {icon || t(label)}
+        </Button>
+    );
+};
+
+const Menubar: React.FC = () => {
+    const { vizStore } = useGlobalStore();
+    const { canUndo, canRedo } = vizStore;
+
+    return (
+        <MenubarContainer>
+            <ButtonWithShortcut
+                label="undo"
+                disabled={!canUndo}
+                handler={vizStore.undo.bind(vizStore)}
+                shortcut="Ctrl+Z"
+                icon={<ArrowUturnLeftIcon width="1.4em" height="1.4em" />}
+            />
+            <ButtonWithShortcut
+                label="redo"
+                disabled={!canRedo}
+                handler={vizStore.redo.bind(vizStore)}
+                shortcut="Ctrl+Shift+Z"
+                icon={<ArrowUturnRightIcon width="1.4em" height="1.4em" />}
+            />
+        </MenubarContainer>
+    );
+}
+
+export default observer(Menubar);

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/src/workers/explainer.worker.js

@@ -0,0 +1,78 @@
+/* eslint no-restricted-globals: 0 */
+/* eslint-disable */ 
+// import { Record, Filters } from '../interfaces';
+import { getPredicatesFromVegaSignals } from '../utils';
+import { DataExplainer } from '../insights';
+const state = {
+    de: null
+};
+
+function preAnalysis (props) {
+    const { fields, dataSource } = props; // as ReqData;
+    const de = new DataExplainer(dataSource);
+    de.setFields(fields);
+    de.preAnalysis();
+    state.de = de;
+    return true
+}
+
+function getFieldsSummary (props) {
+    const de = state.de;
+    if (de !== null) {
+        return de.engine.fields;
+    }
+    throw new Error('data explainer is not init.')
+}
+function getExplaination(props) {
+
+    const { filters = {}, currentSpace } = props; // as ReqData;
+    const predicates = getPredicatesFromVegaSignals(filters, currentSpace.dimensions, []);
+    const de = state.de;
+    const ansSpaces = de.explain(predicates, currentSpace.dimensions, currentSpace.measures);
+    const visSpaces = de.getVisSpec(ansSpaces);
+    const valueExp = de.explainValue(predicates, currentSpace.dimensions, currentSpace.measures);
+    const measureStats = [];
+    for (let i = 0; i < valueExp.length; i++) {
+        if (valueExp[i] !== 0) {
+            measureStats.push({
+                ...currentSpace.measures[i],
+                score: valueExp[i]
+            })
+        }
+    }
+    const fields = de.engine.fields;
+    return {
+        explainations: ansSpaces,
+        visSpaces,
+        valueExp: measureStats,
+        fieldsWithSemanticType: fields.map(f => ({
+            key: f.key,
+            type: f.semanticType
+        }))
+    };
+}
+
+function main (e) {
+    const { type, data } = e.data;
+    console.log(type, data)
+    let res = false;
+    try {
+        switch (type) {
+            case 'getExplaination':
+                res = getExplaination(data);
+                break;
+            case 'preAnalysis':
+                res = preAnalysis(data);
+                break;
+            default:
+                throw new Error(`type ${type} is not supported.`);
+        }
+        self.postMessage(res);
+    } catch (error) {
+        // discuss
+        console.log(error)
+        self.postMessage(false)
+    }
+}
+
+self.addEventListener('message', main, false);

package/src/workers/filter.worker.js

@@ -0,0 +1,70 @@
+/* eslint no-restricted-globals: 0 */
+/* eslint-disable */ 
+
+/**
+ * @param {import('../interfaces').IRow[]} dataSource
+ * @param {import('../interfaces').IFilterField[]} filters
+ * @return {import('../interfaces').IRow[]}
+ */
+const filter = (dataSource, filters) => {
+    return dataSource.filter(which => {
+        for (const { rule, fid } of filters) {
+            if (!rule) {
+                continue;
+            }
+
+            switch (rule.type) {
+                case 'one of': {
+                    if (rule.value.has(which[fid])) {
+                        break;
+                    } else {
+                        return false;
+                    }
+                }
+                case 'range': {
+                    if (rule.value[0] <= which[fid] && which[fid] <= rule.value[1]) {
+                        break;
+                    } else {
+                        return false;
+                    }
+                }
+                case 'temporal range': {
+                    try {
+                        const time = new Date(which[fid]).getTime();
+
+                        if (
+                            rule.value[0] <= time && time <= rule.value[1]
+                        ) {
+                            break;
+                        } else {
+                            return false;
+                        }
+                    } catch (error) {
+                        console.error(error);
+
+                        return false;
+                    }
+                }
+                default: {
+                    console.warn('Unresolvable filter rule', rule);
+                    continue;
+                }
+            }
+        }
+
+        return true;
+    });
+};
+
+/**
+ * @param {MessageEvent<{ dataSource: import('../interfaces').IRow[]; filters: import('../interfaces').IFilterField[] }>} e
+ */
+const main = e => {
+    const { dataSource, filters } = e.data;
+
+    const filtered = filter(dataSource, filters);
+
+    self.postMessage(filtered);
+};
+
+self.addEventListener('message', main, false);