From ffd531e44a113ef56bce63aadaf4f0e06d102b66 Mon Sep 17 00:00:00 2001
From: Simon Howe <footless@gmail.com>
Date: Mon, 26 Jun 2017 13:28:04 +0200
Subject: [PATCH 1/2] Show multiple relatives in the nodes-grid view

---
 .../node-details/node-details-table-row.js    | 47 ++++++++++++++-----
 client/app/scripts/utils/array-utils.js       |  4 ++
 2 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/client/app/scripts/components/node-details/node-details-table-row.js b/client/app/scripts/components/node-details/node-details-table-row.js
index 5b48831ab..1b7277013 100644
--- a/client/app/scripts/components/node-details/node-details-table-row.js
+++ b/client/app/scripts/components/node-details/node-details-table-row.js
@@ -1,5 +1,10 @@
 import React from 'react';
 import classNames from 'classnames';
+import groupBy from 'lodash/groupBy';
+import forEach from 'lodash/forEach';
+import mapValues from 'lodash/mapValues';
+import { intersperse } from '../../utils/array-utils';
+
 
 import NodeDetailsTableNodeLink from './node-details-table-node-link';
 import NodeDetailsTableNodeMetric from './node-details-table-node-metric';
@@ -17,22 +22,28 @@ function getValuesForNode(node) {
     }
   });
 
-  (node.parents || []).forEach((p) => {
-    values[p.topologyId] = {
-      id: p.topologyId,
-      label: p.topologyId,
-      value: p.label,
-      relative: p,
+  if (node.parents) {
+    const byTopologyId = groupBy(node.parents, parent => parent.topologyId);
+    const relativesByTopologyId = mapValues(byTopologyId, (relatives, topologyId) => ({
+      id: topologyId,
+      label: topologyId,
+      value: relatives.map(relative => relative.label).join(', '),
       valueType: 'relatives',
-    };
-  });
+      relatives,
+    }));
+
+    forEach(relativesByTopologyId, (columnData, topologyId) => {
+      values[topologyId] = columnData;
+    });
+  }
 
   return values;
 }
 
+
 function renderValues(node, columns = [], columnStyles = [], timestamp = null) {
   const fields = getValuesForNode(node);
-  return columns.map(({id}, i) => {
+  return columns.map(({ id }, i) => {
     const field = fields[id];
     const style = columnStyles[i];
     if (field) {
@@ -55,18 +66,28 @@ function renderValues(node, columns = [], columnStyles = [], timestamp = null) {
             title={field.value}
             style={style}
             key={field.id}>
-            {<NodeDetailsTableNodeLink linkable nodeId={field.relative.id} {...field.relative} />}
+            {intersperse(field.relatives.map(relative =>
+              <NodeDetailsTableNodeLink
+                key={relative.id}
+                linkable
+                nodeId={relative.id}
+                {...relative}
+              />
+            ), ' ')}
           </td>
         );
       }
-      return <NodeDetailsTableNodeMetric style={style} key={field.id} {...field} />;
+      return (
+        <NodeDetailsTableNodeMetric style={style} key={field.id} {...field} />
+      );
     }
     // empty cell to complete the row for proper hover
-    return <td className="node-details-table-node-value" style={style} key={id} />;
+    return (
+      <td className="node-details-table-node-value" style={style} key={id} />
+    );
   });
 }
 
-
 export default class NodeDetailsTableRow extends React.Component {
   constructor(props, context) {
     super(props, context);
diff --git a/client/app/scripts/utils/array-utils.js b/client/app/scripts/utils/array-utils.js
index 0f962755c..8c4ac8562 100644
--- a/client/app/scripts/utils/array-utils.js
+++ b/client/app/scripts/utils/array-utils.js
@@ -26,3 +26,7 @@ export function moveElement(array, from, to) {
   }
   return insertElement(removeElement(array, from), to, array[from]);
 }
+
+export function intersperse(items, value) {
+  return [].concat(...items.map(e => [value, e])).slice(1);
+}

From ee55d17b0efa9edbcb4143c9ecfb8c544e0a2381 Mon Sep 17 00:00:00 2001
From: Simon Howe <footless@gmail.com>
Date: Mon, 3 Jul 2017 17:49:37 +0200
Subject: [PATCH 2/2] Review feedback on supporting multiple relatives in
 node-grid columns

---
 .../node-details/node-details-table-row.js          | 13 ++++++-------
 client/app/scripts/utils/array-utils.js             |  9 +++++++++
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/client/app/scripts/components/node-details/node-details-table-row.js b/client/app/scripts/components/node-details/node-details-table-row.js
index 1b7277013..2f17cd33c 100644
--- a/client/app/scripts/components/node-details/node-details-table-row.js
+++ b/client/app/scripts/components/node-details/node-details-table-row.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import groupBy from 'lodash/groupBy';
-import forEach from 'lodash/forEach';
-import mapValues from 'lodash/mapValues';
+import { groupBy, mapValues } from 'lodash';
 import { intersperse } from '../../utils/array-utils';
 
 
@@ -11,7 +9,7 @@ import NodeDetailsTableNodeMetric from './node-details-table-node-metric';
 import { formatDataType } from '../../utils/string-utils';
 
 function getValuesForNode(node) {
-  const values = {};
+  let values = {};
   ['metrics', 'metadata'].forEach((collection) => {
     if (node[collection]) {
       node[collection].forEach((field) => {
@@ -32,9 +30,10 @@ function getValuesForNode(node) {
       relatives,
     }));
 
-    forEach(relativesByTopologyId, (columnData, topologyId) => {
-      values[topologyId] = columnData;
-    });
+    values = {
+      ...values,
+      ...relativesByTopologyId,
+    };
   }
 
   return values;
diff --git a/client/app/scripts/utils/array-utils.js b/client/app/scripts/utils/array-utils.js
index 8c4ac8562..2ad6218a6 100644
--- a/client/app/scripts/utils/array-utils.js
+++ b/client/app/scripts/utils/array-utils.js
@@ -28,5 +28,14 @@ export function moveElement(array, from, to) {
 }
 
 export function intersperse(items, value) {
+  //
+  // intersperse([1, 2, 3], 'a') => [1, 'a', 2, 'a', 3]
+  //
+  // Useful for when you wanna do: [<MyReactListItem />, <MyReactListItem />].join(' ')
+  // But you can't because React Components aren't strings.
+  //
+  // intersperse([<MyReactListItem />, <MyReactListItem />], ' ')
+  // Will get you there!
+  //
   return [].concat(...items.map(e => [value, e])).slice(1);
 }