From 19b5d8cbfcb02c0946ed5518a29ca8159a04d1c9 Mon Sep 17 00:00:00 2001 From: Logan Allen Date: Thu, 24 Sep 2020 14:59:15 -0500 Subject: [PATCH] interface: ported in Liam's graph-update reducer and threaded through some display parameters into LinkItem --- pkg/interface/src/logic/lib/OrderedMap.ts | 22 +++++++++++++++ .../src/logic/reducers/graph-update.js | 28 ++++++++++--------- pkg/interface/src/logic/store/store.ts | 1 - pkg/interface/src/views/apps/links/app.js | 1 + .../apps/links/components/lib/link-item.js | 8 ++++-- .../views/apps/links/components/link-list.js | 9 ++++-- 6 files changed, 50 insertions(+), 19 deletions(-) create mode 100644 pkg/interface/src/logic/lib/OrderedMap.ts diff --git a/pkg/interface/src/logic/lib/OrderedMap.ts b/pkg/interface/src/logic/lib/OrderedMap.ts new file mode 100644 index 000000000..a640c2906 --- /dev/null +++ b/pkg/interface/src/logic/lib/OrderedMap.ts @@ -0,0 +1,22 @@ + +export class OrderedMap extends Map + 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 }; + } + }, + }; + } +} diff --git a/pkg/interface/src/logic/reducers/graph-update.js b/pkg/interface/src/logic/reducers/graph-update.js index 5589e220c..00a5153a0 100644 --- a/pkg/interface/src/logic/reducers/graph-update.js +++ b/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) => { }); } }; - diff --git a/pkg/interface/src/logic/store/store.ts b/pkg/interface/src/logic/store/store.ts index aab7823db..3e02e25ac 100644 --- a/pkg/interface/src/logic/store/store.ts +++ b/pkg/interface/src/logic/store/store.ts @@ -43,7 +43,6 @@ export default class GlobalStore extends BaseStore { this.localReducer.dehydrate(this.state); } - initialState(): StoreState { return { pendingMessages: new Map(), diff --git a/pkg/interface/src/views/apps/links/app.js b/pkg/interface/src/views/apps/links/app.js index 3994f7c5c..962ea1ac5 100644 --- a/pkg/interface/src/views/apps/links/app.js +++ b/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('-'); diff --git a/pkg/interface/src/views/apps/links/components/lib/link-item.js b/pkg/interface/src/views/apps/links/components/lib/link-item.js index 99223fe88..2f99cc3cd 100644 --- a/pkg/interface/src/views/apps/links/components/lib/link-item.js +++ b/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 - ? - : ; + ? + : ; return (
diff --git a/pkg/interface/src/views/apps/links/components/link-list.js b/pkg/interface/src/views/apps/links/components/link-list.js index eb87d9d22..54adb00f1 100644 --- a/pkg/interface/src/views/apps/links/components/link-list.js +++ b/pkg/interface/src/views/apps/links/components/link-list.js @@ -68,12 +68,17 @@ export const LinkList = (props) => { ship={props.ship} api={props.api} />
- { Array.from(props.graph.values()).reverse().map((node) => { + { Array.from(props.graph.values()).map((node) => { + const { nickname, color, avatar } = + getContactDetails(props.contacts[ship]); + return (