Dev

build/app/assets/templates/_default.template

@@ -1,6 +1,7 @@
 {
 
   "_comments":  [ "/// NetCreate Template File                                                             ///",
+                  "/// RELEASE NOTES: As of 12-7/2020 added default colors and transparency (for filters)  ///",
                   "/// RELEASE NOTES: As of 8/13/2020, a 'type' specification needs to added to each       ///",
                   "///     nodePrompt and edgePrompt for filters to work.  Valid types are:                ///",
                   "///     'string', 'number', 'select', and 'node'.  The 'node' type is only valid for    ///",
@@ -21,15 +22,18 @@
 
   "name":        "Blank",
 
-  "description": "This graph left intentionally blank for serving static files.",
+  "description": "The graph description would go here.",
 
-  "requireLogin": true,
+  "requireLogin": false,
 
   "citationPrompts":{
                 "citation": "Citation Text",
                 "hidden": false
     },
 
+  "searchColor":"#FFa500",
+  "sourceColor":"#008800",
+
   "nodePrompts": {
     "label": {
                 "type":     "string",
@@ -80,6 +84,7 @@
                   }
                 ]
              },
+    "defaultTransparency": "0.1",
     "degrees": {
       "type": "number",
       "label": "Degrees",
@@ -117,6 +122,7 @@
 
   "edgePrompts": {
     "edgeIsLockedMessage": "This edge is currently being edited by someone else, please try again later.",
+    "defaultTransparency": "0.3",
     "source":   {
                   "type": "node",
                   "label": "Source",

build/app/unisys/client-network.js

@@ -162,7 +162,11 @@ function m_HandleRegistrationMessage(msgEvent) {
     know that we're still alive.
 /*/
 function m_RespondToHeartbeat() {
-  NETSOCK.ws.send('pong');
+  if (NETSOCK.ws.readyState === NETSOCK.ws.OPEN) {
+    NETSOCK.ws.send("pong", (err) => {
+      if (err) console.log(PR, 'error "', err, '" while sending response pong');
+    });
+  }
 }
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /*/ If a 'hearbeat' message is not received from the server every 5 seconds

build/app/unisys/component/SessionShell.jsx

@@ -265,14 +265,11 @@ class SessionShell extends UNISYS.Component {
     if (UNISYS.IsStandaloneMode()) {
       const { prompt, timestamp } = window.NC_UNISYS.standalone;
       return (
-        <FormGroup row style={GROUP_STYLE}>
-          <Col sm={9}>
+        <div style={NAV_LOGIN_STYLE}>
+          <Col sm={16}>
             <Label style={LABEL_STYLE} className="small">{prompt}</Label>
           </Col>
-          <Col sm={3} className="text-right">
-            <Label style={LABEL_STYLE} className="small">{timestamp}</Label>
-          </Col>
-        </FormGroup>
+          </div>
       );
     }
 

build/app/unisys/server-network.js

@@ -198,7 +198,11 @@ const SERVER_UADDR      = NetMessage.DefaultServerUADDR(); // is 'SVR_01'
       m_heartbeat_interval = setInterval(function sendHeartbeat() {
         mu_sockets.forEach((socket, key, map) => {
           if (DBG) console.log(PR, 'sending heartbeat to', socket.UADDR);
-          socket.send('ping');
+          if (socket.readyState === socket.OPEN) {
+            socket.send("ping", (err) => {
+              if (err) console.log(PR, 'error "', err, '" while sending heartbeat to', socket.UADDR);
+            });
+          }
         });
       }, DEFS.SERVER_HEARTBEAT_INTERVAL);
     }
@@ -237,7 +241,10 @@ const SERVER_UADDR      = NetMessage.DefaultServerUADDR(); // is 'SVR_01'
 /*/ function m_SocketMessage(socket, json) {
         // Check Heartbeat
         if (json === 'pong') {
-          if (socket.UADDR === undefined) return; // Don't start the timer if we get a bad UADDR
+          if (socket.UADDR === undefined) {
+            console.log(PR, '!!!!!!!!!!!!!!!!!! Bad socket.UADDR', socket.UADDR, '! Skipping pong timer reset.');
+            return; // Don't start the timer if we get a bad UADDR
+          }
           m_ResetPongTimer(socket.UADDR);
           return;
         }

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

@@ -140,6 +140,7 @@ const UNISYS      = require('unisys/client');
 
 const MODE_STATIC   = 'static';   // Can't be edited ever
 const MODE_DISABLED = 'disabled'; // Can be edited, but not at the moment
+const MODE_LINK     = 'link';     // Can be edited, but not at the moment, and it links to a view until then
 const MODE_ACTIVE   = 'active';   // Currently able to edit
 
 var   _IsMounted  = false;
@@ -408,6 +409,8 @@ class AutoComplete extends UNISYS.Component {
         jsx = (<p>{this.props.disabledValue}</p>);
       } else if (this.props.inactiveMode === MODE_DISABLED) {
         jsx = (<Input type="text" value={this.props.disabledValue} readOnly={true} />);
+      } else if (this.props.inactiveMode === MODE_LINK){
+      jsx = (<a href="#" onClick={(e)=>this.selectNode(this.props.linkID,e)}>{this.props.disabledValue}</a>);
       } else {
         throw Error(`AutoComplete: Unhandled mode '${this.state.mode}'`);
       }
@@ -447,6 +450,17 @@ class AutoComplete extends UNISYS.Component {
       return jsx;
     } // render()
 
+    selectNode (id, event) {
+      event.preventDefault();
+      // REVIEW: For some reason React converts the integer IDs into string
+      // values when returned in event.target.value.  So we have to convert
+      // it here.
+      // Load Source
+      var UDATA = UNISYS.NewDataLink(this);
+      UDATA.LocalCall('EDGE_CLOSE');
+      UDATA.LocalCall('SOURCE_SELECT',{ nodeIDs: [parseInt(id)] });
+    }
+
 /// END OF CLASS //////////////////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 }

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

@@ -292,6 +292,14 @@ class EdgeEditor extends UNISYS.Component {
         this.handleEdgeEdit(data);
       });
 
+
+        /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+        UDATA.HandleMessage('EDGE_CLOSE',(data) => {
+          if (this.state.isExpanded)
+            this.setState({ isExpanded: false });
+        });
+
+
       // Template handler
       this.OnAppStateChange('TEMPLATE', this.setTemplate);
 
@@ -934,7 +942,8 @@ class EdgeEditor extends UNISYS.Component {
                   <AutoComplete
                     identifier={'edge'+edgeID+'source'}
                     disabledValue={sourceNode.label}
-                    inactiveMode={parentNodeLabel===sourceNode.label ? 'static' : 'disabled'}
+                    inactiveMode={parentNodeLabel===sourceNode.label ? 'static' : this.state.isEditable ? 'disabled' : 'link'}
+                    linkID={sourceNode.id}
                     shouldIgnoreSelection={!this.state.sourceIsEditable}
                     placeholder={this.state.placeholder}
                   />
@@ -979,7 +988,8 @@ class EdgeEditor extends UNISYS.Component {
                   <AutoComplete
                     identifier={'edge'+edgeID+'target'}
                     disabledValue={targetNode.label}
-                    inactiveMode={ ( parentNodeLabel===targetNode.label && !sameSourceAndTarget ) ? 'static' : 'disabled'}
+                    inactiveMode={ ( parentNodeLabel===targetNode.label && !sameSourceAndTarget ) ? 'static' : this.state.isEditable ? 'disabled' : 'link'}
+                    linkID={targetNode.id}
                     shouldIgnoreSelection={!this.state.targetIsEditable}
                     placeholder={this.state.placeholder}
                   />

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

@@ -342,7 +342,7 @@ class EdgeTable extends UNISYS.Component {
 `
       return (
            <div style={{overflow:'auto',
-                     position:'relative',display: 'block', right:'10px',maxHeight: tableHeight, backgroundColor:'#f3f3ff'
+                     position:'relative',display: 'block',  left: '1px', right:'10px',maxHeight: tableHeight, backgroundColor:'#f3f3ff'
              }}>
           <style>{styles}</style>
           <Button size="sm" outline hidden
@@ -359,12 +359,14 @@ class EdgeTable extends UNISYS.Component {
                     >ID {this.sortSymbol("id")}</Button></th>
                 <th hidden={!DBG}>Size</th>
                 <th width="5%"><div style={{color: '#f3f3ff'}}>_Edit_</div></th>
+                <th hidden={!DBG}>Src ID</th>
                 <th  width="10%"><Button size="sm"
                       onClick={()=>this.setSortKey("source")}
                     >{edgePrompts.source.label} {this.sortSymbol("source")}</Button></th>
                 <th width="10%"><Button size="sm"
                       onClick={()=>this.setSortKey("Relationship")}
                     >{edgePrompts.type.label} {this.sortSymbol("Relationship")}</Button></th>
+                <th hidden={!DBG}>Target ID</th>
                 <th width="10%"><Button size="sm"
                       onClick={()=>this.setSortKey("target")}
                     >{edgePrompts.target.label} {this.sortSymbol("target")}</Button></th>
@@ -383,6 +385,7 @@ class EdgeTable extends UNISYS.Component {
                 <th  width="16%"hidden={!isLocalHost}><Button size="sm"
                       onClick={()=>this.setSortKey("Updated")}
                     >Updated {this.sortSymbol("Updated")}</Button></th>
+
               </tr>
             </thead>
             <tbody style={{ maxHeight: tableHeight }}>
@@ -395,9 +398,11 @@ class EdgeTable extends UNISYS.Component {
                       onClick={this.onButtonClick}
                     >Edit</Button>
                 </td>
+                <td hidden={!DBG}>{edge.source.id}</td>
                 <td><a href="#" onClick={(e)=>this.selectNode(edge.source.id,e)}
                     >{edge.source.label || edge.source}</a></td>
                 <td>{edge.attributes["Relationship"]}</td>
+                <td hidden={!DBG}>{edge.target.id}</td>
                 <td><a href="#" onClick={(e)=>this.selectNode(edge.target.id,e)}
                     >{edge.target.label || edge.target}</a></td>
                 <td hidden={edgePrompts.category.hidden}>{edge.attributes["Category"]}</td>

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

@@ -16,6 +16,7 @@
 \*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ * //////////////////////////////////////*/
 
 var DBG = false;
+var UDATA = null;
 
 /// UNISYS INITIALIZE REQUIRES for REACT ROOT /////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -59,8 +60,9 @@ class InfoPanel extends UNISYS.Component {
     this.endDrag = this.endDrag.bind(this);
     this.handleDrag = this.handleDrag.bind(this);
     this.UpdateFilterSummary = this.UpdateFilterSummary.bind(this);
+    this.OnClearBtnClick = this.OnClearBtnClick.bind(this);
 
-    var UDATA = UNISYS.NewDataLink(this);
+    UDATA = UNISYS.NewDataLink(this);
     UDATA.HandleMessage("FILTER_SUMMARY_UPDATE", this.UpdateFilterSummary);
 
   } // constructor
@@ -111,9 +113,9 @@ class InfoPanel extends UNISYS.Component {
   }
   handleDrag(e) {
     e.stopPropagation();
-    // limit to 80 to keep from dragging up past the tabpanel
-    // 80 = navbar + tabpanel height
-    let top = Math.max(80, e.clientY + this.state.draggerMouseOffsetY);
+    // limit to 120 to keep from dragging up past the tabpanel
+    // 120 = navbar + tabpanel height
+    let top = Math.max(120, e.clientY + this.state.draggerMouseOffsetY);
     this.setState({
       tabpanelHeight: (top - this.state.tabpanelTop - 40) + 'px',
       tableHeight: (top - this.state.tabpanelTop) + 'px',
@@ -131,6 +133,10 @@ class InfoPanel extends UNISYS.Component {
     this.setState({ filtersSummary: data.filtersSummary });
   }
 
+   OnClearBtnClick() {
+    UDATA.LocalCall('FILTER_CLEAR');
+  }
+
 
   /// REACT LIFECYCLE METHODS ///////////////////////////////////////////////////
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -259,7 +265,7 @@ class InfoPanel extends UNISYS.Component {
         <div hidden={!hideDragger || filtersSummary===''}
           style={{ padding: '3px', fontSize: '0.8em', color:'#999', backgroundColor:'#eef'}}
         >
-          FILTERED BY: {filtersSummary}
+          FILTERED BY: {filtersSummary} <Button size="sm" outline onClick={this.OnClearBtnClick}>Clear Filters</Button>
         </div>
       </div>
     );

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

@@ -240,7 +240,7 @@ class NodeSelector extends UNISYS.Component {
       Ignore the request if we're already editing a node.
   /*/
       UDATA.HandleMessage("NODE_EDIT", (data) => {
-        if ( (data.nodeID!==undefined) && (typeof data.nodeID==="number") && !this.state.isEditable ) {
+        if ( (data.nodeID!==undefined) && (typeof data.nodeID==="number") && !this.state.isEditable && !this.state.isLocked ) {
           this.requestEditNode(data.nodeID);
         } else {
           console.error("NodeSelector.NODE_EDIT called with bad data.nodeID:", data.nodeID);
@@ -582,7 +582,7 @@ class NodeSelector extends UNISYS.Component {
       let isValid = false;
       let formData = this.state.formData;
 
-      if (formData.label!=='') isValid=true;
+      if (formData.label!=='' && formData.label!==undefined) isValid=true;
       if (DBG) console.log('NodeSElector.validateForm: Validating',isValid,'because label is',formData.label,'!');
       this.setState({
         isValid: isValid
@@ -877,7 +877,7 @@ class NodeSelector extends UNISYS.Component {
       // Update the data with the selectedNode
       let formData = this.state.formData;
       let node = {
-        label : formData.label,
+        label : formData.label?formData.label:'',
         id    : formData.id,
         attributes: {
           'Node_Type'  : formData.type,

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

@@ -92,11 +92,11 @@ class NodeTable extends UNISYS.Component {
     // {}
 
     if (data.nodes) {
-      const edgeCounts = this.countEdges(data.edges);
-      const nodes = this.sortTable('label', data.nodes);
+      // const edgeCounts = this.countEdges(data.edges);
+      const nodes = this.sortTable(this.state.sortkey, data.nodes);
       this.setState({
         nodes: nodes,
-        edgeCounts: edgeCounts
+        // edgeCounts: edgeCounts
       });
     }
   }
@@ -107,8 +107,9 @@ OnTemplateUpdate(data) {
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /*/ Build table of counts
 /*/
+// JD removed because "size" seemed to work just fine? (I added a degrees that is size - 1)
 countEdges(edges) {
-  let edgeCounts = this.state.edgeCounts;
+  let edgeCounts = {}; // this.state.edgeCounts;
   edges.forEach(edge => {
     edgeCounts[edge.source.id] = edgeCounts[edge.source.id] !== undefined ? edgeCounts[edge.source.id] + 1 : 1;
     edgeCounts[edge.target.id] = edgeCounts[edge.target.id] !== undefined ? edgeCounts[edge.target.id] + 1 : 1;
@@ -135,10 +136,10 @@ countEdges(edges) {
 /*/
 /*/ sortByEdgeCount(nodes) {
       if (nodes) {
-        let edgeCounts = this.state.edgeCounts;
+        // let edgeCounts = this.state.edgeCounts;
         return nodes.sort( (a, b) => {
-          let akey = edgeCounts[a.id] || 0,
-            bkey = edgeCounts[b.id] || 0;
+            let akey = a.degrees || 0,
+              bkey = b.degrees || 0;
           // sort descending
           if (akey > bkey) return 1*this.sortDirection;
           if (akey < bkey) return -1*this.sortDirection;
@@ -151,8 +152,8 @@ countEdges(edges) {
 /*/ sortByLabel (nodes) {
       if (nodes) {
         return nodes.sort( (a,b) => {
-          let akey = a.label,
-              bkey = b.label;
+          let akey = a.label?a.label:'',
+              bkey = b.label?b.label:'';
           return (akey.localeCompare(bkey)*this.sortDirection);
         });
       }
@@ -297,7 +298,7 @@ render() {
                 `
   return (
       <div style={{overflow:'auto',
-                  position:'relative',display: 'block', right:'10px',maxHeight: tableHeight, backgroundColor:'#eafcff'
+                  position:'relative',display: 'block', left: '1px', right:'10px',maxHeight: tableHeight, backgroundColor:'#eafcff'
       }}>
       <style>{styles}</style>
       <Button size="sm" outline hidden
@@ -310,6 +311,7 @@ render() {
         <thead>
           <tr>
             <th width="4%"><div style={{color: '#f3f3ff'}}>_Edit_</div></th>
+            <th hidden={!DBG}>ID</th>
             <th width="12%"><Button size="sm"
                   onClick={() => this.setSortKey("edgeCount")}
                 >{nodePrompts.degrees.label} {this.sortSymbol("edgeCount")}</Button></th>
@@ -341,7 +343,8 @@ render() {
                   onClick={this.onButtonClick}
                 >Edit</Button>
             </td>
-            <td>{this.state.edgeCounts[node.id]}</td>
+            <td hidden={!DBG}>{node.id}</td>
+            <td>{node.degrees}</td>
             <td><a href="#" onClick={(e)=>this.selectNode(node.id,e)}
                 >{node.label}</a></td>
             <td hidden={nodePrompts.type.hidden}>{node.attributes["Node_Type"]}</td>