interface: ported in Liam's graph-update reducer and threaded through some display parameters into LinkItem

pkg/interface/src/logic/lib/OrderedMap.ts

@@ -0,0 +1,22 @@
+
+export class OrderedMap<V> extends Map<number, V>
+  implements Iterable<[number, V]> {
+
+  [Symbol.iterator](): IterableIterator<[number, V]> {
+    const sorted = Array.from(super[Symbol.iterator]()).sort(
+      ([a], [b]) => b - a
+    );
+
+    let index = 0;
+    return {
+      [Symbol.iterator]: this[Symbol.iterator],
+      next: (): IteratorResult<[number, V]> => {
+        if (index < sorted.length) {
+          return { value: sorted[index++], done: false };
+        } else {
+          return { done: true, value: null };
+        }
+      },
+    };
+  }
+}

pkg/interface/src/logic/reducers/graph-update.js

@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import { OrderedMap } from "~/logic/lib/OrderedMap";
 
 
 export const GraphReducer = (json, state) => {
@@ -17,11 +18,6 @@ const keys = (json, state) => {
   if (data) {
     state.graphKeys = new Set(data.map((res) => {
       let resource = res.ship + '/' + res.name;
-
-      if (!(resource in state.graphs)) {
-        state.graphs[resource] = new Map();
-      }
-
       return resource;
     }));
   }
@@ -32,12 +28,12 @@ const addGraph = (json, state) => {
   const _processNode = (node) => {
     //  is empty
     if (!node.children) {
-      node.children = new Map();
+      node.children = new OrderedMap();
       return node;
     }
 
     //  is graph
-    let converted = new Map();
+    let converted = new OrderedMap();
     for (let i in node.children) {
       let item = node.children[i];
       let index = item[0].split('/').slice(1).map((ind) => {
@@ -62,7 +58,7 @@ const addGraph = (json, state) => {
     }
 
     let resource = data.resource.ship + '/' + data.resource.name;
-    state.graphs[resource] = new Map();
+    state.graphs[resource] = new OrderedMap();
 
     for (let i in data.graph) {
       let item = data.graph[i];
@@ -86,12 +82,19 @@ const removeGraph = (json, state) => {
     if (!('graphs' in state)) {
       state.graphs = {};
     }
-    let resource = data.ship + '/' + data.name;
+    let resource = data.resource.ship + '/' + data.resource.name;
     delete state.graphs[resource];
-    state.graphKeys.delete(resource);
   }
 };
 
+const mapifyChildren = (children) => {
+  return new OrderedMap(
+    children.map(([idx, node]) => {
+      const nd = {...node, children: mapifyChildren(node.children || []) }; 
+      return [parseInt(idx.slice(1), 10), nd];
+    }));
+};
+
 const addNodes = (json, state) => {
   const _addNode = (graph, index, node) => {
     //  set child of graph
@@ -128,8 +131,8 @@ const addNodes = (json, state) => {
 
       if (index.length === 0) { return; }
 
-      //  TODO: support adding nodes with children
-      item[1].children = new Map();
+      item[1].children = mapifyChildren(item[1].children || []);
+
       
       state.graphs[resource] = _addNode(
         state.graphs[resource],
@@ -167,4 +170,3 @@ const removeNodes = (json, state) => {
     });
   }
 };
-

pkg/interface/src/logic/store/store.ts

@@ -43,7 +43,6 @@ export default class GlobalStore extends BaseStore<StoreState> {
     this.localReducer.dehydrate(this.state);
   }
 
-
   initialState(): StoreState {
     return {
       pendingMessages: new Map(),

pkg/interface/src/views/apps/links/app.js

@@ -185,6 +185,7 @@ export default class LinksApp extends Component {
                 associations.graph[metPath] ?
                   associations.graph[metPath] : { metadata: {} };
               const popout = props.match.url.includes('/popout/');
+
               const contactDetails = contacts[resource['group-path']] || {};
 
               const indexArr = props.match.params.index.split('-');

pkg/interface/src/views/apps/links/components/lib/link-item.js

@@ -8,6 +8,8 @@ export const LinkItem = (props) => {
   const {
     node,
     nickname,
+    color,
+    avatar,
     resource,
     hideAvatars,
     hideNicknames
@@ -18,14 +20,14 @@ export const LinkItem = (props) => {
   const size = node.children ? node.children.size : 0;
   const contents = node.post.contents;
 
-  const showAvatar = props.avatar && !hideAvatars;
+  const showAvatar = avatar && !hideAvatars;
   const showNickname = nickname && !hideNicknames;
 
   const mono = showNickname ? 'inter white-d' : 'mono white-d';
 
   const img = showAvatar
-    ? <img src={props.avatar} height={38} width={38} className="dib" />
-    : <Sigil ship={`~${author}`} size={38} color={'#' + props.color} />;
+    ? <img src={avatar} height={38} width={38} className="dib" />
+    : <Sigil ship={`~${author}`} size={38} color={'#' + color} />;
 
   return (
     <div className="w-100 pv3 flex bg-white bg-gray0-d lh-solid">

pkg/interface/src/views/apps/links/components/link-list.js

@@ -68,12 +68,17 @@ export const LinkList = (props) => {
               ship={props.ship}
               api={props.api} />
           </div>
-          { Array.from(props.graph.values()).reverse().map((node) => {
+          { Array.from(props.graph.values()).map((node) => {
+              const { nickname, color, avatar } =
+                getContactDetails(props.contacts[ship]);
+
               return (
                 <LinkItem
                   resource={resource}
                   node={node}
-                  nickname={props.metadata.nickname}
+                  nickname={nickname}
+                  color={color}
+                  avatar={avatar}
                   hideAvatars={props.hideAvatars}
                   hideNicknames={props.hideNicknames}
                 />