From e290244404ebb8f81eb3f1a9ee8909aaa0c6ef7e Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Mon, 18 Sep 2017 23:30:33 -0400 Subject: [PATCH] beginning to come together --- frontend/src/Metamaps/GlobalUI/ReactApp.js | 24 +++++ frontend/src/Metamaps/Listeners.js | 4 +- frontend/src/Metamaps/Topic.js | 6 +- frontend/src/Metamaps/Views/ContextMenu.js | 43 ++++---- frontend/src/components/MapView/index.js | 9 +- frontend/src/components/TopicView/index.js | 5 +- frontend/src/components/common/ContextMenu.js | 99 ++++++++++++++++--- 7 files changed, 144 insertions(+), 46 deletions(-) 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(`
  • ${string}
  • `) - } - - $('.rc-siblings .getSiblings').click(function() { - $('.rightclickmenu').remove() - // data-id is a metacode id - Topic.fetchRelatives(node, $(this).attr('data-id')) - })*/ } $.ajax({ diff --git a/frontend/src/components/MapView/index.js b/frontend/src/components/MapView/index.js index fe8c23b1..3e51691d 100644 --- a/frontend/src/components/MapView/index.js +++ b/frontend/src/components/MapView/index.js @@ -1,6 +1,7 @@ -import React, { Component } from 'react' + import React, { Component } from 'react' import PropTypes from 'prop-types' +import ContextMenu from '../common/ContextMenu' import DataVis from '../common/DataVis' import UpperOptions from '../common/UpperOptions' import InfoAndHelp from '../common/InfoAndHelp' @@ -9,9 +10,11 @@ import VisualizationControls from '../common/VisualizationControls' import MapChat from './MapChat' import TopicCard from '../TopicCard' + export default class MapView extends Component { static propTypes = { + contextMenu: PropTypes.bool, mobile: PropTypes.bool, mapId: PropTypes.string, map: PropTypes.object, @@ -79,7 +82,8 @@ export default class MapView extends Component { filterAllMappers, filterAllSynapses, filterData, openImportLightbox, forkMap, openHelpLightbox, mapIsStarred, onMapStar, onMapUnstar, openTopic, - onZoomExtents, onZoomIn, onZoomOut, hasLearnedTopicCreation } = this.props + onZoomExtents, onZoomIn, onZoomOut, hasLearnedTopicCreation, + contextMenu } = this.props const { chatOpen } = this.state const onChatOpen = () => { this.setState({chatOpen: true}) @@ -109,6 +113,7 @@ export default class MapView extends Component { filterAllSynapses={filterAllSynapses} /> {openTopic && } + {contextMenu && } {currentUser && } {currentUser && this.mapChat = x} />} this.upperOptions = x} @@ -73,6 +75,7 @@ export default class TopicView extends Component { filterAllSynapses={filterAllSynapses} /> + {contextMenu && } { + if (!this.state.populateSiblingsSent) { + contextPopulateSiblings(contextNode.id) + this.setState({populateSiblingsSent: true}) + } + } + + // TODO: add checks for logged in and other context return
    • -
      Hide until refresh
      Ctrl+H
      +
      Hide until refresh +
      Ctrl+H
    • -
      Remove from map
      Ctrl+M
      +
      Remove from map +
      Ctrl+M
    • -
      Delete
      Ctrl+D
      +
      Delete +
      Ctrl+D
    • -
      Open in new tab +
      Open in new tab
    • -
      Change permissions +
      Change permissions
        -
      • commons
      • -
      • public
      • -
      • private
      • +
      • +
        commons +
      • +
      • +
        public +
      • +
      • +
        private +
      -
      +
    • +
      Change metacode +
      + +
      +
    • + {contextNode && topicId &&
    • +
      Reveal siblings +
        +
      • contextFetchSiblings(contextNode)}>All +
        Alt+R
        +
      • + {contextSiblingsData && Object.keys(contextSiblingsData).map(key => { + return
      • contextFetchSiblings(contextNode, key)}> + {contextSiblingsData[key]} +
      • + })} + {contextFetchingSiblingsData &&
      • loading
      • } +
      +
      +
    • }