@kanaries/graphic-walker 0.2.14 → 0.2.16

package/src/fields/components.tsx

@@ -3,38 +3,13 @@ import styled from "styled-components";
 import { useTranslation } from 'react-i18next';
 import { COLORS } from "../config";
 
-export const AestheticSegment = styled.div`
-  border: 1px solid #e5e7eb;
-  // dark mode
-  @media (prefers-color-scheme: dark) {
-    border: 1px solid #2d3748;
-  }
-  font-size: 12px;
-  margin: 0.2em;
-
-  .aes-header{
-    border-bottom: 1px solid #e5e7eb;
-    @media (prefers-color-scheme: dark) {
-      border-bottom: 1px solid #2d3748;
-    }
-    padding: 0.6em;
-    h4 {
-      font-weight: 400;
-    }
-  }
-  .aes-container{
-    /* overflow-x: auto; */
-  }
-
-`
-
 export const FieldListContainer: React.FC<{ name: string }> = (props) => {
   const { t } = useTranslation('translation', { keyPrefix: 'constant.draggable_key' });
 
   return (
-    <FieldListSegment>
-      <div className="fl-header">
-        <h4>{t(props.name)}</h4>
+    <FieldListSegment className="m-0.5 border border-gray-200 dark:border-gray-700">
+      <div className="fl-header border-r border-gray-200 dark:border-gray-800 cursor-default select-none">
+        <h4 className="font-normal">{t(props.name)}</h4>
       </div>
       <div className="fl-container">{props.children}</div>
     </FieldListSegment>
@@ -45,12 +20,12 @@ export const AestheticFieldContainer: React.FC<{ name: string }> = props => {
   const { t } = useTranslation('translation', { keyPrefix: 'constant.draggable_key' });
 
   return (
-    <AestheticSegment>
-      <div className="aes-header cursor-default select-none">
-        <h4>{t(props.name)}</h4>
+    <div className="m-0.5 text-xs border border-gray-200 dark:border-gray-700">
+      <div className="border-b border-gray-200 dark:border-gray-800 p-2 cursor-default select-none">
+        <h4 className="font-normal">{t(props.name)}</h4>
       </div>
-      <div className="aes-container">{props.children}</div>
-    </AestheticSegment>
+      <div>{props.children}</div>
+    </div>
   );
 }
 
@@ -58,12 +33,12 @@ export const FilterFieldContainer: React.FC = props => {
   const { t } = useTranslation('translation', { keyPrefix: 'constant.draggable_key' });
 
   return (
-    <FilterFieldSegment>
-      <div className="flt-header cursor-default select-none">
-        <h4>{t('filters')}</h4>
+    <div className="m-0.5 text-xs border border-gray-200 dark:border-gray-700">
+      <div className="border-b border-gray-200 dark:border-gray-800 p-2 cursor-default select-none">
+        <h4 className="font-normal">{t('filters')}</h4>
       </div>
-      <div className="flt-container">{props.children}</div>
-    </FilterFieldSegment>
+      <div>{props.children}</div>
+    </div>
   );
 }
 
@@ -91,19 +66,11 @@ export const FilterFieldsContainer = styled.div({
 
 export const FieldListSegment = styled.div`
   display: flex;
-  border: 1px solid #e5e7eb;
-  @media (prefers-color-scheme: dark) {
-    border: 1px solid #2d3748;
-  }
   margin: 0.2em;
   font-size: 12px;
   div.fl-header {
     /* flex-basis: 100px; */
     width: 100px;
-    border-right: 1px solid #e5e7eb;
-    @media (prefers-color-scheme: dark) {
-      border-right: 1px solid #2d3748;
-    }
     flex-shrink: 0;
     h4 {
       margin: 0.6em;
@@ -112,10 +79,6 @@ export const FieldListSegment = styled.div`
   }
   div.fl-container {
     flex-grow: 10;
-    /* display: flex;
-    flex-wrap: wrap; */
-    /* overflow-x: auto;
-    overflow-y: hidden; */
   }
 `;
 

package/src/fields/datasetFields/index.tsx

@@ -2,11 +2,10 @@ import React from "react";
 import { Droppable } from "@kanaries/react-beautiful-dnd";
 import { useTranslation } from "react-i18next";
 import styled from 'styled-components';
-import { NestContainer } from "../../components/container";
 import DimFields from "./dimFields";
 import MeaFields from "./meaFields";
 
-const DSContainer = styled(NestContainer)`
+const DSContainer = styled.div`
     @media (min-width: 768px) {
         height: 680px;
     }
@@ -16,14 +15,14 @@ const DatasetFields: React.FC = (props) => {
     const { t } = useTranslation("translation", { keyPrefix: "main.tabpanel.DatasetFields" });
 
     return (
-        <DSContainer className="border-gray-200 dark:border-gray-700 flex md:flex-col" style={{ paddingBlock: 0, paddingInline: '0.6em' }}>
+        <DSContainer className="p-1 m-0.5 border border-gray-200 dark:border-gray-700 flex md:flex-col" style={{ paddingBlock: 0, paddingInline: '0.6em' }}>
             <h4 className="text-xs mb-2 flex-grow-0 cursor-default select-none mt-2">{t("field_list")}</h4>
             <div className="pd-1 overflow-y-auto" style={{ maxHeight: "380px", minHeight: '100px' }}>
                 <Droppable droppableId="dimensions" direction="vertical">
                     {(provided, snapshot) => <DimFields provided={provided} />}
                 </Droppable>
             </div>
-            <div className="border-t dark:border-gray-800 flex-grow pd-1 overflow-y-auto">
+            <div className="border-t dark:border-gray-700 flex-grow pd-1 overflow-y-auto">
                 <Droppable droppableId="measures" direction="vertical">
                     {(provided, snapshot) => <MeaFields provided={provided} />}
                 </Droppable>

package/src/fields/datasetFields/meaFields.tsx

@@ -20,18 +20,26 @@ const MeaFields: React.FC<Props> = (props) => {
                 value: "bin",
                 label: "Bin",
             },
+            {
+                value: 'binCount',
+                label: 'Bin Count'
+            },
             {
                 value: "log10",
                 label: "Log10",
             },
+            {
+                value: "log2",
+                label: "Log2",
+            },
         ];
     }, []);
 
     const fieldActionHandler = useCallback((selectedValue: any, opIndex: number, meaIndex: number) => {
-        if (selectedValue === "bin") {
-            vizStore.createBinField("measures", meaIndex);
-        } else if (selectedValue === "log10") {
-            vizStore.createLogField("measures", meaIndex);
+        if (selectedValue === "bin" || selectedValue === 'binCount') {
+            vizStore.createBinField("measures", meaIndex, selectedValue);
+        } else if (selectedValue === "log10" || selectedValue === "log2") {
+            vizStore.createLogField("measures", meaIndex, selectedValue);
         }
     }, []);
     return (

package/src/fields/encodeFields/singleEncodeEditor.tsx

@@ -48,7 +48,7 @@ const SingleEncodeEditor: React.FC<SingleEncodeEditorProps> = (props) => {
                                 >
                                     <TrashIcon className="w-4" />
                                 </div>
-                                <div className="flex-1 flex items-center border border-gray-200 dark:border-gray-700 border-l-0 px-2 space-x-2">
+                                <div className="flex-1 flex items-center border border-gray-200 dark:border-gray-700 border-l-0 px-2 space-x-2 truncate">
                                     <span className="flex-1 truncate">
                                         {channelItem.name}
                                     </span>

package/src/fields/filterField/filterEditDialog.tsx

@@ -1,64 +1,29 @@
-import { CheckCircleIcon } from '@heroicons/react/24/outline';
-import { observer } from 'mobx-react-lite';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import Modal from '../../components/modal';
-import type { IFilterField, IFilterRule } from '../../interfaces';
-import { useGlobalStore } from '../../store';
-import Tabs, { RuleFormProps } from './tabs';
-
-
-const QuantitativeRuleForm: React.FC<RuleFormProps> = ({
-    field,
-    onChange,
-}) => {
-    return (
-        <Tabs
-            field={field}
-            onChange={onChange}
-            tabs={['range', 'one of']}
-        />
-    );
+import { CheckCircleIcon } from "@heroicons/react/24/outline";
+import { observer } from "mobx-react-lite";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+import Modal from "../../components/modal";
+import type { IFilterField, IFilterRule } from "../../interfaces";
+import { useGlobalStore } from "../../store";
+import Tabs, { RuleFormProps } from "./tabs";
+import DefaultButton from "../../components/button/default";
+import PrimaryButton from "../../components/button/primary";
+
+const QuantitativeRuleForm: React.FC<RuleFormProps> = ({ field, onChange }) => {
+    return <Tabs field={field} onChange={onChange} tabs={["range", "one of"]} />;
 };
 
-const NominalRuleForm: React.FC<RuleFormProps> = ({
-    field,
-    onChange,
-}) => {
-    return (
-        <Tabs
-            field={field}
-            onChange={onChange}
-            tabs={['one of']}
-        />
-    );
+const NominalRuleForm: React.FC<RuleFormProps> = ({ field, onChange }) => {
+    return <Tabs field={field} onChange={onChange} tabs={["one of"]} />;
 };
 
-const OrdinalRuleForm: React.FC<RuleFormProps> = ({
-    field,
-    onChange,
-}) => {
-    return (
-        <Tabs
-            field={field}
-            onChange={onChange}
-            tabs={['range', 'one of']}
-        />
-    );
+const OrdinalRuleForm: React.FC<RuleFormProps> = ({ field, onChange }) => {
+    return <Tabs field={field} onChange={onChange} tabs={["range", "one of"]} />;
 };
 
-const TemporalRuleForm: React.FC<RuleFormProps> = ({
-    field,
-    onChange,
-}) => {
-    return (
-        <Tabs
-            field={field}
-            onChange={onChange}
-            tabs={['one of', 'temporal range']}
-        />
-    );
+const TemporalRuleForm: React.FC<RuleFormProps> = ({ field, onChange }) => {
+    return <Tabs field={field} onChange={onChange} tabs={["one of", "temporal range"]} />;
 };
 
 const EmptyForm: React.FC<RuleFormProps> = () => <React.Fragment />;
@@ -67,7 +32,7 @@ const FilterEditDialog: React.FC = observer(() => {
     const { vizStore } = useGlobalStore();
     const { editingFilterIdx, draggableFieldState } = vizStore;
 
-    const { t } = useTranslation('translation', { keyPrefix: 'filters' });
+    const { t } = useTranslation("translation", { keyPrefix: "filters" });
 
     const field = React.useMemo(() => {
         return editingFilterIdx !== null ? draggableFieldState.filters[editingFilterIdx] : null;
@@ -83,14 +48,20 @@ const FilterEditDialog: React.FC = observer(() => {
         }
     }, [field]);
 
-    const handleChange = React.useCallback((r: IFilterRule) => {
-        if (editingFilterIdx !== null) {
-            setUncontrolledField(uf => ({
-                ...uf,
-                rule: r,
-            }) as IFilterField);
-        }
-    }, [editingFilterIdx]);
+    const handleChange = React.useCallback(
+        (r: IFilterRule) => {
+            if (editingFilterIdx !== null) {
+                setUncontrolledField(
+                    (uf) =>
+                        ({
+                            ...uf,
+                            rule: r,
+                        } as IFilterField)
+                );
+            }
+        },
+        [editingFilterIdx]
+    );
 
     const handleSubmit = React.useCallback(() => {
         if (editingFilterIdx !== null) {
@@ -100,45 +71,38 @@ const FilterEditDialog: React.FC = observer(() => {
         vizStore.closeFilterEditing();
     }, [editingFilterIdx, uncontrolledField]);
 
-    const Form = field ? ({
-        quantitative: QuantitativeRuleForm,
-        nominal: NominalRuleForm,
-        ordinal: OrdinalRuleForm,
-        temporal: TemporalRuleForm,
-    }[field.semanticType] as React.FC<RuleFormProps>) : EmptyForm;
-    
+    const Form = field
+        ? ({
+              quantitative: QuantitativeRuleForm,
+              nominal: NominalRuleForm,
+              ordinal: OrdinalRuleForm,
+              temporal: TemporalRuleForm,
+          }[field.semanticType] as React.FC<RuleFormProps>)
+        : EmptyForm;
+
     return uncontrolledField ? (
-        <Modal
-            show={Boolean(uncontrolledField)}
-            title={t('editing')}
-            onClose={() => vizStore.closeFilterEditing()}
-        >
-            <header className="text-lg font-semibold py-2 outline-none">
-                {t('form.name')}
-            </header>
-            <input className="border py-1 px-4 bg-white text-gray-800" readOnly value={uncontrolledField.name}/>
-            <header className="text-lg font-semibold py-2 outline-none">
-                {t('form.rule')}
-            </header>
-            <Form
-                field={uncontrolledField}
-                onChange={handleChange}
-            />
-            <div className="flex justify-center text-green-500 mt-4">
-                <CheckCircleIcon
-                    width="3em"
-                    height="3em"
-                    role="button"
-                    tabIndex={0}
-                    aria-label="ok"
-                    className="cursor-pointer hover:bg-green-50 p-1"
-                    onClick={handleSubmit}
-                    strokeWidth="1.5"
-                />
+        <Modal show={Boolean(uncontrolledField)} title={t("editing")} onClose={() => vizStore.closeFilterEditing()}>
+            <div className="p-4">
+                <h2 className="text-base font-semibold py-2 outline-none">{t("form.name")}</h2>
+                <span className="inline-flex items-center rounded-full bg-indigo-100 px-3 py-0.5 text-sm font-medium text-indigo-800">
+                    {uncontrolledField.name}
+                </span>
+                <h3 className="text-base font-semibold py-2 outline-none">{t("form.rule")}</h3>
+                <Form field={uncontrolledField} onChange={handleChange} />
+                <div className="mt-4">
+                    <PrimaryButton
+                        onClick={handleSubmit}
+                        text={t("btn.confirm")}
+                    />
+                    <DefaultButton
+                        className="ml-2"
+                        onClick={() => vizStore.closeFilterEditing()}
+                        text={t("btn.cancel")}
+                    />
+                </div>
             </div>
         </Modal>
     ) : null;
 });
 
-
 export default FilterEditDialog;

package/src/fields/filterField/slider.tsx

@@ -118,7 +118,6 @@ const Slider: React.FC<SliderProps> = React.memo(function Slider ({
             };
 
             const dragHandler = fromEvent(document.body, 'mousemove').pipe(
-                throttleTime(100),
                 map(ev => {
                     if (!trackRef.current || !dragging) {
                         return null;
@@ -142,6 +141,7 @@ const Slider: React.FC<SliderProps> = React.memo(function Slider ({
 
                     return pos;
                 }),
+                throttleTime(100),
                 filter(pos => {
                     return pos !== null && pos !== range[dragging === 'left' ? 0 : 1];
                 }),

package/src/index.css

@@ -10,11 +10,11 @@ html{
   }
 }
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    sans-serif; */
+  /* -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale; */
   margin: 0px;
   padding: 0px;
 }

package/src/index.tsx

@@ -1,22 +1,22 @@
-import React, { createContext, useEffect, useRef, useState } from 'react';
-import { StyleSheetManager } from 'styled-components';
-import root from 'react-shadow';
-import { DOM } from '@kanaries/react-beautiful-dnd';
-import { observer } from 'mobx-react-lite';
-import App, { IGWProps } from './App';
-import { StoreWrapper } from './store/index';
-import { FieldsContextWrapper } from './fields/fieldsContext';
+import React, { createContext, useEffect, useRef, useState } from "react";
+import { StyleSheetManager } from "styled-components";
+import root from "react-shadow";
+import { DOM } from "@kanaries/react-beautiful-dnd";
+import { observer } from "mobx-react-lite";
+import App, { IGWProps } from "./App";
+import { StoreWrapper } from "./store/index";
+import { FieldsContextWrapper } from "./fields/fieldsContext";
 
-import './empty_sheet.css';
+import "./empty_sheet.css";
 import tailwindStyle from "tailwindcss/tailwind.css?inline";
-import style from './index.css?inline';
-
+import style from "./index.css?inline";
 
 export const ShadowDomContext = createContext<{ root: ShadowRoot | null }>({ root: null });
 
-export const GraphicWalker: React.FC<IGWProps> = observer(props => {
+export const GraphicWalker: React.FC<IGWProps> = observer((props) => {
     const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);
     const rootRef = useRef<HTMLDivElement>(null);
+    const { storeRef } = props;
 
     useEffect(() => {
         if (rootRef.current) {
@@ -32,20 +32,20 @@ export const GraphicWalker: React.FC<IGWProps> = observer(props => {
     }, []);
 
     return (
-        <root.div mode="open" ref={rootRef}>
-            <style>{tailwindStyle}</style>
-            <style>{style}</style>
-            {shadowRoot && (
-                <StyleSheetManager target={shadowRoot}>
-                    <StoreWrapper keepAlive={props.keepAlive}>
+        <StoreWrapper keepAlive={props.keepAlive} storeRef={storeRef}>
+            <root.div mode="open" ref={rootRef}>
+                <style>{tailwindStyle}</style>
+                <style>{style}</style>
+                {shadowRoot && (
+                    <StyleSheetManager target={shadowRoot}>
                         <FieldsContextWrapper>
                             <ShadowDomContext.Provider value={{ root: shadowRoot }}>
                                 <App {...props} />
                             </ShadowDomContext.Provider>
                         </FieldsContextWrapper>
-                    </StoreWrapper>
-                </StyleSheetManager>
-            )}
-        </root.div>
+                    </StyleSheetManager>
+                )}
+            </root.div>
+        </StoreWrapper>
     );
 });

package/src/insightBoard/mainBoard.tsx

@@ -9,6 +9,8 @@ import { baseVis, IReasonType } from "./std2vegaSpec";
 import RadioGroupButtons from "./radioGroupButtons";
 import { formatFieldName, mergeMeasures } from "./utils";
 import { useTranslation } from "react-i18next";
+import { useCurrentMediaTheme } from "../utils/media";
+import { builtInThemes } from "../vis/theme";
 
 const collection = Insight.IntentionWorkerCollection.init();
 
@@ -41,6 +43,8 @@ const InsightMainBoard: React.FC<InsightMainBoardProps> = (props) => {
     const [valueExp, setValueExp] = useState<IMeasureWithStat[]>([]);
     const { t } = useTranslation();
     const container = useRef<HTMLDivElement>(null);
+    const mediaTheme = useCurrentMediaTheme();
+    const themeConfig = builtInThemes['g2'][mediaTheme];
 
     const dimsWithTypes = useMemo(() => {
         const dimensions = fields
@@ -111,10 +115,13 @@ const InsightMainBoard: React.FC<InsightMainBoardProps> = (props) => {
                 true
             );
             if (container.current) {
-                embed(container.current, _vegaSpec);
+                embed(container.current, _vegaSpec, {
+                    actions: false,
+                    config: themeConfig
+                });
             }
         }
-    }, [visIndex, recSpaces, visSpaces, fields, dataSource]);
+    }, [visIndex, recSpaces, visSpaces, fields, dataSource, themeConfig]);
 
     const FilterDesc = useMemo<React.ReactElement[]>(() => {
         if (filters) {

package/src/interfaces.ts

@@ -1,6 +1,6 @@
 import { StatFuncName } from "visual-insights/build/esm/statistics";
 import { AggFC } from 'cube-core/built/types';
-import { IAnalyticType, IMutField as VIMutField, ISemanticType } from 'visual-insights';
+import { IAnalyticType, ISemanticType } from 'visual-insights';
 
 export type DeepReadonly<T extends Record<keyof any, any>> = {
     readonly [K in keyof T]: T[K] extends Record<keyof any, any> ? DeepReadonly<T[K]> : T[K];
@@ -36,6 +36,28 @@ export interface IUncertainMutField {
     analyticType: IAnalyticType | '?';
 }
 
+
+export type IExpParamter = {
+    type: 'field';
+    value: string;
+} | {
+    type: 'value';
+    value: any;
+} | {
+    type: 'expression';
+    value: IExpression;
+} | {
+    type: 'constant';
+    value: any;
+}
+
+
+export interface IExpression {
+    op: 'bin' | 'log2' | 'log10' | 'one' | 'binCount';
+    params: IExpParamter[];
+    as: string;
+}
+
 export interface IField {
     /**
      * fid: key in data record
@@ -52,6 +74,8 @@ export interface IField {
     semanticType: ISemanticType;
     analyticType: IAnalyticType;
     cmp?: (a: any, b: any) => number;
+    computed?: boolean;
+    expressoion?: IExpression;
 }
 
 export interface IViewField extends IField {
@@ -176,7 +200,7 @@ export interface IVisualConfig {
 
 export interface IVisSpec {
     readonly visId: string;
-    readonly name?: [string, Record<string, any>?];
+    readonly name?: string;
     readonly encodings: DeepReadonly<DraggableFieldState>;
     readonly config: DeepReadonly<IVisualConfig>;
 }
@@ -184,4 +208,7 @@ export interface IVisSpec {
 export enum ISegmentKey {
     vis = 'vis',
     data = 'data'
-}
+}
+
+export type IThemeKey = 'vega' | 'g2';
+export type IDarkMode = 'media' | 'light' | 'dark';