feat: Move file upload info into a modal dialog triggered by a

dropdown option, similar to how Custom Url works.
Closes #272

src/App.module.css

@@ -123,7 +123,7 @@ input[name=hideControls]:checked ~ .canvas {
 .modalMain {
   position:fixed;
   background: white;
-  flex: 0;
+  flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   border: 1px solid black;
@@ -155,6 +155,7 @@ input[name=hideControls]:checked ~ .canvas {
 
 .centerSpan {
   display: flex;
+  flex: 0;
   flex-flow: row wrap;
   align-items: center;
   justify-content: center;
@@ -275,7 +276,7 @@ input[name=hideControls]:checked ~ .canvas {
 .uploadContainer {
   display: flex;
   align-items: center;
-  flex-flow: row;
+  flex-flow: row no-wrap;
 }
 
 .fileUpload {
@@ -290,6 +291,6 @@ input[name=hideControls]:checked ~ .canvas {
 }
 
 .fileUpload span {
-  flex: 1;
-  flex-direction: row;
+  flex: 1 0 auto;
+  flex-direction: row no-wrap;
 }

src/features/dataset-controls/DatasetControls.js

@@ -36,6 +36,11 @@ const CUSTOM_DATASET = {
   url: "custom-url"
 };
 
+const UPLOAD_DATASET = {
+  name: "Upload Dataset",
+  url: "upload-dataset"
+};
+
 const authTypes = [
   {'name': '-None-', 'scheme':'None' },
   {'name': 'Username\\Password', 'scheme':'Basic' },
@@ -67,6 +72,7 @@ class DatasetControls extends React.Component {
       selected: null,
       selectedFile: null,
       showUrlEntry: false,
+      showUpload: false,
       url: '',
       authScheme:'',
       token: '',
@@ -103,40 +109,38 @@ class DatasetControls extends React.Component {
     if (isNil(dataset)) {
       return this.resetDataset();
     }
-
+    console.log(dataset);
     this.props.removeDataset({owner: this.props.uuid});
     this.props.removeSearchIndex({owner: this.props.uuid});
     this.props.stopRefresh();
 
     const showUrlEntry = dataset === CUSTOM_DATASET;
+    const showUpload = dataset === UPLOAD_DATASET;
     this.setState({ 
       showUrlEntry: showUrlEntry,
+      showUpload: showUpload,
       url: '',
       authScheme:null,
       token: '',
       username: '',
       password: '',
+      selected: dataset,
+      selectedFile: null,
       refreshInterval: 0,
       refreshTimerRunning: false,
      });
-    if(!showUrlEntry)
+    if(!showUrlEntry && !showUpload)
     {
       const url = dataset.url;
       this.fetchAndSetDataset(url, dataset, null, null, null);
     }
+
+    console.log(this.state.selected);
   }
 
   onUpload = (file) => {
-    this.props.uploadDataset({ 
-      'owner': this.props.uuid, 
-      'file': file,
-      'includeData': true,
-      'includeControls': false,
-    });
-    this.props.stopRefresh();
     this.setState({
-      selected: null,
-      selectedFile: file.name,
+      selectedFile: file,
       refreshInterval: 0,
       refreshTimerRunning: false,
     });
@@ -177,7 +181,29 @@ class DatasetControls extends React.Component {
       token: '',
       username: '',
       password: '',
-     });
+    });
+  }
+
+  onUploadOk = () =>{
+    if(this.state.selectedFile){
+      this.props.uploadDataset({ 
+        'owner': this.props.uuid, 
+        'file': this.state.selectedFile,
+        'includeData': true,
+        'includeControls': false,
+      });
+      this.props.stopRefresh();
+      this.setState({ 
+        showUpload: false,
+      });
+    }
+  }
+
+  onUploadCancel = () => {
+    this.setState({ 
+      selectedFile: null,
+      showUpload: false,
+    });
   }
 
   getDownloadUrl = () => {
@@ -244,20 +270,9 @@ class DatasetControls extends React.Component {
             className={style.selector}
             selected={this.state.selected}
             onChange={this.onSelected}
-            datasets={[...this.props.datasets, POSEIDON_DATASET, CUSTOM_DATASET]}
-          />
-        </div>
-
-        <div className={style.uploadContainer}>
-          <span className={style.label}>Upload</span>
-          <DatasetUpload
-            ownerUuid={this.props.uuid}
-            className={style.fileUpload}
-            selected={this.state.selectedFile}
-            onChange={this.onUpload}
+            datasets={[...this.props.datasets, POSEIDON_DATASET, CUSTOM_DATASET, UPLOAD_DATASET]}
           />
         </div>
-
           <div className={style.utilityContainer}>
           { canDownload &&
             <DatasetDownload
@@ -307,18 +322,20 @@ class DatasetControls extends React.Component {
                 </span>
                 <span>
                   <label> AuthType </label>
-                  <select
-                    onChange={(evt) => this.setState({ authScheme: evt.target.value })}
-                    value={isNil(this.state.authScheme) ? '' : this.state.authScheme}
-                  >
-                    {authTypes.map((at) => {
-                      return (
-                        <option key={at.scheme} value={at.scheme}>
-                          {at.name}
-                        </option>
-                      );
-                    })}
-                  </select>
+                  <label className="select">
+                    <select
+                      onChange={(evt) => this.setState({ authScheme: evt.target.value })}
+                      value={isNil(this.state.authScheme) ? '' : this.state.authScheme}
+                    >
+                      {authTypes.map((at) => {
+                        return (
+                          <option key={at.scheme} value={at.scheme}>
+                            {at.name}
+                          </option>
+                        );
+                      })}
+                    </select>
+                  </label>
                 </span>
                 { this.state.authScheme === 'Bearer' &&
                   <span>
@@ -351,6 +368,29 @@ class DatasetControls extends React.Component {
               </div>
             </div>
           </Modal>
+          <Modal isOpen={ this.state.showUpload } onRequestClose={this.onUploadCancel} contentLabel="Upload a File">
+            <div className={ style.modal }>
+              <div className={ style.modalMain }>
+                  <div className={style.uploadContainer}>
+                    <span className={style.label}>Upload</span>
+                    <DatasetUpload
+                      ownerUuid={this.props.uuid}
+                      className={style.fileUpload}
+                      selected={this.state.selectedFile ? this.state.selectedFile.name : null}
+                      onChange={this.onUpload}
+                    />
+                  </div>
+                  <span className={ style.centerSpan }>
+                    <div className="button circular" title="Ok" onClick={this.onUploadOk}>
+                        <FontAwesomeIcon icon={faCheck} />
+                    </div>
+                    <div className="button circular" title="Cancel" onClick={this.onUploadCancel}>
+                        <FontAwesomeIcon icon={faTimes} />
+                    </div>
+                  </span>
+              </div>
+            </div>
+          </Modal>
       </div>
     );
   }

src/features/dataset-controls/DatasetControls.module.css

@@ -119,14 +119,14 @@
   display: flex;
   flex-flow: row wrap;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: space-between;
 }
 
-.centerSpan span {
+.centerSpan {
   display: flex;
   flex-flow: row wrap;
   align-items: center;
-  justify-content: center;
+  justify-content: center !important;
 }
 
 /*Slider styles*/
@@ -192,7 +192,7 @@
   content:"";
   height: 6px;
   background-color: #191919;
-  width: 12px;
+  width: 14px;
   top: -3px;
   left:-15px;
 }
@@ -261,5 +261,5 @@
   height: 6px;
   background-color: #191919;
   width: 40px;
-  top: 12px;
+  top: 11px;
 }

src/features/visualization/d3-viz/append-circles.js

@@ -60,6 +60,10 @@ const appendCircles = ({ nodeRoot, labelRoot, packedData, showNodes, hasSearch }
   mergedLabels.each( (d, i, nodes) => {
     scaleAndTrimToLabelWidth(nodes[i], d, 3 * d.height * fontScale);
   })
+  // const groupNodes = nodes.filter((d) => d.depth > 0 && d.height > 0);
+  // const newGroupNodes = nodesEnter.filter((d) => d.depth > 0 && d.height > 0);
+  // const groupData = packedData.descendants().filter((d) => d.height === 1);
+  // appendAggregations(groupNodes, newGroupNodes, groupData, showNodes, leafRadius, fontScale);
 
   return [
     nodes.merge(nodesEnter),
@@ -99,31 +103,31 @@ const getLabelWidth = (datum) =>{
 }
 
 const scaleAndTrimToLabelWidth = (node, datum, initialFontScale) => {
-  const textWidth = 0.80 * getLabelWidth(datum);
-  const textHeight = 0.75 * datum.labelSize;
+  const maxTextWidth = 0.80 * getLabelWidth(datum);
+  const maxTextHeight = 0.80 * datum.labelSize;
   const minFontScale = 10;
+  const maxFontScale = 75;
 
   let boxWidth = node.getBBox().width;
   let boxHeight = node.getBBox().height;
   let fontScale = 100;
   let labelText = datum.data.fieldValue;
 
   //scale to height
-   if ((boxHeight > textHeight)){
-    const heightScale = Math.abs((boxHeight -textHeight)/textHeight);
-    fontScale = Math.max(minFontScale, heightScale * initialFontScale)
+   if ((boxHeight > maxTextHeight)){
+    const heightScale = Math.abs((boxHeight - maxTextHeight)/maxTextHeight);
+    const widthScale = Math.abs((boxWidth -maxTextWidth)/maxTextWidth);
+    fontScale = Math.max(minFontScale, Math.min(heightScale * initialFontScale, widthScale *initialFontScale, maxFontScale));
     select(node)
       .style('font-size', (d, i, nodes) => fontScale + "%")
       .text(labelText);
   }
 
   boxWidth = node.getBBox().width;
   //trim to width
-  if(boxWidth > textWidth)
+  if(boxWidth > maxTextWidth)
   {
-    const lengthToTrimTo = Math.trunc(((boxWidth -textWidth)/textWidth) * labelText.length) - 3;
-    console.log("widthScale: %o", ((boxWidth -textWidth)/textWidth));
-    console.log("lengthToTrimTo: %o", lengthToTrimTo)
+    const lengthToTrimTo = Math.trunc(((boxWidth -maxTextWidth)/maxTextWidth) * labelText.length) - 3;
     if(lengthToTrimTo > 0){
       labelText = labelText.substr(0, lengthToTrimTo) + "...";
     }
@@ -136,4 +140,44 @@ const scaleAndTrimToLabelWidth = (node, datum, initialFontScale) => {
   }
 }
 
+const appendAggregations = (existingGroupNodes, newGroupNodesNodes, groupData, showNodes, leafRadius, fontScale) =>{
+  const newAggregations = newGroupNodesNodes.append("g")
+  .classed(className("aggregation"), true)
+  .attr("display", (d) => !showNodes ? 'none' : null);
+
+  const existingAggregations = existingGroupNodes.select(`g.${className("aggregation")}`);
+
+  const allAggregations = existingAggregations
+  .merge(newAggregations)
+  .data(groupData, datumKey);
+
+  allAggregations.exit().remove();
+
+  const newTotalContainer = allAggregations.enter()
+    .append('g')
+      .classed(className("total-container"), true);
+  newTotalContainer
+    .append('g')
+      .classed(className("node"), true)
+    .append('circle')
+      .attr('r', (d) => leafRadius)
+      .attr('cx', (d) => 0)
+      .attr('cy', (d) => 0);
+
+  const newTotalText = newTotalContainer
+  .append("text")
+    .classed(className("annotation-text"), true)
+    .style('font-size', (d) => (3 * d.height * fontScale) +"%")
+    .attr('x', (d) => 0)
+    .attr('y', (d) => 0)
+    .text((d) => !isNaN(d.value) ? d.value : "0");
+
+  allAggregations
+  .select(`g.${className("total-container")}`)
+  .select('text')
+  .merge(newTotalText)
+    .text((d) => !isNaN(d.value) ? d.value : "0");
+
+}
+
 export default appendCircles;