From ac51767cba1a4694980ee26272b09194ddefb0a7 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Mon, 4 Dec 2023 16:49:47 -0500
Subject: small dataviz ui tweaks

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx        | 15 ++++++---------
 src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx    |  4 +++-
 src/client/views/nodes/DataVizBox/components/Chart.scss |  4 ++--
 3 files changed, 11 insertions(+), 12 deletions(-)

(limited to 'src/client/views')

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index cfa420473..32ed57861 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -353,9 +353,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 this.props.addDocument?.(newDoc);
             }
             DocUtils.MakeLink(anchor, newDoc, { link_relationship: 'GPT Data Prompt' });
-        }
-
-        
+        }        
     }
 
     render() {
@@ -386,15 +384,15 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     <Toggle text={'PIE CHART'} toggleType={ToggleType.BUTTON} type={Type.SEC} color={'black'} onClick={e => (this.layoutDoc._dataViz = DataVizView.PIECHART)} toggleStatus={this.layoutDoc._dataViz == -DataVizView.PIECHART} />
                 </div>
 
-                <CollectionFreeFormView
+                {/* <CollectionFreeFormView
                     ref={this._ffref}
                     {...this.props}
                     setContentView={emptyFunction}
-                    renderDepth={this.props.renderDepth + 1}
+                    renderDepth={this.props.renderDepth - 1}
                     fieldKey={this.annotationKey}
                     styleProvider={this.props.styleProvider}
                     isAnnotationOverlay={true}
-                    annotationLayerHostsContent={true}
+                    annotationLayerHostsContent={false}
                     PanelWidth={this.props.PanelWidth}
                     PanelHeight={this.props.PanelHeight}
                     select={emptyFunction}
@@ -403,11 +401,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     removeDocument={this.removeDocument}
                     moveDocument={this.moveDocument}
                     addDocument={this.addDocument}>
-
                     {this.renderVizView}
+                </CollectionFreeFormView> */}
 
-                </CollectionFreeFormView>
-
+                {this.renderVizView}
                 <div className="dataviz-sidebar" 
                      style={{ width: `${this.sidebarWidthPercent}`, 
                      backgroundColor: `${this.sidebarColor}` }}
diff --git a/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx
index 309297307..a015172a4 100644
--- a/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx
+++ b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx
@@ -3,12 +3,13 @@ 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 { Button, IconButton, Type } from 'browndash-components';
 import { StrCast } from '../../../../fields/Types';
 import { MarqueeView } from '../../collections/collectionFreeForm/MarqueeView';
 import { Utils, emptyFunction, setupMoveUpEvents } from '../../../../Utils';
 import { DragManager } from '../../../util/DragManager';
 import { DocumentView } from '../DocumentView';
+import { CgClose } from 'react-icons/cg';
 
 interface SchemaCSVPopUpProps {}
 
@@ -69,6 +70,7 @@ export class SchemaCSVPopUp extends React.Component<SchemaCSVPopUpProps> {
     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>
     );
 
diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index cc1923b98..bef3cced5 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -15,8 +15,8 @@
         font-size: larger;
         display: flex;
         flex-direction: row;
-        margin-top: -10px;
-        margin-bottom: -10px;
+        margin-top: -20px;
+        margin-bottom: -20px;
     }
     .asHistogram-checkBox {
         // display: flex;
-- 
cgit v1.2.3-70-g09d2