Merge branch 'master' into sophie-ai-images

1 files changed, 109 insertions, 0 deletions

diff --git a/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx
new file mode 100644
index 000000000..24023077f
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx
@@ -0,0 +1,109 @@
+import { IconButton } from 'browndash-components';
+import { action, makeObservable, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { CgClose } from 'react-icons/cg';
+import { Utils, emptyFunction, setupMoveUpEvents } from '../../../../Utils';
+import { Doc } from '../../../../fields/Doc';
+import { StrCast } from '../../../../fields/Types';
+import { DragManager } from '../../../util/DragManager';
+import { DocumentView } from '../DocumentView';
+import './SchemaCSVPopUp.scss';
+
+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 view: DocumentView | undefined = undefined;
+    @action
+    public setView = (docView: DocumentView) => {
+        this.view = docView;
+    };
+
+    @observable
+    public target: Doc | undefined = undefined;
+    @action
+    public setTarget = (doc: Doc) => {
+        this.target = doc;
+    };
+
+    @observable
+    public visible: boolean = false;
+    @action
+    public setVisible = (vis: boolean) => {
+        this.visible = vis;
+    };
+
+    constructor(props: SchemaCSVPopUpProps) {
+        super(props);
+        makeObservable(this);
+        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" onPointerDown={e => this.drag(e)}>
+                            <img width={150} height={150} src={'/assets/dataVizBox.png'} />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    heading = (headingText: string) => (
+        <div className="summary-heading">
+            <label className="summary-text">{headingText}</label>
+            <IconButton color={StrCast(Doc.UserDoc().userVariantColor)} tooltip="close" icon={<CgClose size="16px" />} onClick={() => this.setVisible(false)} />
+        </div>
+    );
+
+    drag = (e: React.PointerEvent) => {
+        const downX = e.clientX;
+        const downY = e.clientY;
+        setupMoveUpEvents(
+            {},
+            e,
+            e => {
+                const sourceAnchorCreator = () => this.dataVizDoc!;
+                const targetCreator = (annotationOn: Doc | undefined) => {
+                    const embedding = Doc.MakeEmbedding(this.dataVizDoc!);
+                    return embedding;
+                };
+                if (this.view && sourceAnchorCreator && !Utils.isClick(e.clientX, e.clientY, downX, downY, Date.now())) {
+                    DragManager.StartAnchorAnnoDrag(e.target instanceof HTMLElement ? [e.target] : [], new DragManager.AnchorAnnoDragData(this.view, sourceAnchorCreator, targetCreator), downX, downY, {
+                        dragComplete: e => {
+                            this.setVisible(false);
+                        },
+                    });
+                    return true;
+                }
+                return false;
+            },
+            emptyFunction,
+            action(e => {})
+        );
+    };
+
+    render() {
+        return (
+            <div className="summary-box" style={{ display: this.visible ? 'flex' : 'none' }}>
+                {this.dataBox()}
+            </div>
+        );
+    }
+}