Merge pull request #8 from bruceyyu/main

bruceyyu · web-flow · commit cedbdc6e9c29 · 2023-08-17T16:42:58.000+02:00
updates for v0.1.2
diff --git a/DESCRIPTION b/DESCRIPTION
@@ -1,6 +1,6 @@
 Package: GWalkR
 Title: Interactive Exploratory Data Analysis Tool
-Version: 0.1.1
+Version: 0.1.2
 Authors@R: c(
     person("Yue", "Yu", , "yyubv@connect.ust.hk", role = c("aut", "cre"),
            comment = c(ORCID = "0000-0002-9302-0793")),
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-[English](README.md) | [中文](docs/README.zh.md)
+[English](README.md) | [中文](https://github.com/Kanaries/GWalkR/blob/main/docs/README.zh.md)
 
 <img src="docs/img/hex_logo.png" align="right" alt="logo" width="120" height = "139" style = "border: none; float: right;">
 
@@ -52,11 +52,8 @@ gwalkr(iris)
 
 ## Main Features
 1. 🧑‍🎨 Turn a data frame into charts through simple drag-and-drop operations.
-2. 🤖️ [coming soon] Work with AI copilot in R: Let AI generate explorable charts for you!
+2. ✨ Empower your RMarkdown: Showcase your data insights with editable and explorable charts on a webpage ([example](https://bruceyyu.github.io/show/tidytuesday_etymology.nb.html))!
+3. 🤖️ [coming soon] Work with AI copilot in R: Let AI generate explorable charts for you!
 
 
 https://github.com/Kanaries/GWalkR/assets/33870780/4a3a9f9c-ff17-484b-9503-af82bd609b99
-
-
-3. ✨ [coming soon] Integration with Shiny app: Showcase your data insights with editable and explorable charts on a webpage!
-
diff --git a/web_app/package.json b/web_app/package.json
@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@kanaries/graphic-walker": "^0.3.9",
+    "@kanaries/graphic-walker": "^0.4.3",
     "@rollup/plugin-commonjs": "^25.0.2",
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-terser": "^0.4.3",
diff --git a/web_app/src/components/codeExportModal/index.tsx b/web_app/src/components/codeExportModal/index.tsx
@@ -2,10 +2,8 @@ import React, { useEffect, useState } from "react";
 import Modal from "../modal";
 import { observer } from "mobx-react-lite";
 import DefaultButton from "../button/default";
-import { encodeSpec } from "../../utils/graphicWalkerParser";
 
 import type { IGlobalStore } from "@kanaries/graphic-walker/dist/store";
-import type { IVisSpec } from "@kanaries/graphic-walker/dist/interfaces";
 
 interface ICodeExport {
     globalStore: React.MutableRefObject<IGlobalStore | null>;
@@ -14,12 +12,12 @@ interface ICodeExport {
 }
 
 const CodeExport: React.FC<ICodeExport> = observer((props) => {
-    const [code, setCode] = useState<IVisSpec[]>([]);
+    const [code, setCode] = useState<string>("");
 
     useEffect(() => {
         if (props.open) {
             const res = props.globalStore.current?.vizStore.exportViewSpec();
-            if (res) setCode(res);
+            if (res) setCode(JSON.stringify(res));
         }
     }, [props.open]);
 
@@ -34,7 +32,7 @@ const CodeExport: React.FC<ICodeExport> = observer((props) => {
                 <h1 className="mb-4 font-bold text-base">Config Export</h1>
                 <div className="text-sm max-h-64 overflow-auto w-full">
                     <code className="font-mono text-xs whitespace-nowrap w-full">
-                        visConfig &lt;- '{JSON.stringify(JSON.parse(encodeSpec(code)))}'
+                        visConfig &lt;- '{code}'
                         <br />
                         gwalkr(data="name of your data frame", visConfig=visConfig)
                     </code>
diff --git a/web_app/src/components/modal.tsx b/web_app/src/components/modal.tsx
@@ -63,7 +63,7 @@ const Modal: React.FC<ModalProps> = (props) => {
         >
             <Container
                 role="dialog"
-                className="bg-white dark:bg-zinc-900 shadow-lg rounded-md border border-gray-100 dark:border-gray-800"
+                className="bg-white dark:bg-zinc-900 shadow-lg rounded-md border border-gray-100 dark:border-gray-800 fixed left-50 top-50 z-999"
                 onMouseDown={(e) => e.stopPropagation()}
             >
                 <div className="absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
diff --git a/web_app/src/index.css b/web_app/src/index.css
@@ -2,5 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 :root {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
     font-size: 16px;
 }
diff --git a/web_app/src/index.tsx b/web_app/src/index.tsx
@@ -4,11 +4,12 @@ import { observer } from "mobx-react-lite";
 import { IAppProps } from "./interfaces";
 import { GraphicWalker } from "@kanaries/graphic-walker";
 import type { IGlobalStore } from "@kanaries/graphic-walker/dist/store";
-import type { IDataSetInfo, IVisSpec } from "@kanaries/graphic-walker/dist/interfaces";
+import type { IDataSetInfo, IMutField, IRow, IVisSpec } from "@kanaries/graphic-walker/dist/interfaces";
 import type { IStoInfo } from "@kanaries/graphic-walker/dist/utils/save";
 import { getExportTool } from "./tools/exportTool";
 import CodeExportModal from "./components/codeExportModal";
-import "./index.css";
+import { StyleSheetManager } from 'styled-components';
+import tailwindStyle from 'tailwindcss/tailwind.css?inline'
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const App: React.FC<IAppProps> = observer((propsIn) => {
@@ -19,36 +20,40 @@ const App: React.FC<IAppProps> = observer((propsIn) => {
     }, []);
     const [exportOpen, setExportOpen] = useState(false);
 
-    React.useEffect(() => {
+    const setData = (data?: IRow[], rawFields?: IMutField[]) => {
         if (specList.length !== 0) {
-            storeRef?.current?.vizStore?.importStoInfo({
-                dataSources: [
-                    {
-                        id: "dataSource-0",
-                        data: dataSource,
-                    },
-                ],
-                datasets: [
-                    {
-                        id: "dataset-0",
-                        name: "DataSet",
-                        rawFields: props.rawFields,
-                        dsId: "dataSource-0",
-                    },
-                ],
-                specList,
-            } as IStoInfo);
+            setTimeout(() => {
+                storeRef?.current?.vizStore?.importStoInfo({
+                    dataSources: [
+                        {
+                            id: "dataSource-0",
+                            data: data,
+                        },
+                    ],
+                    datasets: [
+                        {
+                            id: "dataset-0",
+                            name: "DataSet",
+                            rawFields: rawFields,
+                            dsId: "dataSource-0",
+                        },
+                    ],
+                    specList,
+                } as IStoInfo)
+            }, 1);
         } else {
             storeRef?.current?.commonStore?.updateTempSTDDS({
                 name: "Dataset",
-                rawFields: props.rawFields,
-                dataSource: dataSource,
+                rawFields: rawFields,
+                dataSource: data,
             } as IDataSetInfo);
             storeRef?.current?.commonStore?.commitTempDS();
         }
-    }, [storeRef, dataSource, props.rawFields, props.visSpec, specList]);
+    }
 
-    props.storeRef = storeRef;
+    React.useEffect(() => {
+        setData(dataSource, props.rawFields)
+    }, []);
 
     const exportTool = getExportTool(setExportOpen);
 
@@ -60,9 +65,10 @@ const App: React.FC<IAppProps> = observer((propsIn) => {
     };
     return (
         <React.StrictMode>
-            <div style={{ height: "100%", width: "100%", overflowY: "scroll" }}>
+            <div className="h-full w-full overflow-y-scroll font-sans">
+            {/* <div style={{ height: "100%", width: "100%", overflowY: "scroll" }}> */}
                 <CodeExportModal open={exportOpen} setOpen={setExportOpen} globalStore={storeRef} />
-                <GraphicWalker {...props} toolbar={toolbarConfig} />
+                <GraphicWalker {...props} storeRef={storeRef} toolbar={toolbarConfig} />
             </div>
         </React.StrictMode>
     );
@@ -71,8 +77,19 @@ const App: React.FC<IAppProps> = observer((propsIn) => {
 const GWalker = (props: IAppProps, id: string) => {
     const container = document.getElementById(id);
     if (container) {
-        const root = createRoot(container);
-        root.render(<App {...props} />);
+        const shadowRoot = container.attachShadow({ mode: 'open' });
+
+        // Add Tailwind CSS to the shadow root
+        const styleElement = document.createElement('style');
+        styleElement.textContent = tailwindStyle;
+        shadowRoot.appendChild(styleElement);
+
+        const root = createRoot(shadowRoot);
+        root.render(
+            <StyleSheetManager target={shadowRoot}>
+                <App {...props} />
+            </StyleSheetManager>
+        );
     }
     // If you want to execute GWalker after the document has loaded, you can do it here.
     // But remember, you will need to provide the 'props' and 'id' parameters.
diff --git a/web_app/src/tools/exportTool.tsx b/web_app/src/tools/exportTool.tsx
@@ -6,7 +6,7 @@ import type { ToolbarButtonItem } from "@kanaries/graphic-walker/dist/components
 
 export function getExportTool(setExportOpen: React.Dispatch<React.SetStateAction<boolean>>): ToolbarButtonItem {
     return {
-        key: "export_code",
+        key: "export_gwalkr_code",
         label: "export config",
         icon: (iconProps?: any) => <CodeBracketSquareIcon {...iconProps} />,
         onClick: () => {
diff --git a/web_app/src/utils/graphicWalkerParser.ts b/web_app/src/utils/graphicWalkerParser.ts
diff --git a/web_app/yarn.lock b/web_app/yarn.lock
@@ -481,39 +481,45 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
-"@kanaries/graphic-walker@0.3.9", "@kanaries/graphic-walker@^0.3.9":
-  version "0.3.9"
-  resolved "https://registry.npmmirror.com/@kanaries/graphic-walker/-/graphic-walker-0.3.9.tgz#cd2d090503fae366769a95b86a92676a44ed1ad2"
-  integrity sha512-ox7WE7bUX5M71L7DIRFWi8hrABthN0KET/f3ODOt8iMfJ7cHd8j+7hkzMkeyB2zCj1CV2vw7f4xnNhf8dTCt0g==
+"@kanaries/graphic-walker@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.npmmirror.com/@kanaries/graphic-walker/-/graphic-walker-0.4.3.tgz#e30e8a5ef85781433acadeada828726acf68fb27"
+  integrity sha512-r+c2bipTqlzPGckrYYNDbYmYi8DxBRJrjA4J1uNsckeb0d047ZT9cmQwqawtJPdxDpuxWnkFK7+oFYX6LcSRew==
   dependencies:
     "@headlessui/react" "^1.7.12"
     "@heroicons/react" "^2.0.8"
-    "@kanaries/graphic-walker" "0.3.9"
-    "@kanaries/react-beautiful-dnd" "0.0.1"
+    "@kanaries/react-beautiful-dnd" "^0.0.3"
     "@kanaries/web-data-loader" "^0.1.7"
+    "@tailwindcss/forms" "^0.5.4"
     autoprefixer "^10.3.5"
+    d3-format "^3.1.0"
+    d3-scale "^4.0.2"
+    d3-time-format "^4.1.0"
     i18next "^21.9.1"
     i18next-browser-languagedetector "^6.1.5"
     immer "^9.0.15"
+    leaflet "^1.9.4"
     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"
     react-i18next "^11.18.6"
+    react-leaflet "^4.2.1"
     react-shadow "^20.0.0"
     rxjs "^7.3.0"
     tailwindcss "^3.2.4"
+    topojson-client "^3.1.0"
     uuid "^8.3.2"
     vega "^5.22.1"
     vega-embed "^6.21.0"
     vega-lite "^5.6.0"
 
-"@kanaries/react-beautiful-dnd@0.0.1":
-  version "0.0.1"
-  resolved "https://registry.npmmirror.com/@kanaries/react-beautiful-dnd/-/react-beautiful-dnd-0.0.1.tgz#18369ecd87649ff3d939ef0559e0e38f848de0b3"
-  integrity sha512-4gUYrpNXOU+mLZ/Dsl/rGkmEEdxZ70pq2d2vMLIbeuGo+qCJSHL2UC5sTXfS6bAZcjcjBsim1ZpCwVc/EO2PYg==
+"@kanaries/react-beautiful-dnd@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.npmmirror.com/@kanaries/react-beautiful-dnd/-/react-beautiful-dnd-0.0.3.tgz#fce3972ed34a55223866b259b0adbabe003c7ba4"
+  integrity sha512-QKwQmmRDuYstNVvWJrdzCOs2FQAJSZFLdTe6iFZbqIlnGmZCGbRuajFJ2t+IFTV/vOelFKS9FOCJLVvRgB3Mmg==
   dependencies:
     "@babel/runtime" "^7.9.2"
     css-box-model "^1.2.0"
@@ -557,6 +563,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@react-leaflet/core@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/@react-leaflet/core/-/core-2.1.0.tgz#383acd31259d7c9ae8fb1b02d5e18fe613c2a13d"
+  integrity sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==
+
 "@rollup/plugin-commonjs@^25.0.2":
   version "25.0.2"
   resolved "https://registry.npmmirror.com/@rollup/plugin-commonjs/-/plugin-commonjs-25.0.2.tgz#7ed37d00a12fc7fdd3aadba5fa0de52f2372bbbb"
@@ -603,6 +614,13 @@
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
+"@tailwindcss/forms@^0.5.4":
+  version "0.5.4"
+  resolved "https://registry.npmmirror.com/@tailwindcss/forms/-/forms-0.5.4.tgz#5316a782fd95369eb5b6fd01d46323b3dce656a2"
+  integrity sha512-YAm12D3R7/9Mh4jFbYSMnsd6jG++8KxogWgqs7hbdo/86aWjjlIEvL7+QYdVELmAI0InXTpZqFIg5e7aDVWI2Q==
+  dependencies:
+    mini-svg-data-uri "^1.2.3"
+
 "@types/clone@~2.1.1":
   version "2.1.1"
   resolved "https://registry.npmmirror.com/@types/clone/-/clone-2.1.1.tgz#9b880d0ce9b1f209b5e0bd6d9caa38209db34024"
@@ -1807,6 +1825,11 @@ json5@^2.2.2:
   resolved "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
+leaflet@^1.9.4:
+  version "1.9.4"
+  resolved "https://registry.npmmirror.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
+  integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
+
 levn@^0.4.1:
   version "0.4.1"
   resolved "https://registry.npmmirror.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
@@ -1888,6 +1911,11 @@ micromatch@^4.0.4, micromatch@^4.0.5:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
+mini-svg-data-uri@^1.2.3:
+  version "1.4.4"
+  resolved "https://registry.npmmirror.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
+  integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
+
 minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
@@ -2202,6 +2230,13 @@ react-is@^17.0.2:
   resolved "https://registry.npmmirror.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-leaflet@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.npmmirror.com/react-leaflet/-/react-leaflet-4.2.1.tgz#c300e9eccaf15cb40757552e181200aa10b94780"
+  integrity sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==
+  dependencies:
+    "@react-leaflet/core" "^2.1.0"
+
 react-redux@^7.2.0:
   version "7.2.9"
   resolved "https://registry.npmmirror.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d"

Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@ const Modal: React.FC<ModalProps> = (props) => {`
`63`	`63`	`>`
`64`	`64`	`<Container`
`65`	`65`	`role="dialog"`
`66`		`- className="bg-white dark:bg-zinc-900 shadow-lg rounded-md border border-gray-100 dark:border-gray-800"`
	`66`	`+ className="bg-white dark:bg-zinc-900 shadow-lg rounded-md border border-gray-100 dark:border-gray-800 fixed left-50 top-50 z-999"`
`67`	`67`	`onMouseDown={(e) => e.stopPropagation()}`
`68`	`68`	`>`
`69`	`69`	`<div className="absolute top-0 right-0 hidden pt-4 pr-4 sm:block">`
Original file line number	Diff line number	Diff line change
`@@ -2,5 +2,6 @@`
`2`	`2`	`@tailwind components;`
`3`	`3`	`@tailwind utilities;`
`4`	`4`	`:root {`
	`5`	`+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;`
`5`	`6`	`font-size: 16px;`
`6`	`7`	`}`