Fixes issues where settings weren't being applied to 2D Network in Ti…

…meline mode (including nodeSize, borderWidth, and polygons) as well as Zenhub CDCgov#899 where datefields from csv and excel file weren't being set correctly if empty

src/app/contactTraceCommonServices/common.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, OnInit, Output, EventEmitter, Injector, Directive } from '@angular/core';
+import { Injectable, OnInit, Output, EventEmitter, Injector, Directive } from '@angular/core';
 import { BehaviorSubject, Observable, of, Subject } from 'rxjs';
 import * as d3 from 'd3';
 import * as patristic from 'patristic';
@@ -315,7 +315,7 @@ export class CommonService extends AppComponentBase implements OnInit {
             'node-radius': 20,
             'node-radius-variable': 'None',
             "node-radius-min": 20,
-            "node-radius-max": 100,
+            "node-radius-max": 60,
             'node-symbol': 'ellipse',
             'node-symbol-table-counts': true,
             'node-symbol-table-frequencies': false,
@@ -998,7 +998,7 @@ export class CommonService extends AppComponentBase implements OnInit {
           color: this.getColorByIndex(node.index), // Add or override the color property
           label: (this.session.style.widgets['node-label-variable'] === 'None') ? '' : node.label, // Ensure label is defined
             nodeSize: node.nodeSize ?? 20, // Default node size
-            borderWidth: node.borderWidth ?? 1 // Default border width
+            borderWidth: node.borderWidth ?? this.session.style.widgets['node-border-width'] ?? 1 // Default border width
         }));
 
         const links = microbeData.links.map((link) => ({
@@ -2293,7 +2293,7 @@ export class CommonService extends AppComponentBase implements OnInit {
                 const minTimeString = new Date(minTime).toString();
                 // for each node d, if d[field] == null or empty string ("", " ", "  " ...) set d[field] to minTimeString
                 this.session.data.nodes.forEach(d => {
-                    if (d[field] == null || (d[field] && String(d[field]).trim() == ""))  {
+                    if (d[field] == null || (d[field] && String(d[field]).trim() == "") || d[field] == 'null')  {
                         d[field] = minTimeString;
                     } 
                 });

src/app/filesComponent/files-plugin.component.ts

@@ -1023,7 +1023,7 @@ export class FilesComponent extends BaseComponentDirective implements OnInit {
         if (file.extension === 'xls' || file.extension === 'xlsx') {
 
           const workbook = XLSX.read(file.contents, { type: 'array' });
-          const data = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);
+          const data = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], { raw: false, dateNF: 'yyyy-mm-dd'});
           data.forEach(node => {
             let safeNode = {
               _id: this.commonService.filterXSS('' + node[file.field1]),

src/app/visualizationComponents/TwoDComponent/twoD-plugin.component.html

@@ -1,4 +1,4 @@
-
+
 
 <span id="tooltip" style="background-color: white;"></span>
 
@@ -164,13 +164,13 @@ <h1><b>Please add data files to load...</b></h1>
                             <div id="node-max-radius-row" class="form-group row" title="Should node max radius to this variable?">
                                 <div class="col-4"><label for="node-radius-max">Max Size</label></div>
                                 <div class="col-8">
-                                    <input type="range" class="custom-range" id="node-radius-max" min="20" value="25" step="1" max="60" [(ngModel)]="SelectedNodeRadiusSizeMaxVariable" (ngModelChange)="onNodeRadiusMaxChange($event)">
+                                    <input type="range" class="custom-range" id="node-radius-max" min="20" value="25" step="1" max="100" [(ngModel)]="widgets['node-radius-max']" (ngModelChange)="onNodeRadiusMaxChange($event)">
                                 </div>
                               </div>
                               <div id="node-min-radius-row" class="form-group row" title="Should node min radius to this variable?">
                                 <div class="col-4"><label for="node-radius-min">Min Size</label></div>
                                 <div class="col-8">
-                                    <input type="range" class="custom-range" id="node-radius-min" min="5" value="10" step="1" max="55" [(ngModel)]="SelectedNodeRadiusSizeMinVariable" (ngModelChange)="onNodeRadiusMinChange($event)">
+                                    <input type="range" class="custom-range" id="node-radius-min" min="5" value="10" step="1" max="55" [(ngModel)]="widgets['node-radius-min']" (ngModelChange)="onNodeRadiusMinChange($event)">
                                 </div>
                             </div>
                             <div id="node-radius-row" class="form-group row" title="How big should the nodes be?">

src/app/visualizationComponents/TwoDComponent/twoD-plugin.component.ts

@@ -104,8 +104,7 @@ export class TwoDComponent extends BaseComponentDirective implements OnInit, Mic
     SelectedNodeShapeVariable: string = "symbolCircle";
     SelectedNodeRadiusVariable: string = "None";
     SelectedNodeRadiusSizeVariable: string = "None";
-    SelectedNodeRadiusSizeMaxVariable: string = "None";
-    SelectedNodeRadiusSizeMinVariable: string = "None";
+
     TableTypes: any = [
         { label: 'Show', value: 'Show' },
         { label: 'Hide', value: 'Hide' }
@@ -309,13 +308,12 @@ export class TwoDComponent extends BaseComponentDirective implements OnInit, Mic
         if (timelineTick) {
             // otherwise data: label gets overridden to be undefined
             node.label = this.getNodeLabel(node);
+            node.nodeSize = Number(this.getNodeSize(node));
             return {
                 data: {
                     id: node.id,
                     parent: (node.group && this.widgets['polygons-show']) || undefined, // Assign parent if exists
-                    nodeSize: this.getNodeSize(node), // Existing node size
                     nodeColor: this.getNodeColor(node), // <-- Added for dynamic node color
-                    borderWidth: this.getNodeBorderWidth(node), // <-- Added for dynamic border width
                     selectedBorderColor: this.widgets['selected-color'],
                     fontSize: this.getNodeFontSize(node), // <-- Added for dynamic label size
                     shape: this.getNodeShape(node),
@@ -1151,7 +1149,9 @@ export class TwoDComponent extends BaseComponentDirective implements OnInit, Mic
                         id: parentId, 
                         label: group, 
                         isParent: true, 
-                        nodeColor: this.commonService.temp.style.polygonColorMap(group) || '#000' 
+                        nodeColor: this.commonService.temp.style.polygonColorMap(group) || '#000',
+                        borderWidth: 1,
+                        shape: 'rectangle', 
                     },
                     classes: 'parent' // Assigning the 'parent' class
                 });
@@ -1870,23 +1870,23 @@ export class TwoDComponent extends BaseComponentDirective implements OnInit, Mic
                         id: parentId,
                         label: groupName,
                         isParent: true,
-                        nodeColor: this.commonService.temp.style.polygonColorMap(groupName) || '#000' // Default to black if not found
+                        nodeColor: this.commonService.temp.style.polygonColorMap(groupName) || '#000', // Default to black if not found
+                        borderWidth: 0,
+                        shape: 'rectangle',
                     },
                     classes: 'parent' // Assigning the 'parent' class
                 });
 
                 // Assign child nodes to the new parent
                 nodesInGroup.forEach(childNode => {
                     childNode.move({ parent: parentId });
-                    console.log(`Moved child node ${childNode.id()} to parent ${parentId}`);
                 });
             });
 
             // Handle nodes without a group (optional)
             cy.nodes().forEach(node => {
                 if (!node.parent().length && node.data(foci) !== 'None') {
                     node.move({ parent: null });
-                    console.log(`Ungrouped node ${node.id()}`);
                 }
             });
 
@@ -2504,6 +2504,7 @@ export class TwoDComponent extends BaseComponentDirective implements OnInit, Mic
             $('#node-min-radius-row').slideUp();
             $('#node-radius-row').slideDown();
         } else {
+            this.updateMinMaxNode()
             $('#node-max-radius-row').css('display', 'flex');
             $('#node-min-radius-row').css('display', 'flex');
             $('#node-radius-row').slideUp();
@@ -2631,6 +2632,10 @@ export class TwoDComponent extends BaseComponentDirective implements OnInit, Mic
 
         layout.run();
 
+        if (this.widgets['polygons-show']) {
+            this.polygonsToggle(true)
+            this.centerPolygons(this.widgets['polygons-foci']);
+        }
 
     } else{
         this.data = this.commonService.convertToGraphDataArray(networkData);