aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/MainView.tsx2
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx13
-rw-r--r--src/client/views/nodes/DataVizBox/SchemaCSVPopUp.scss175
-rw-r--r--src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx80
-rw-r--r--src/client/views/pdf/GPTPopup/GPTPopup.tsx2
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);
};
/**
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 15:26:21 +0000