Graph selection info

src/app.js

@@ -154,7 +154,6 @@ class App extends Component {
     if (!this.props.sourceNode.id && !this.props.targetNode.id)
       return;
     const title =
-      'hetmech · ' +
       (this.props.sourceNode.name || '___') +
       ' → ' +
       (this.props.targetNode.name || '___');

src/node-results.js

@@ -9,6 +9,8 @@ import { Tooltip } from './tooltip.js';
 import { TextButton } from './buttons.js';
 import { DynamicField } from './dynamic-field.js';
 import { CollapsibleSection } from './collapsible-section.js';
+import { shortenUrl } from './util.js';
+import { sortCustom } from './util.js';
 
 // node results section component
 // details about source/target nodes
@@ -68,38 +70,26 @@ class TableFull extends Component {
 
   // display row entries
   rows() {
-    // explicitly specify and order primary fields
-    let fields = ['name', 'metanode', 'identifier', 'source'];
-
-    if (this.state.showMore) {
-      // get 'extra fields' from node 'data' field
-      let extraFields = Object.keys(this.props.node.data);
-      // remove unnecessary fields
-      extraFields.splice(extraFields.indexOf('source'), 1);
-      extraFields.splice(extraFields.indexOf('url'), 1);
-      // sort extra fields alphabetically
-      extraFields = extraFields.sort();
-      // add 'id' to beginning of extra fields
-      extraFields.unshift('id');
-      // append 'extraFields' to primary 'fields'
-      fields = fields.concat(extraFields);
+    // helper text when user hovers over given field
+    let tooltipText = {};
+    if (this.props.hetioDefinitions.properties) {
+      tooltipText = {
+        ...tooltipText,
+        ...this.props.hetioDefinitions.properties.common,
+        ...this.props.hetioDefinitions.properties.nodes
+      };
     }
+    tooltipText = { ...tooltipText, ...this.props.hetmechDefinitions };
 
-    // determine contents of first and second column for each row entry
-    return fields.map((field, index) => {
-      // set first col to field name
-      const firstCol = field;
-      // default second col to field value in node
-      let secondCol = this.props.node[field];
-      if (secondCol === undefined)
-        secondCol = this.props.node.data[field];
-      if (secondCol === undefined)
-        secondCol = '';
-
+    // get primary fields from top level of node
+    let primaryFields = ['name', 'metanode', 'source', 'identifier', 'id'];
+    // get first/second column text (key/value) for each field
+    primaryFields = primaryFields.map((field) => {
       // handle special field cases
+      let specialSecondCol;
       if (field === 'metanode') {
         // make text with metanode chip
-        secondCol = (
+        specialSecondCol = (
           <>
             <MetanodeChip type={this.props.node[field]} />
             <span className='nowrap'>{this.props.node[field]}</span>
@@ -110,32 +100,70 @@ class TableFull extends Component {
         const linkUrl = this.props.node.url || this.props.node.data.url || '';
         let linkText = this.props.node.data.source || linkUrl;
         linkText = shortenUrl(linkText);
-        secondCol = (
+        specialSecondCol = (
           <a className='nowrap' href={linkUrl}>
             {linkText}
           </a>
         );
       }
+      // get first/second column text (key/value) for each field
+      return {
+        firstCol: field,
+        secondCol: specialSecondCol || String(this.props.node[field]),
+        tooltipText: tooltipText[field]
+      };
+    });
+    // remove id and identifier if table not expanded
+    if (!this.state.showMore) {
+      primaryFields.splice(
+        primaryFields.findIndex((field) => field.firstCol === 'id'),
+        1
+      );
+      primaryFields.splice(
+        primaryFields.findIndex((field) => field.firstCol === 'identifier'),
+        1
+      );
+    }
 
-      // helper text when user hovers over given field
-      let tooltipText = {};
-      if (this.props.hetioDefinitions.properties) {
-        tooltipText = {
-          ...tooltipText,
-          ...this.props.hetioDefinitions.properties.common,
-          ...this.props.hetioDefinitions.properties.nodes
-        };
-      }
-      tooltipText = { ...tooltipText, ...this.props.hetmechDefinitions };
+    // get 'extra fields' from node 'data' field
+    let extraFields = [];
+    if (this.state.showMore) {
+      extraFields = Object.keys(this.props.node.data);
+      // remove source and url, since they are combined and added to
+      // primary fields above
+      extraFields.splice(extraFields.indexOf('source'), 1);
+      extraFields.splice(extraFields.indexOf('url'), 1);
+      // get first/second column text (key/value) for each field
+      extraFields = extraFields.map((field) => ({
+        firstCol: field,
+        secondCol: String(this.props.node.data[field]),
+        tooltipText: tooltipText[field]
+      }));
+    }
 
-      // return row entry
+    // combine primary and extra fields
+    let fields = primaryFields.concat(extraFields);
+
+    // display fields in custom order
+    const order = [
+      'name',
+      'metanode',
+      'source',
+      'description',
+      'identifier',
+      'id'
+    ];
+    fields = sortCustom(fields, order, 'firstCol');
+
+    // make rows from fields
+    return fields.map((field, index) => {
       return (
         <tr key={index}>
-          <td className='col_s small light left'>
-            <Tooltip text={tooltipText[field]}>{firstCol}</Tooltip>
+          <td className='col_s small light'>
+            <Tooltip text={field.tooltipText}>{field.firstCol}</Tooltip>
           </td>
           <td>
-            <DynamicField value={secondCol} className='left' />
+            <DynamicField value={field.secondCol} className='left' />
           </td>
         </tr>
       );
@@ -186,12 +214,3 @@ class TableEmpty extends Component {
     );
   }
 }
-
-// remove unnecessary preceding 'www.' and etc from url
-function shortenUrl(url) {
-  const remove = ['http://', 'https://', 'www.'];
-  for (const str of remove)
-    url = url.replace(str, '');
-
-  return url;
-}

src/path-graph.css

@@ -6,12 +6,28 @@
   border: solid #e0e0e0 1px;
   position: absolute;
 }
-#graph * {
-  user-select: none;
-}
 .graph_dimensions {
   margin: 0 10px;
 }
 .graph_expand_collapse_button {
   margin: 0 !important;
 }
+#graph_overlay {
+  pointer-events: none;
+}
+#graph_info {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  font-size: 8px;
+}
+.graph_info_header {
+  margin-top: 10px;
+  font-weight: 500;
+}
+#graph_info_table {
+  margin-top: 5px;
+}
+#graph_info_table td {
+  height: 20px;
+}