schema to dataviz through popup

5 files changed, 269 insertions, 3 deletions

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index f40f1f3e8..d69834f34 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -71,6 +71,7 @@ import { PreviewCursor } from './PreviewCursor';
 import { PropertiesView } from './PropertiesView';
 import { DashboardStyleProvider, DefaultStyleProvider } from './StyleProvider';
 import { TopBar } from './topbar/TopBar';
+import { SchemaCSVPopUp } from './nodes/DataVizBox/SchemaCSVPopUp';
 const _global = (window /* browser */ || global) /* node */ as any;
 
 @observer
@@ -1081,6 +1082,7 @@ export class MainView extends React.Component {
                 <OverlayView />
                 {this.mapBoxHack}
                 <GPTPopup key="gptpopup" />
+                <SchemaCSVPopUp key="schemacsvpopup" />
                 <GenerativeFill imageEditorOpen={ImageBox.imageEditorOpen} imageEditorSource={ImageBox.imageEditorSource} imageRootDoc={ImageBox.imageRootDoc} addDoc={ImageBox.addDoc} />
                 {/* <NewLightboxView key="newLightbox" PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} maxBorder={[200, 50]} /> */}
             </div>
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 04e5ebb2c..e1ff4fda3 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -51,6 +51,7 @@ import { CollectionFreeFormRemoteCursors } from './CollectionFreeFormRemoteCurso
 import './CollectionFreeFormView.scss';
 import { MarqueeView } from './MarqueeView';
 import React = require('react');
+import { SchemaCSVPopUp } from '../../nodes/DataVizBox/SchemaCSVPopUp';
 
 export type collectionFreeformViewProps = {
     NativeWidth?: () => number;
@@ -1984,7 +1985,9 @@ ScriptingGlobals.add(function datavizFromSchema(doc: Doc) {
         for (let i=0; i < children.length; i++) {
             let eachRow = [];
             for (let j=0; j<keys.length; j++){
-                eachRow.push(children[i][keys[j]]);
+                var cell = children[i][keys[j]];
+                if (cell && cell as string)  cell = cell.toString().replace(/\,/g, '');
+                eachRow.push(cell);
             }
             csvRows.push(eachRow);
         }
@@ -1994,6 +1997,12 @@ ScriptingGlobals.add(function datavizFromSchema(doc: Doc) {
         const loading = Docs.Create.LoadingDocument(file, options);
         loading.presentation_openInLightbox = true;
         DocUtils.uploadFileToDoc(file, {}, loading);
-        if (view.ComponentView?.addDocument) view.ComponentView?.addDocument(loading);
+       // if (view.ComponentView?.addDocument) view.ComponentView?.addDocument(loading);
+
+        if (view.ComponentView?.addDocument) {
+            SchemaCSVPopUp.Instance.addToCollection = view.ComponentView?.addDocument;
+            SchemaCSVPopUp.Instance.setDataVizDoc(loading);
+            SchemaCSVPopUp.Instance.setVisible(true);
+        }
     })
 });
\ No newline at end of file
diff --git a/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.scss b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.scss
new file mode 100644
index 000000000..63a693918
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.scss
@@ -0,0 +1,175 @@
+$textgrey: #707070;
+$lighttextgrey: #a3a3a3;
+$greyborder: #d3d3d3;
+$lightgrey: #ececec;
+$button: #5b97ff;
+$highlightedText: #82e0ff;
+
+.summary-box {
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
+    width: 250px;
+    min-height: 200px;
+    border-radius: 15px;
+    padding: 15px;
+    padding-bottom: 0;
+    z-index: 999;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background-color: #ffffff;
+    box-shadow: 0 2px 5px #7474748d;
+    color: $textgrey;
+
+    .summary-heading {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid $greyborder;
+        padding-bottom: 5px;
+
+        .summary-text {
+            font-size: 12px;
+            font-weight: 500;
+        }
+    }
+
+    label {
+        color: $textgrey;
+        font-size: 12px;
+        font-weight: 400;
+        letter-spacing: 1px;
+        margin: 0;
+        padding-right: 5px;
+    }
+
+    a {
+        cursor: pointer;
+    }
+
+    .content-wrapper {
+        padding-top: 10px;
+        min-height: 50px;
+        max-height: 150px;
+        overflow-y: auto;
+    }
+
+    .btns-wrapper {
+        height: 50px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .summarizing {
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    button {
+        font-size: 9px;
+        padding: 10px;
+        color: #ffffff;
+        background-color: $button;
+        border-radius: 5px;
+    }
+
+    .text-btn {
+        &:hover {
+            background-color: $button;
+        }
+    }
+
+    .btn-secondary {
+        font-size: 8px;
+        padding: 10px 5px;
+        background-color: $lightgrey;
+        color: $textgrey;
+        &:hover {
+            background-color: $lightgrey;
+        }
+    }
+
+    .icon-btn {
+        background-color: #ffffff;
+        padding: 10px;
+        border-radius: 50%;
+        color: $button;
+        border: 1px solid $button;
+    }
+}
+
+.image-content-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    padding-bottom: 16px;
+
+    .img-wrapper {
+        position: relative;
+        cursor: pointer;
+
+        .img-container {
+            pointer-events: none;
+            position: relative;
+
+            img {
+                pointer-events: all;
+                position: relative;
+            }
+        }
+
+        .img-container::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .btn-container {
+            position: absolute;
+            right: 8px;
+            bottom: 8px;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        &:hover {
+            .img-container::after {
+                opacity: 1;
+            }
+
+            .btn-container {
+                opacity: 1;
+            }
+        }
+    }
+}
+
+// Typist CSS
+.Typist .Cursor {
+    display: inline-block;
+}
+.Typist .Cursor--blinking {
+    opacity: 1;
+    animation: blink 1s linear infinite;
+}
+
+@keyframes blink {
+    0% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
diff --git a/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx
new file mode 100644
index 000000000..99b7dd3c4
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx
@@ -0,0 +1,80 @@
+import React = require('react');
+import './SchemaCSVPopUp.scss';
+import { action, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import { Doc } from '../../../../fields/Doc';
+import { Button, Type } from 'browndash-components';
+import { StrCast } from '../../../../fields/Types';
+import { MarqueeView } from '../../collections/collectionFreeForm/MarqueeView';
+
+interface SchemaCSVPopUpProps {}
+
+@observer
+export class SchemaCSVPopUp extends React.Component<SchemaCSVPopUpProps> {
+    static Instance: SchemaCSVPopUp;
+
+    @observable
+    public dataVizDoc: Doc | undefined = undefined;
+    @action
+    public setDataVizDoc = (doc: Doc) => {
+        this.dataVizDoc = doc;
+    };
+
+    @observable
+    public visible: boolean = false;
+    @action
+    public setVisible = (vis: boolean) => {
+        this.visible = vis;
+    };
+
+    public addToCollection: any | undefined;
+
+    /**
+     * Transfers the doc to the user's canvas
+     */
+    private transferToCanvas = () => {
+        if (this.dataVizDoc) this.addToCollection?.(this.dataVizDoc);
+        this.setVisible(false);
+    };
+
+    constructor(props: SchemaCSVPopUpProps) {
+        super(props);
+        SchemaCSVPopUp.Instance = this;
+    }
+
+    dataBox = () => {
+        return (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+                {this.heading('Schema Table as Data Visualization Doc')}
+                <div className="image-content-wrapper">
+                        <div className="img-wrapper">
+                            <div className="img-container" style={{background: "blue"}}>
+                                <img
+                                    width={150} height={150} 
+                                />
+                            </div>
+                            <div className="btn-container">
+                                <Button text="Save to Canvas" onClick={() => this.transferToCanvas()} color={StrCast(Doc.UserDoc().userColor)} type={Type.TERT} />
+                            </div>
+                        </div>
+                        {/* {this.props.children} */}
+
+                </div>
+            </div>
+        );
+    };
+
+    heading = (headingText: string) => (
+        <div className="summary-heading">
+            <label className="summary-text">{headingText}</label>
+        </div>
+    );
+
+    render() {
+        return (
+            <div className="summary-box" style={{ display: this.visible ? 'flex' : 'none' }}>
+                {this.dataBox()}
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index 5392ec88e..d830ba8a9 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -126,7 +126,7 @@ export class GPTPopup extends React.Component<GPTPopupProps> {
             console.log(err);
             return '';
         }
-        GPTPopup.Instance.setLoading(false);
+        this.setLoading(false);
     };
 
     /**