diff --git a/frontend/src/Metamaps/GlobalUI/ReactApp.js b/frontend/src/Metamaps/GlobalUI/ReactApp.js index 3393a951..5290fe12 100644 --- a/frontend/src/Metamaps/GlobalUI/ReactApp.js +++ b/frontend/src/Metamaps/GlobalUI/ReactApp.js @@ -113,6 +113,7 @@ const ReactApp = { self.getFilterProps(), self.getCommonProps(), self.getMapsProps(), + self.getContextMenuProps(), self.getTopicCardProps(), self.getChatProps()) }, @@ -155,6 +156,29 @@ const ReactApp = { onTopicFollow: Topic.onTopicFollow } }, + getContextMenuProps: function() { + const self = ReactApp + return { + // values + contextMenu: !!(ContextMenu.clickedNode || ContextMenu.clickedEdge), + contextNode: ContextMenu.clickedNode, + contextEdge: ContextMenu.clickedEdge, + contextPos: ContextMenu.pos, + contextFetchingSiblingsData: ContextMenu.fetchingSiblingsData, + contextSiblingsData: ContextMenu.siblingsData, + // functions + contextReset: ContextMenu.reset, + contextDelete: ContextMenu.delete, + contextRemove: ContextMenu.remove, + contextHide: ContextMenu.hide, + contextCenterOn: ContextMenu.centerOn, + contextPopoutTopic: ContextMenu.popoutTopic, + contextUpdatePermissions: ContextMenu.updatePermissions, + contextOnMetacodeSelect: ContextMenu.onMetacodeSelect, + contextFetchSiblings: ContextMenu.fetchSiblings, + contextPopulateSiblings: ContextMenu.populateSiblings + } + }, getTopicProps: function() { const self = ReactApp return { diff --git a/frontend/src/Metamaps/Listeners.js b/frontend/src/Metamaps/Listeners.js index 352b5f7f..a5dc630f 100644 --- a/frontend/src/Metamaps/Listeners.js +++ b/frontend/src/Metamaps/Listeners.js @@ -152,12 +152,12 @@ const Listeners = { var node = nodes[nodes.length - 1] if (opts.center && opts.reveal) { Topic.centerOn(node.id, function() { - Topic.fetchRelatives(nodes) + Topic.fetchSiblings(nodes) }) } else if (opts.center) { Topic.centerOn(node.id) } else if (opts.reveal) { - Topic.fetchRelatives(nodes) + Topic.fetchSiblings(nodes) } } } diff --git a/frontend/src/Metamaps/Topic.js b/frontend/src/Metamaps/Topic.js index 0054ad55..16b28570 100644 --- a/frontend/src/Metamaps/Topic.js +++ b/frontend/src/Metamaps/Topic.js @@ -74,7 +74,7 @@ const Topic = { } }, centerOn: function(nodeid, callback) { - // don't clash with fetchRelatives + // don't clash with fetchSiblings if (!Visualize.mGraph.busy) { Visualize.mGraph.onClick(nodeid, { hideLabels: false, @@ -100,7 +100,7 @@ const Topic = { } ReactApp.render() }, - fetchRelatives: function(nodes, metacodeId) { + fetchSiblings: function(nodes, metacodeId) { var self = this var node = $.isArray(nodes) ? nodes[0] : nodes @@ -156,7 +156,7 @@ const Topic = { }) }) if ($.isArray(nodes) && nodes.length > 1) { - self.fetchRelatives(nodes.slice(1), metacodeId) + self.fetchSiblings(nodes.slice(1), metacodeId) } } diff --git a/frontend/src/Metamaps/Views/ContextMenu.js b/frontend/src/Metamaps/Views/ContextMenu.js index be799b4b..427a50f6 100644 --- a/frontend/src/Metamaps/Views/ContextMenu.js +++ b/frontend/src/Metamaps/Views/ContextMenu.js @@ -1,6 +1,6 @@ import Control from '../Control' import DataModel from '../DataModel' -import ReactApp from '../GlobalUI/ReactApp' +import { ReactApp } from '../GlobalUI' import Selected from '../Selected' import Topic from '../Topic' @@ -8,11 +8,13 @@ const ContextMenu = { clickedNode: null, clickedEdge: null, pos: {x: 0, y: 0}, + fetchingSiblingsData: false, siblingsData: null, selectNode: (node, pos) => { ContextMenu.pos = pos ContextMenu.clickedNode = node ContextMenu.clickedEdge = null + ContextMenu.fetchingSiblingsData = false ContextMenu.siblingsData = null ReactApp.render() }, @@ -20,16 +22,21 @@ const ContextMenu = { ContextMenu.pos = pos ContextMenu.clickedNode = null ContextMenu.clickedEdge = edge + ContextMenu.fetchingSiblingsData = false ContextMenu.siblingsData = null ReactApp.render() }, reset: () => { + ContextMenu.fetchingSiblingsData = false ContextMenu.siblingsData = null ContextMenu.clickedNode = null ContextMenu.clickedEdge = null ReactApp.render() }, - delete: Control.deleteSelected, + delete: () => { + Control.deleteSelected() + ContextMenu.reset() + }, remove: () => { Control.removeSelectedEdges() Control.removeSelectedNodes() @@ -66,39 +73,27 @@ const ContextMenu = { } ContextMenu.reset() }, - fetchRelatives: (node, metacodeId) => { - Topic.fetchRelatives(node, metacodeId) + fetchSiblings: (node, metacodeId) => { + Topic.fetchSiblings(node, metacodeId) ContextMenu.reset() }, populateSiblings: function(id) { // depending on how many topics are selected, do different things - - // add a loading icon for now - /*const loader = new CanvasLoader('loadingSiblings') - loader.setColor('#4FC059') // default is '#000000' - loader.setDiameter(15) // default is 40 - loader.setDensity(41) // default is 40 - loader.setRange(0.9) // default is 1.3 - loader.show() // Hidden by default*/ + ContextMenu.fetchingSiblingsData = true + ReactApp.render() const topics = DataModel.Topics.map(function(t) { return t.id }) const topicsString = topics.join() const successCallback = function(data) { + ContextMenu.fetchingSiblingsData = false + + // adjust the data for consumption by react + for (var key in data) { + data[key] = `${DataModel.Metacodes.get(key).get('name')} (${data[key]})` + } ContextMenu.siblingsData = data ReactApp.render() - /*$('#loadingSiblings').remove() - - for (var key in data) { - const string = `${DataModel.Metacodes.get(key).get('name')} (${data[key]})` - $('#fetchSiblingList').append(`