@kanaries/graphic-walker 0.2.9 → 0.2.10

package/src/fields/datasetFields/meaFields.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Draggable, DroppableProvided } from 'react-beautiful-dnd';
+import { Draggable, DroppableProvided } from '@kanaries/react-beautiful-dnd';
 import { observer } from 'mobx-react-lite';
 import { useGlobalStore } from '../../store';
 import DataTypeIcon from '../../components/dataTypeIcon';
@@ -19,7 +19,7 @@ const MeaFields: React.FC<Props> = props => {
                     return (
                         <>
                             <FieldPill
-                                className="pt-0.5 pb-0.5 pl-2 pr-2 m-1 text-xs hover:bg-blue-100 rounded-full truncate"
+                                className="pt-0.5 pb-0.5 pl-2 pr-2 mx-0 m-1 text-xs hover:bg-blue-100 rounded-full truncate border border-transparent"
                                 isDragging={snapshot.isDragging}
                                 ref={provided.innerRef}
                                 {...provided.draggableProps}
@@ -41,7 +41,7 @@ const MeaFields: React.FC<Props> = props => {
                                 }
                             </FieldPill>
                             {
-                                <FieldPill className={`pt-0.5 pb-0.5 pl-2 pr-2 m-1 text-xs hover:bg-blue-100 rounded-full border-blue-400 border truncate ${snapshot.isDragging ? '' : 'hidden'}`}
+                                <FieldPill className={`pt-0.5 pb-0.5 pl-2 pr-2 mx-0 m-1 text-xs hover:bg-blue-100 rounded-full border-blue-400 border truncate ${snapshot.isDragging ? '' : 'hidden'}`}
                                     isDragging={snapshot.isDragging}
                                 >
                                     <DataTypeIcon dataType={f.semanticType} analyticType={f.analyticType} /> {f.name}&nbsp;

package/src/fields/fieldsContext.tsx

@@ -5,7 +5,7 @@ import {
     DropResult,
     ResponderProvided,
     DraggableLocation,
-} from "react-beautiful-dnd";
+} from "@kanaries/react-beautiful-dnd";
 import { useGlobalStore } from '../store';
 window['__react-beautiful-dnd-disable-dev-warnings'] = true;
 

package/src/fields/filterField/filterPill.tsx

@@ -1,6 +1,6 @@
 import { observer } from 'mobx-react-lite';
 import React from 'react';
-import { DraggableProvided } from "react-beautiful-dnd";
+import { DraggableProvided } from "@kanaries/react-beautiful-dnd";
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import { PencilSquareIcon } from '@heroicons/react/24/solid';

package/src/fields/filterField/index.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import {
     Draggable,
     Droppable, DroppableProvided,
-} from "react-beautiful-dnd";
+} from "@kanaries/react-beautiful-dnd";
 
 import { useGlobalStore } from '../../store';
 import { FilterFieldContainer, FilterFieldsContainer } from '../components';

package/src/fields/obComponents/obFContainer.tsx

@@ -5,7 +5,7 @@ import { useGlobalStore } from '../../store';
 import {
     Draggable,
     DroppableProvided
-} from "react-beautiful-dnd";
+} from "@kanaries/react-beautiful-dnd";
 import { IDraggableStateKey } from '../../interfaces';
 import OBPill from './obPill';
 

package/src/fields/obComponents/obPill.tsx

@@ -2,7 +2,7 @@ import { BarsArrowDownIcon, BarsArrowUpIcon } from '@heroicons/react/24/outline'
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { DraggableProvided } from 'react-beautiful-dnd';
+import { DraggableProvided } from '@kanaries/react-beautiful-dnd';
 import { COUNT_FIELD_ID } from '../../constants';
 import { IDraggableStateKey } from '../../interfaces';
 import { useGlobalStore } from '../../store';

package/src/fields/posFields/index.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { observer } from 'mobx-react-lite';
-import { Droppable } from "react-beautiful-dnd";
+import { Droppable } from "@kanaries/react-beautiful-dnd";
 import { useGlobalStore } from '../../store';
 import { FieldListContainer } from "../components";
 import { DRAGGABLE_STATE_KEYS } from '../fieldsContext';

package/src/global.d.ts

@@ -0,0 +1,7 @@
+declare module '@kanaries/react-beautiful-dnd' {
+    export const DOM: {
+        setHead: (head: HTMLElement | ShadowRoot) => void;
+        setBody: (body: HTMLElement | ShadowRoot) => void;
+    };
+    export * from 'react-beautiful-dnd';
+}

package/src/index.tsx

@@ -1,12 +1,51 @@
-import React from 'react';
+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, { EditorProps } from './App';
 import { StoreWrapper } from './store/index';
 import { FieldsContextWrapper } from './fields/fieldsContext';
 
-export const GraphicWalker: React.FC<EditorProps> = props => {
-    return <StoreWrapper keepAlive={props.keepAlive}>
-        <FieldsContextWrapper>
-            <App {...props} />
-        </FieldsContextWrapper>
-    </StoreWrapper>
-}
+import './empty_sheet.css';
+import tailwindStyle from "tailwindcss/tailwind.css?inline";
+import style from './index.css?inline';
+
+
+export const ShadowDomContext = createContext<{ root: ShadowRoot | null }>({ root: null });
+
+export const GraphicWalker: React.FC<EditorProps> = observer(props => {
+    const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);
+    const rootRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (rootRef.current) {
+            const shadowRoot = rootRef.current.shadowRoot!;
+            setShadowRoot(shadowRoot);
+            DOM.setBody(shadowRoot);
+            DOM.setHead(shadowRoot);
+            return () => {
+                DOM.setBody(document.body);
+                DOM.setHead(document.head);
+            };
+        }
+    }, []);
+
+    return (
+        <root.div mode="open" ref={rootRef}>
+            <style>{tailwindStyle}</style>
+            <style>{style}</style>
+            {shadowRoot && (
+                <StyleSheetManager target={shadowRoot}>
+                    <StoreWrapper keepAlive={props.keepAlive}>
+                        <FieldsContextWrapper>
+                            <ShadowDomContext.Provider value={{ root: shadowRoot }}>
+                                <App {...props} />
+                            </ShadowDomContext.Provider>
+                        </FieldsContextWrapper>
+                    </StoreWrapper>
+                </StyleSheetManager>
+            )}
+        </root.div>
+    );
+});

package/src/store/visualSpecStore.ts

@@ -71,7 +71,7 @@ function initVisualConfig (): IVisualConfig {
             height: 200
         },
         exploration: {
-            mode: 'brush',
+            mode: 'none',
             brushDirection: 'default',
         },
     }

package/src/utils/throttle.ts

@@ -0,0 +1,28 @@
+const throttle = (fn: () => void, time: number, options?: Partial<{ leading: boolean; trailing: boolean }>): () => void => {
+    const { leading = true, trailing = false } = options ?? {};
+
+    let dirty = false;
+    let hasTrailing = false;
+
+    const throttled = (): void => {
+        if (dirty) {
+            hasTrailing = true;
+            return;
+        }
+        dirty = true;
+        if (leading) {
+            fn();
+        }
+        setTimeout(() => {
+            if (hasTrailing && trailing) {
+                fn();
+            }
+            dirty = false;
+            hasTrailing = false;
+        }, time);
+    };
+
+    return throttled;
+};
+
+export default throttle;