@kanaries/graphic-walker 0.2.18 → 0.3.0

package/dist/interfaces.d.ts

@@ -128,7 +128,6 @@ export interface IFilterField extends IViewField {
     rule: IFilterRule | null;
 }
 export interface DraggableFieldState {
-    fields: IViewField[];
     dimensions: IViewField[];
     measures: IViewField[];
     rows: IViewField[];

package/dist/main.d.ts

@@ -1 +1 @@
-import "./index.css";
+import './index.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.2.18",
+  "version": "0.3.0",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",
@@ -43,6 +43,7 @@
     "immer": "^9.0.15",
     "mobx": "^6.3.3",
     "mobx-react-lite": "^3.2.1",
+    "nanoid": "^4.0.2",
     "postcss": "^8.3.7",
     "postinstall-postinstall": "^2.1.0",
     "re-resizable": "^6.9.8",
@@ -69,8 +70,8 @@
     "vite": "^4.1.1"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": ">=17.0.0 <19.0.0",
+    "react-dom": ">=17.0.0 <19.0.0",
     "styled-components": "^5.3.6"
   }
 }

package/src/components/codeExport/index.tsx

@@ -17,7 +17,7 @@ const syntaxHighlight = (json: any) => {
         .replace(/>/g, ">")
         .replace(/\n/g, "<br>")
         .replace(/\t/g, "&nbsp;&nbsp;&nbsp;&nbsp;")
-        .replace(/\s/g, "&nbsp;&nbsp;");
+        .replace(/\s/g, "&nbsp;");
     return json.replace(
         /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
         function (match) {
@@ -84,8 +84,8 @@ const CodeExport: React.FC = observer((props) => {
                     }}
                 />
                 {tabKey === "graphic-walker" && (
-                    <div className="text-sm px-6 max-h-56 overflow-auto">
-                        <div dangerouslySetInnerHTML={{ __html: syntaxHighlight(code) }} />
+                    <div className="text-sm px-6 max-h-96 overflow-auto">
+                        <code dangerouslySetInnerHTML={{ __html: syntaxHighlight(code) }} />
                     </div>
                 )}
                 <div className="mt-4 flex justify-start">

package/src/config.ts

@@ -53,5 +53,4 @@ export const CHANNEL_LIMIT = {
 export const MetaFieldKeys: Array<keyof DraggableFieldState> = [
     'dimensions',
     'measures',
-    'fields'
 ]

package/src/fields/fieldsContext.tsx

@@ -40,7 +40,6 @@ export const FieldsContextWrapper: React.FC = props => {
 export default FieldsContextWrapper;
 
 export const DRAGGABLE_STATE_KEYS: Readonly<IDraggableStateKey[]> = [
-    { id: 'fields', mode: 0 },
     { id: 'columns', mode: 0 },
     { id: 'rows', mode: 0 },
     { id: 'color', mode: 1 },

package/src/interfaces.ts

@@ -149,7 +149,6 @@ export interface IFilterField extends IViewField {
 }
 
 export interface DraggableFieldState {
-    fields: IViewField[];
     dimensions: IViewField[];
     measures: IViewField[];
     rows: IViewField[];

package/src/main.tsx

@@ -1,17 +1,39 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import { GraphicWalker } from "./index";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { GraphicWalker } from './index';
 
-import { inject } from "@vercel/analytics";
-import "./index.css";
+import { inject } from '@vercel/analytics';
+import './index.css';
 
 if (!import.meta.env.DEV) {
     inject();
 }
 
-ReactDOM.render(
-    <React.StrictMode>
-        <GraphicWalker themeKey="g2" />
-    </React.StrictMode>,
-    document.getElementById("root")
-);
+// Example: Detect if Concurrent Mode is available
+const isConcurrentModeAvailable = 'createRoot' in ReactDOM;
+console.log(isConcurrentModeAvailable)
+
+// Use the new ReactDOM.createRoot API if available, otherwise fall back to the old ReactDOM.render API
+if (isConcurrentModeAvailable) {
+    // @ts-ignore
+    const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+    root.render(
+        <React.StrictMode>
+            <GraphicWalker themeKey="g2" />
+        </React.StrictMode>
+    );
+} else {
+    ReactDOM.render(
+        <React.StrictMode>
+            <GraphicWalker themeKey="g2" />
+        </React.StrictMode>,
+        document.getElementById('root') as HTMLElement
+    );
+}
+
+// ReactDOM.render(
+//     <React.StrictMode>
+//         <GraphicWalker themeKey="g2" />
+//     </React.StrictMode>,
+//     document.getElementById("root")
+// );

package/src/models/visSpecHistory.ts

@@ -130,6 +130,7 @@ export class VisSpecWithHistory {
 
     public clone () {
         const nextVSWH = new VisSpecWithHistory(this.frame);
+        nextVSWH.snapshots = this.snapshots.slice().map(s => ({ ...s }));
         nextVSWH.cursor = this.cursor;
         return nextVSWH;
     }

package/src/store/visualSpecStore.ts

@@ -1,18 +1,22 @@
 import { IReactionDisposer, makeAutoObservable, observable, reaction, toJS } from "mobx";
 import produce from "immer";
-import { v4 as uuidv4 } from "uuid";
 import { DataSet, DraggableFieldState, IFilterRule, IViewField, IVisSpec, IVisualConfig, Specification } from "../interfaces";
 import { CHANNEL_LIMIT, GEMO_TYPES, MetaFieldKeys } from "../config";
 import { VisSpecWithHistory } from "../models/visSpecHistory";
 import { IStoInfo, dumpsGWPureSpec, parseGWContent, parseGWPureSpec, stringifyGWContent } from "../utils/save";
 import { CommonStore } from "./commonStore";
 import { createCountField } from "../utils";
+import { nanoid } from "nanoid";
 
 function getChannelSizeLimit(channel: string): number {
     if (typeof CHANNEL_LIMIT[channel] === "undefined") return Infinity;
     return CHANNEL_LIMIT[channel];
 }
 
+function uniqueId(): string {
+    return "gw_" + nanoid(4);
+}
+
 function geomAdapter(geom: string) {
     switch (geom) {
         case "interval":
@@ -44,7 +48,6 @@ export function initEncoding(): DraggableFieldState {
     return {
         dimensions: [],
         measures: [],
-        fields: [],
         rows: [],
         columns: [],
         color: [],
@@ -144,7 +147,7 @@ export class VizSpecStore {
         this.visList.push(
             new VisSpecWithHistory({
                 name: 'Chart 1',
-                visId: uuidv4(),
+                visId: uniqueId(),
                 config: this.visualConfig,
                 encodings: this.draggableFieldState,
             })
@@ -299,7 +302,7 @@ export class VizSpecStore {
         this.visList.push(
             new VisSpecWithHistory({
                 name,
-                visId: uuidv4(),
+                visId: uniqueId(),
                 config: initVisualConfig(),
                 encodings: initEncoding(),
             })
@@ -324,19 +327,10 @@ export class VizSpecStore {
     public initMetaState(dataset: DataSet) {
         const countField = createCountField();
         this.useMutable(({ encodings }) => {
-            encodings.fields = dataset.rawFields.map((f) => ({
-                dragId: uuidv4(),
-                fid: f.fid,
-                name: f.name || f.fid,
-                aggName: f.analyticType === "measure" ? "sum" : undefined,
-                analyticType: f.analyticType,
-                semanticType: f.semanticType,
-            }))//.concat(countField);
-            encodings.fields.push(countField);
             encodings.dimensions = dataset.rawFields
                 .filter((f) => f.analyticType === "dimension")
                 .map((f) => ({
-                    dragId: uuidv4(),
+                    dragId: uniqueId(),
                     fid: f.fid,
                     name: f.name || f.fid,
                     semanticType: f.semanticType,
@@ -345,7 +339,7 @@ export class VizSpecStore {
             encodings.measures = dataset.rawFields
                 .filter((f) => f.analyticType === "measure")
                 .map((f) => ({
-                    dragId: uuidv4(),
+                    dragId: uniqueId(),
                     fid: f.fid,
                     name: f.name || f.fid,
                     analyticType: f.analyticType,
@@ -436,7 +430,7 @@ export class VizSpecStore {
                 // use a different dragId
                 movingField = {
                     ...toJS(encodings[sourceKey][sourceIndex]), // toJS will NOT shallow copy a object here
-                    dragId: uuidv4(),
+                    dragId: uniqueId(),
                 };
             } else {
                 [movingField] = encodings[sourceKey].splice(sourceIndex, 1);
@@ -480,7 +474,7 @@ export class VizSpecStore {
         this.useMutable(({ encodings }) => {
             encodings.filters.splice(index, 0, {
                 ...toJS(data),
-                dragId: uuidv4(),
+                dragId: uniqueId(),
                 rule: null,
             });
             this.editingFilterIdx = index;
@@ -508,7 +502,7 @@ export class VizSpecStore {
     public createBinField(stateKey: keyof DraggableFieldState, index: number, binType: 'bin' | 'binCount') {
         this.useMutable(({ encodings }) => {
             const originField = encodings[stateKey][index];
-            const newVarKey = uuidv4();
+            const newVarKey = uniqueId();
             const binField: IViewField = {
                 fid: newVarKey,
                 dragId: newVarKey,
@@ -537,7 +531,7 @@ export class VizSpecStore {
 
         this.useMutable(({ encodings }) => {
             const originField = encodings[stateKey][index];
-            const newVarKey = uuidv4();
+            const newVarKey = uniqueId();
             const logField: IViewField = {
                 fid: newVarKey,
                 dragId: newVarKey,
@@ -635,7 +629,7 @@ export class VizSpecStore {
 
         this.useMutable(({ encodings }) => {
             const cloneField = { ...toJS(field) };
-            cloneField.dragId = uuidv4();
+            cloneField.dragId = uniqueId();
             encodings[destinationKey].push(cloneField);
         });
     }
@@ -643,7 +637,7 @@ export class VizSpecStore {
         const tab = this.visList[this.visIndex];
 
         if (tab) {
-            const fields = tab.encodings.fields;
+            const fields = tab.encodings.dimensions.concat(tab.encodings.measures);
             // thi
             // const [xField, yField, ] = spec.position;
             this.clearState();