Merge pull request #285 from netcreateorg/dev-ds/edge-weights

Feature: Edge Weights

Author: Joshua Danish

build/app/unisys/server-database.js

@@ -334,6 +334,8 @@ function m_LoadTOMLTemplate(templateFilePath) {
       // Migrate v1.4 to v2.0
       // v2.0 added `provenance` and `comments` -- so we add the template definitions if the toml template does not already have them
       // hides them by default if they were not previously added
+      // FIXME: There is related migration code in m_MigrateTemplate() that needs to be merged...if possible
+
       const DEFAULT_TEMPLATE = TEMPLATE_SCHEMA.ParseTemplateSchema();
       const NODEDEFS = DEFAULT_TEMPLATE.nodeDefs;
       if (json.nodeDefs.provenance === undefined) {
@@ -353,6 +355,10 @@ function m_LoadTOMLTemplate(templateFilePath) {
         json.edgeDefs.comments = EDGEDEFS.comments;
         json.edgeDefs.comments.hidden = true;
       }
+      if (json.edgeDefs.weight === undefined) {
+        json.edgeDefs.weight = EDGEDEFS.weight;
+        json.edgeDefs.weight.hidden = true;
+      }
       // NOTE: We are not modifying the template permanently, only temporarily inserting definitions so the system can validate
 
       TEMPLATE = json;
@@ -397,8 +403,12 @@ async function m_LoadTemplate() {
 /// REVIEW: Should this be moved to a separate server-template module?
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /*/ Migrate Template File
-    Updates older templates to the current template-schema specification.
+    Updates older templates to the current template-schema specification by
+    inserting missing properties needed by the UI.
     Any changes to template-schema should be reflected here.
+
+    FIXME: There is code in m_LoadTOMLTemplate() that also does migration that
+    needs to be moved here!
 /*/
 function m_MigrateTemplate() {
   // 2023-0602 Filter Labels
@@ -419,8 +429,9 @@ function m_MigrateTemplate() {
 
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /*/ Validate Template File
-    This mostly makes sure that nodes and edges have the properties that the UI expects.
-    If a property is missing, we merely throw an error.  We don't do any error recovery.
+    Lazy check of template object definitions to make sure they are of
+    expected types and values so the UI doesn't choke and die. Throws an error
+    if property is missing.
 /*/
 // eslint-disable-next-line complexity
 function m_ValidateTemplate() {
@@ -486,6 +497,8 @@ DB.PKT_GetDatabase = function(pkt) {
   let nodes = NODES.chain().data({ removeMeta: false });
   let edges = EDGES.chain().data({ removeMeta: false });
   if (DBG) console.log(PR,`PKT_GetDatabase ${pkt.Info()} (loaded ${nodes.length} nodes, ${edges.length} edges)`);
+  m_MigrateNodes(nodes);
+  m_MigrateEdges(edges);
   LOGGER.Write(pkt.Info(), `getdatabase`);
   return { d3data: { nodes, edges }, template: TEMPLATE };
 };
@@ -1165,6 +1178,47 @@ DB.ReleaseEditLock = pkt => {
   return DB.GetEditStatus();
 }
 
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/// utility functions for loading data
+/*/ Migrates old network data to new formats based on the template defintion.
+    This will automatically migrate any field/property that is marked `isRequired`
+    and has a `defaultValue` defined.
+
+    The basic check is this:
+    1. If the TEMPLATE property `isRequired`
+    2. ...and the TEMPLATE propert has `defaultValue` defined
+    2. ...and the node/edge property is currently undefined or ``
+    3. ...then we set the property to the defaultValue
+
+    The key parameters:
+      property.isRequired
+      property.defaultValue
+
+    If `isRequired` or `defaultValue` is not defined on the property, we skip migration.
+
+    REVIEW: We might consider also adding type coercion.
+/*/
+function m_MigrateNodes(nodes) { // modifies `nodes` by reference
+  // Migrate v1.4 to v2.0
+  for (const [propertyName, property] of Object.entries(TEMPLATE.nodeDefs)) {
+    if (property.isRequired && property.defaultValue !== undefined) {
+      nodes.forEach(n => {
+        if (n[propertyName] === undefined || n[propertyName] === '') n[propertyName] = property.defaultValue;
+      });
+    }
+  }
+}
+function m_MigrateEdges(edges) { // modifies `edges` by reference
+  // Migrate v1.4 to v2.0
+  for (const [propertyName, property] of Object.entries(TEMPLATE.edgeDefs)) {
+    if (property.isRequired && property.defaultValue !== undefined) {
+      edges.forEach(e => {
+        if (e[propertyName] === undefined || e[propertyName] === '') e[propertyName] = property.defaultValue;
+      });
+    }
+  }
+}
+
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /// utility function for cleaning nodes with numeric id property
 function m_CleanObjID(prompt, obj) {

build/app/view/netcreate/NetCreate.jsx

@@ -53,6 +53,7 @@ const InfoPanel    = require('./components/InfoPanel');
 const FiltersPanel = require('./components/filter/FiltersPanel');
 const NCLOGIC      = require('./nc-logic'); // require to bootstrap data loading
 const FILTERLOGIC  = require('./filter-logic'); // handles filtering functions
+const EDGELOGIC = require('./edge-logic'); // handles edge synthesis
 const FILTER = require('./components/filter/FilterEnums');
 
 /// REACT COMPONENT ///////////////////////////////////////////////////////////

build/app/view/netcreate/components/EdgeEditor.jsx

@@ -228,6 +228,7 @@ class EdgeEditor extends UNISYS.Component {
           targetId:     '',
           type: '',
           info:         '',
+          weight: 1,
           provenance: '',
           comments: '',
           notes:        '',
@@ -292,6 +293,7 @@ class EdgeEditor extends UNISYS.Component {
       this.onRelationshipChange   = this.onRelationshipChange.bind(this);
       this.onNotesChange          = this.onNotesChange.bind(this);
       this.onInfoChange           = this.onInfoChange.bind(this);
+      this.onWeightChange         = this.onWeightChange.bind(this);
       this.onProvenanceChange = this.onProvenanceChange.bind(this);
       this.onCommentsChange = this.onCommentsChange.bind(this);
       this.onCitationChange       = this.onCitationChange.bind(this);
@@ -342,6 +344,7 @@ class EdgeEditor extends UNISYS.Component {
           targetId:     '',
           type: '',
           info:         '',
+          weight: 1,
           provenance: '',
           comments: '',
           notes:        '',
@@ -450,6 +453,7 @@ class EdgeEditor extends UNISYS.Component {
           type: '',
           notes: '',
           info: '',
+          weight: 1,
           provenance: provenance_str,
           comments: '',
           citation: '',
@@ -501,6 +505,7 @@ class EdgeEditor extends UNISYS.Component {
           targetId:     edge.target,
           type: edge.type || '',   // Make sure there's valid data
           info: edge.info || '',
+          weight: edge.weight || 1,
           provenance: edge.provenance || '',
           comments: edge.comments || '',
           citation: edge.citation || '',
@@ -855,10 +860,21 @@ class EdgeEditor extends UNISYS.Component {
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /*/
 /*/ onInfoChange (event) {
-      let formData = this.state.formData;
-      formData.info = event.target.value;
-      this.setState({formData: formData});
-    }
+  let formData = this.state.formData;
+  formData.info = event.target.value;
+  this.setState({formData: formData});
+}
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/*/
+/*/ onWeightChange (event) {
+  // The built in <input min="0"> will keep the step buttons from going below 0,
+  // but the user can still input "0". When editing, you need to be able to
+  // delete the whole field, so we allow blanks, otherwise the UI will always
+  // force a "0" in the field.
+  let formData = this.state.formData;
+  formData.weight = event.target.value < 1 ? "" : Number(event.target.value); // force Number type
+  this.setState({formData: formData});
+}
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /*/
 /*/ onProvenanceChange (event) {
@@ -909,6 +925,7 @@ class EdgeEditor extends UNISYS.Component {
         target:         this.state.targetNode.id,   // REVIEW: d3data 'target' is id, rename this to 'targetId'?
         type: formData.type,
         info: formData.info,
+        weight: formData.weight,
         provenance: formData.provenance,
         comments: formData.comments,
         citation: formData.citation,
@@ -1082,6 +1099,7 @@ class EdgeEditor extends UNISYS.Component {
                   <AutoComplete
                     identifier={'edge'+edgeID+'target'}
                     disabledValue={targetNode.label}
+                    // eslint-disable-next-line no-nested-ternary
                     inactiveMode={ ( parentNodeLabel===targetNode.label && !sameSourceAndTarget ) ? 'static' : this.state.isBeingEdited ? 'disabled' : 'link'}
                     linkID={targetNode.id}
                     shouldIgnoreSelection={!this.state.targetIsEditable}
@@ -1165,6 +1183,23 @@ class EdgeEditor extends UNISYS.Component {
                   />
                 </Col>
               </FormGroup>
+              {/** weight **/}
+              <FormGroup row hidden={edgeDefs.weight.hidden}>
+                <Col sm={3} style={{hyphens: 'auto'}} className="pr-0">
+                  <Label for="weight" className="tooltipAnchor small text-muted">
+                    {edgeDefs.weight.displayLabel}
+                    <span className="tooltiptext">{this.helpText(edgeDefs.weight)}</span>
+                  </Label>
+                </Col>
+                <Col sm={9}>
+                  <Input type="number" name="weight" min="1"
+                    value={formData.weight}
+                    onChange={this.onWeightChange}
+                    readOnly={!this.state.isBeingEdited}
+                  />
+                </Col>
+              </FormGroup>
+              {/** provenance **/}
               <FormGroup row hidden={edgeDefs.provenance.hidden}>
                 <Col sm={3} style={{hyphens: 'auto'}} className="pr-0">
                   <Label for="provenance" className="tooltipAnchor small text-muted">

build/app/view/netcreate/components/EdgeTable.jsx

@@ -314,9 +314,9 @@ class EdgeTable extends UNISYS.Component {
                                  // was changed but the full db wasn't updated
             bkey = b[key] || '';
           } else if (type === FILTER.TYPES.NUMBER) {
-            akey = Number(a[key]); // force number for sorting
-            bkey = Number(b[key]);
-          } else {
+            akey = Number(a[key]||''); // force number for sorting
+            bkey = Number(b[key]||'');
+          } else /* if some other type */ {
             akey = a[key];
             bkey = b[key];
           }
@@ -351,6 +351,7 @@ class EdgeTable extends UNISYS.Component {
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /*/ If no `sortkey` is passed, the sort will use the existing state.sortkey
 /*/ sortTable ( sortkey=this.state.sortkey, edges, type) {
+
       switch (sortkey) {
         case 'id':
           return this.sortByID(edges);
@@ -364,6 +365,9 @@ class EdgeTable extends UNISYS.Component {
         case 'Info':
           return this.sortByKey(edges, 'info', type);
           break;
+        case 'Weight':
+          return this.sortByKey(edges, 'weight', type);
+          break;
         case 'provenance':
           return this.sortByKey(edges, 'provenance', type);
           break;
@@ -567,10 +571,13 @@ class EdgeTable extends UNISYS.Component {
                 <th  width="10%"hidden={edgeDefs.info.hidden}><Button size="sm"
                       onClick={()=>this.setSortKey("Info", edgeDefs.info.type)}
                     >{edgeDefs.info.displayLabel} {this.sortSymbol("Info")}</Button></th>
+                <th  width="4%"hidden={edgeDefs.weight.hidden}><Button size="sm"
+                      onClick={()=>this.setSortKey("Weight", edgeDefs.weight.type)}
+                    >{edgeDefs.weight.displayLabel} {this.sortSymbol("Weight")}</Button></th>
                 <th  width="7%"hidden={edgeDefs.provenance.hidden}><Button size="sm"
                       onClick={()=>this.setSortKey("provenance", edgeDefs.provenance.type)}
                     >{edgeDefs.provenance.displayLabel} {this.sortSymbol("provenance")}</Button></th>
-                <th  width="10%"hidden={!isLocalHost}><Button size="sm"
+                <th  width="7%"hidden={!isLocalHost}><Button size="sm"
                       onClick={()=>this.setSortKey("Updated", FILTER.TYPES.STRING)}
                     >Updated {this.sortSymbol("Updated")}</Button></th>
                 <th  width="10%"hidden={edgeDefs.comments.hidden}><Button size="sm"
@@ -605,6 +612,7 @@ class EdgeTable extends UNISYS.Component {
                   {edge.notes ? <MarkdownNote text={edge.notes} /> : "" }
                 </td>
                 <td hidden={edgeDefs.info.hidden}>{edge.info}</td>
+                <td hidden={edgeDefs.weight.hidden}>{edge.weight}</td>
                 <td hidden={edgeDefs.provenance.hidden}
                   style={{ fontSize: '9px' }}
                 >{edge.provenance}</td>

build/app/view/netcreate/components/NodeSelector.css

@@ -18,4 +18,10 @@
 .nodeEntry textarea.comments {
   width: 100%;
   background-color: #ffff66;
+}
+
+/* Applies to NodeSelector and EdgeEditor, overrides bootstrap */
+.form-control:focus:invalid, .formcontrol:focus:out-of-range, input:invalid, input:out-of-range {
+  border-color: red;
+  box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, .25);
 }

build/app/view/netcreate/components/NodeTable.jsx

@@ -285,9 +285,9 @@ class NodeTable extends UNISYS.Component {
                                  // was changed but the full db wasn't updated
             bkey = b[key] || '';
           } else if (type === FILTER.TYPES.NUMBER) {
-            akey = Number(a[key]); // force number for sorting
-            bkey = Number(b[key]);
-          } else {
+            akey = Number(a[key]||''); // force number for sorting
+            bkey = Number(b[key]||'');
+          } else /* some other type */ {
             akey = a[key];
             bkey = b[key];
           }

build/app/view/netcreate/components/d3-simplenetgraph.js

@@ -185,7 +185,7 @@ class D3NetGraph {
 
       // bind 'this' to function objects so event handlers can access
       // contents of this class+module instance
-      this._HandleFilteredD3DataUpdate = this._HandleFilteredD3DataUpdate.bind(this);
+      this._HandleD3DataUpdate = this._HandleD3DataUpdate.bind(this);
       this._HandleTemplateUpdate = this._HandleTemplateUpdate.bind(this);
       this._ClearSVG = this._ClearSVG.bind(this);
       this._SetDefaultValues = this._SetDefaultValues.bind(this);
@@ -219,7 +219,12 @@ class D3NetGraph {
       //   this._SetData(data);
       // });
 
-      UDATA.OnAppStateChange('FILTEREDD3DATA', this._HandleFilteredD3DataUpdate);
+      // V2.0 CHANGE
+      // Ignore FILTEREDD3DATA updates!  Only listen for SYNTHESIZEDD3DATA
+      // which represents simplified edge data (duplicate edges removed) for rendering
+      // UDATA.OnAppStateChange('FILTEREDD3DATA', this._HandleFilteredD3DataUpdate);
+
+      UDATA.OnAppStateChange('SYNTHESIZEDD3DATA', this._HandleD3DataUpdate);
       UDATA.OnAppStateChange('TEMPLATE', this._HandleTemplateUpdate);
       UDATA.OnAppStateChange('COLORMAP', this._ColorMap);
       UDATA.HandleMessage('ZOOM_RESET', this._ZoomReset);
@@ -239,7 +244,7 @@ class D3NetGraph {
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   Deregister() {
     if (DBG) console.log(PR, 'd3-simplenetgraph.DESTRUCT!!!')
-    UDATA.AppStateChangeOff('FILTEREDD3DATA', this._HandleFilteredD3DataUpdate);
+    UDATA.AppStateChangeOff('SYNTHESIZEDD3DATA', this._HandleD3DataUpdate);
     UDATA.AppStateChangeOff('COLORMAP', this._ColorMap);
     UDATA.UnhandleMessage('ZOOM_RESET', this._ZoomReset);
     UDATA.UnhandleMessage('ZOOM_IN', this._ZoomIn);
@@ -255,8 +260,8 @@ class D3NetGraph {
    * @param {array} data.nodes
    * @param {array} data.edges
    */
-  _HandleFilteredD3DataUpdate(data) {
-    if (DBG) console.log(PR, 'got state FILTEREDD3DATA', data);
+  _HandleD3DataUpdate(data) {
+    if (DBG) console.log(PR, 'got state D3DATA', data);
     this._SetData(data);
   }
 
@@ -669,17 +674,18 @@ _UpdateLinkStrokeWidth(edge) {
     (sourceId === mouseoverNodeId) ||
     (targetId === mouseoverNodeId)
   ) {
-    return Math.min(edge.size ** 2, this.edgeSizeMax);  // Use **2 to make size differences more noticeable
+    // max size checking is in edge-logic
+    return edge.size;
+    // return edge.size ** 2;  // Use **2 to make size differences more noticeable
+    // return Math.min(edge.size ** 2, this.edgeSizeMax);  // Use **2 to make size differences more noticeable
   } else {
     return this.edgeSizeDefault;             // Barely visible if not selected
   }
 }
 
+/// Edge color is pre-set by edge-logic based on weights
 _UpdateLinkStrokeColor(edge) {
-  if (DBG) console.log(PR, '_UpdateLinkStrokeColor', edge)
-  let COLORMAP = UDATA.AppState('COLORMAP');
-  let color = COLORMAP.edgeColorMap[edge.type]
-  return color;
+  return edge.color;
 }