reenable topic view in react

frontend/src/Metamaps/GlobalUI/CreateMap.js

@@ -61,7 +61,7 @@ const CreateMap = {
     if (GlobalUI.lightbox === 'forkmap') {
       self.newMap.set('topicsToMap', self.topicsToMap)
       self.newMap.set('synapsesToMap', self.synapsesToMap)
-      self.newMap.set('source_id', Active.Map.id)
+      if (Active.Map) self.newMap.set('source_id', Active.Map.id)
     }
 
     var formId = GlobalUI.lightbox === 'forkmap' ? '#fork_map' : '#new_map'

frontend/src/Metamaps/GlobalUI/ReactApp.js

@@ -28,6 +28,7 @@ const MAX_COLUMNS = 4
 
 const ReactApp = {
   mapId: null,
+  topicId: null,
   unreadNotificationsCount: 0,
   mapsWidth: 0,
   toast: '',
@@ -60,15 +61,21 @@ const ReactApp = {
         $('#yield').hide()
         ExploreMaps.updateFromPath(pathname)
         self.mapId = null
+        self.topicId = null
         Active.Map = null
         Active.Topic = null
         break
       case 'topics':
         $('#yield').hide()
+        Active.Map = null
+        self.mapId = null
+        self.topicId = pathname.split('/')[2]
         break
       case 'maps':
         if (!pathname.includes('request_access')) {
           $('#yield').hide()
+          Active.Topic = null
+          self.topicId = null
           self.mapId = pathname.split('/')[2]
         }
         break
@@ -101,6 +108,7 @@ const ReactApp = {
     self.getMapProps(),
     self.getTopicProps(),
     self.getFilterProps(),
+    self.getCommonProps(),
     self.getMapsProps(),
     self.getTopicCardProps(),
     self.getChatProps())
@@ -122,9 +130,14 @@ const ReactApp = {
       infoBoxHtml: InfoBox.html,
       openImportLightbox: () => ImportDialog.show(),
       forkMap: Map.fork,
-      openHelpLightbox: () => self.openLightbox('cheatsheet'),
       onMapStar: Map.star,
-      onMapUnstar: Map.unstar,
+      onMapUnstar: Map.unstar
+    }
+  },
+  getCommonProps: function() {
+    const self = ReactApp
+    return {
+      openHelpLightbox: () => self.openLightbox('cheatsheet'),
       onZoomExtents: event => JIT.zoomExtents(event, Visualize.mGraph.canvas),
       onZoomIn: JIT.zoomIn,
       onZoomOut: JIT.zoomOut
@@ -143,7 +156,10 @@ const ReactApp = {
   getTopicProps: function() {
     const self = ReactApp
     return {
-      topic: Active.Topic
+      topicId: self.topicId,
+      topic: Active.Topic,
+      endActiveTopic: Topic.end,
+      launchNewTopic: Topic.launch
     }
   },
   getMapsProps: function() {

frontend/src/Metamaps/Map/index.js

@@ -94,9 +94,9 @@ const Map = {
       Map.setAccessRequest()
       Visualize.type = 'ForceDirected'
       JIT.prepareVizData()
-      Filter.reset()
       Selected.reset()
       InfoBox.load()
+      Filter.reset()
       Filter.checkMetacodes()
       Filter.checkSynapses()
       Filter.checkMappers()
@@ -110,7 +110,7 @@ const Map = {
       if (InfoBox.generateBoxHTML) start()
       else setTimeout(() => isLoaded(), 50)
     }
-    if (Active.Map && Active.Map.id == id) {
+    if (Active.Map && Active.Map.id === id) {
       isLoaded()
     }
     else {

frontend/src/Metamaps/Topic.js

@@ -7,8 +7,9 @@ import AutoLayout from './AutoLayout'
 import Create from './Create'
 import DataModel from './DataModel'
 import Filter from './Filter'
-import GlobalUI from './GlobalUI'
+import GlobalUI, { ReactApp } from './GlobalUI'
 import JIT from './JIT'
+import Loading from './Loading'
 import Map from './Map'
 import Selected from './Selected'
 import Settings from './Settings'
@@ -35,41 +36,35 @@ const Topic = {
     } else callback(DataModel.Topics.get(id))
   },
   launch: function(id) {
-    var start = function(data) {
+    var start = function() {
+      Visualize.type = 'RGraph'
+      JIT.prepareVizData()
+      Selected.reset()
+      Filter.reset()
+      Filter.checkMetacodes()
+      Filter.checkSynapses()
+      Filter.checkMappers()
+      document.title = Active.Topic.get('name') + ' | Metamaps'
+      ReactApp.mobileTitle = Active.Topic.get('name')
+      ReactApp.render()
+    }
+    if (Active.Topic && Active.Topic.id === id) {
+      start()
+    }
+    else {
+      Loading.show()
+      $.ajax({
+        url: '/topics/' + id + '/network.json',
+        success: function(data) {
           Active.Topic = new DataModel.Topic(data.topic)
           DataModel.Creators = new DataModel.MapperCollection(data.creators)
           DataModel.Topics = new DataModel.TopicCollection([data.topic].concat(data.relatives))
           DataModel.Synapses = new DataModel.SynapseCollection(data.synapses)
           DataModel.attachCollectionEvents()
-
+          start()
-      document.title = Active.Topic.get('name') + ' | Metamaps'
-
-      // set filter mapper H3 text
-      $('#filter_by_mapper h3').html('CREATORS')
-
-      // build and render the visualization
-      Visualize.type = 'RGraph'
-      JIT.prepareVizData()
-
-      // update filters
-      Filter.reset()
-
-      // reset selected arrays
-      Selected.reset()
-
-      // these three update the actual filter box with the right list items
-      Filter.checkMetacodes()
-      Filter.checkSynapses()
-      Filter.checkMappers()
-
-      // for mobile
-      $('#header_content').html(Active.Topic.get('name'))
         }
-
-    $.ajax({
-      url: '/topics/' + id + '/network.json',
-      success: start
       })
+    }
   },
   end: function() {
     if (Active.Topic) {

frontend/src/components/MapView/index.js

@@ -1,14 +1,14 @@
 import React, { Component, PropTypes } from 'react'
 
-import DataVis from './DataVis'
+import DataVis from '../common/DataVis'
-import MapButtons from './MapButtons'
+import UpperOptions from '../common/UpperOptions'
-import InfoAndHelp from './InfoAndHelp'
+import InfoAndHelp from '../common/InfoAndHelp'
 import Instructions from './Instructions'
-import MapControls from './MapControls'
+import VisualizationControls from '../common/VisualizationControls'
 import MapChat from './MapChat'
 import TopicCard from '../TopicCard'
 
-class MapView extends Component {
+export default class MapView extends Component {
 
   static propTypes = {
     mobile: PropTypes.bool,
@@ -52,7 +52,7 @@ class MapView extends Component {
       chatOpen: false
     })
     this.mapChat.reset()
-    this.mapButtons.reset()
+    this.upperOptions.reset()
     this.props.endActiveMap()
   }
 
@@ -87,7 +87,8 @@ class MapView extends Component {
     const canEditMap = map && map.authorizeToEdit(currentUser)
     // TODO: stop using {...this.props} and make explicit
     return <div className="mapWrapper">
-      <MapButtons ref={x => this.mapButtons = x}
+      <UpperOptions ref={x => this.upperOptions = x}
+                    map={map}
                     currentUser={currentUser}
                     onImportClick={openImportLightbox}
                     onForkClick={forkMap}
@@ -105,7 +106,8 @@ class MapView extends Component {
       <TopicCard {...this.props} />
       {currentUser && <Instructions mobile={mobile} hasLearnedTopicCreation={hasLearnedTopicCreation} />}
       {currentUser && <MapChat {...this.props} onOpen={onChatOpen} onClose={onChatClose} chatOpen={chatOpen} ref={x => this.mapChat = x} />}
-      <MapControls onClickZoomExtents={onZoomExtents}
+      <VisualizationControls map={map}
+                             onClickZoomExtents={onZoomExtents}
                              onClickZoomIn={onZoomIn}
                              onClickZoomOut={onZoomOut} />
       <InfoAndHelp mapIsStarred={mapIsStarred}
@@ -119,5 +121,3 @@ class MapView extends Component {
     </div>
   }
 }
-
-export default MapView

frontend/src/components/TopicCard/Links.js

@@ -1,6 +1,7 @@
 /* global $ */
 
 import React, { PropTypes, Component } from 'react'
+import { Link } from 'react-router'
 
 import MetacodeSelect from '../MetacodeSelect'
 import Permission from './Permission'
@@ -54,13 +55,13 @@ class Links extends Component {
     let output = []
 
     firstFiveLinks.forEach(obj => {
-      output.push(<li key={obj.mapId}><a href={`/maps/${obj.mapId}`}>{obj.mapName}</a></li>)
+      output.push(<li key={obj.mapId}><Link to={`/maps/${obj.mapId}`}>{obj.mapName}</Link></li>)
     })
 
     if (extraLinks.length > 0) {
       if (this.state.showMoreMaps) {
         extraLinks.forEach(obj => {
-          output.push(<li key={obj.mapId} className="hideExtra extraText"><a href={`/maps/${obj.mapId}`}>{obj.mapName}</a></li>)
+          output.push(<li key={obj.mapId} className="hideExtra extraText"><Link to={`/maps/${obj.mapId}`}>{obj.mapName}</Link></li>)
         })
       }
       const text = this.state.showMoreMaps ? 'See less...' : `See ${extraLinks.length} more...`

frontend/src/components/TopicView/index.js

@@ -1,9 +1,77 @@
-import React, { PropTypes, Component } from 'react'
+import React, { Component, PropTypes } from 'react'
 
-class TopicView extends Component {
+import DataVis from '../common/DataVis'
-  render() {
+import UpperOptions from '../common/UpperOptions'
-    return null
+import InfoAndHelp from '../common/InfoAndHelp'
+import VisualizationControls from '../common/VisualizationControls'
+import TopicCard from '../TopicCard'
+
+export default class TopicView extends Component {
+
+  static propTypes = {
+    mobile: PropTypes.bool,
+    topicId: PropTypes.string,
+    topic: PropTypes.object,
+    filterData: PropTypes.object,
+    allForFiltering: PropTypes.object,
+    visibleForFiltering: PropTypes.object,
+    toggleMetacode: PropTypes.func,
+    toggleMapper: PropTypes.func,
+    toggleSynapse: PropTypes.func,
+    filterAllMetacodes: PropTypes.func,
+    filterAllMappers: PropTypes.func,
+    filterAllSynapses: PropTypes.func,
+    currentUser: PropTypes.object,
+    endActiveTopic: PropTypes.func,
+    launchNewTopic: PropTypes.func,
+    openHelpLightbox: PropTypes.func,
+    forkMap: PropTypes.func,
+    onZoomIn: PropTypes.func,
+    onZoomOut: PropTypes.func
+  }
+
+  endTopic() {
+    this.upperOptions.reset()
+    this.props.endActiveTopic()
+  }
+
+  componentDidUpdate(prevProps) {
+    const oldTopicId = prevProps.topicId
+    const { topicId, launchNewTopic } = this.props
+    if (!oldTopicId && topicId) launchNewTopic(topicId)
+    else if (oldTopicId && topicId && oldTopicId !== topicId) {
+      this.endTopic()
+      launchNewTopic(topicId)
+    }
+    else if (oldTopicId && !topicId) this.endTopic()
+  }
+
+  render = () => {
+    const { mobile, topic, currentUser, allForFiltering, visibleForFiltering,
+            toggleMetacode, toggleMapper, toggleSynapse, filterAllMetacodes,
+            filterAllMappers, filterAllSynapses, filterData, forkMap,
+            openHelpLightbox, onZoomIn, onZoomOut } = this.props
+    // TODO: stop using {...this.props} and make explicit
+    return <div className="topicWrapper">
+      <UpperOptions ref={x => this.upperOptions = x}
+                    currentUser={currentUser}
+                    topic={topic}
+                    onForkClick={forkMap}
+                    filterData={filterData}
+                    allForFiltering={allForFiltering}
+                    visibleForFiltering={visibleForFiltering}
+                    toggleMetacode={toggleMetacode}
+                    toggleMapper={toggleMapper}
+                    toggleSynapse={toggleSynapse}
+                    filterAllMetacodes={filterAllMetacodes}
+                    filterAllMappers={filterAllMappers}
+                    filterAllSynapses={filterAllSynapses} />
+      <DataVis />
+      <TopicCard {...this.props} />
+      <VisualizationControls onClickZoomIn={onZoomIn}
+                             onClickZoomOut={onZoomOut} />
+      <InfoAndHelp topic={topic}
+                   onHelpClick={openHelpLightbox} />
+    </div>
   }
 }
-
-export default TopicView

frontend/src/components/common/FilterBox.js

@@ -4,6 +4,8 @@ import onClickOutsideAddon from 'react-onclickoutside'
 
 class FilterBox extends Component {
   static propTypes = {
+    topic: PropTypes.object,
+    map: PropTypes.object,
     filterData: PropTypes.object,
     allForFiltering: PropTypes.object,
     visibleForFiltering: PropTypes.object,
@@ -21,8 +23,9 @@ class FilterBox extends Component {
   }
 
   render () {
-    const { filterData, allForFiltering, visibleForFiltering, toggleMetacode, toggleMapper, toggleSynapse,
+    const { topic, map, filterData, allForFiltering, visibleForFiltering, toggleMetacode,
-            filterAllMetacodes, filterAllMappers, filterAllSynapses } = this.props
+            toggleMapper, toggleSynapse, filterAllMetacodes,
+            filterAllMappers, filterAllSynapses } = this.props
     const style = {
       maxHeight: document.body.clientHeight - 108 + 'px'
     }
@@ -42,7 +45,8 @@ class FilterBox extends Component {
       <div className="filterBox">
         <h2>FILTER BY</h2>
         <div id="filter_by_mapper" className="filterBySection">
-          <h3>MAPPERS</h3>
+          {map && <h3>MAPPERS</h3>}
+          {topic && <h3>CREATORS</h3>}
           <span className={mapperNoneClass} onClick={() => filterAllMappers()}>NONE</span>
           <span className={mapperAllClass} onClick={() => filterAllMappers(true)}>ALL</span>
           <div className="clearfloat"></div>

frontend/src/components/common/InfoAndHelp.js

@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react'
 
-import MapInfoBox from './MapInfoBox'
+import MapInfoBox from '../MapView/MapInfoBox'
 
 class InfoAndHelp extends Component {
   static propTypes = {
@@ -20,13 +20,13 @@ class InfoAndHelp extends Component {
     const tooltip = mapIsStarred ? 'Unstar' : 'Star'
     const onStarClick = mapIsStarred ? onMapUnstar : onMapStar
     return <div className="infoAndHelp">
-      <MapInfoBox map={map} currentUser={currentUser} infoBoxHtml={infoBoxHtml} />
+      {map && <MapInfoBox map={map} currentUser={currentUser} infoBoxHtml={infoBoxHtml} />}
-      {currentUser && <div className={`starMap infoElement mapElement ${starclassName}`} onClick={onStarClick}>
+      {map && currentUser && <div className={`starMap infoElement mapElement ${starclassName}`} onClick={onStarClick}>
         <div className="tooltipsAbove">{tooltip}</div>
       </div>}
-      <div className="mapInfoIcon infoElement mapElement" onClick={onInfoClick}>
+      {map && <div className="mapInfoIcon infoElement mapElement" onClick={onInfoClick}>
         <div className="tooltipsAbove">Map Info</div>
-      </div>
+      </div>}
       <div className="openCheatsheet infoElement mapElement" onClick={onHelpClick}>
         <div className="tooltipsAbove">Help</div>
       </div>

frontend/src/components/common/UpperOptions.js

@@ -2,9 +2,11 @@ import React, { Component, PropTypes } from 'react'
 
 import FilterBox from '../common/FilterBox'
 
-class MapButtons extends Component {
+export default class UpperOptions extends Component {
   static propTypes = {
     currentUser: PropTypes.object,
+    map: PropTypes.object,
+    topic: PropTypes.object,
     canEditMap: PropTypes.bool,
     onImportClick: PropTypes.func,
     onForkClick: PropTypes.func,
@@ -33,12 +35,12 @@ class MapButtons extends Component {
   }
 
   render () {
-    const { currentUser, canEditMap, filterBoxHtml, onFilterClick, onImportClick, onForkClick,
+    const { currentUser, map, topic, canEditMap, filterBoxHtml, onFilterClick, onImportClick, onForkClick,
             filterData, allForFiltering, visibleForFiltering, toggleMetacode, toggleMapper, toggleSynapse,
             filterAllMetacodes, filterAllMappers, filterAllSynapses } = this.props
     const { filterBoxOpen } = this.state
     return <div className="mapElement upperRightEl upperRightMapButtons upperRightUI">
-      {canEditMap && <div className="importDialog upperRightEl upperRightIcon mapElement" onClick={onImportClick}>
+      {map && canEditMap && <div className="importDialog upperRightEl upperRightIcon mapElement" onClick={onImportClick}>
         <div className="tooltipsUnder">
           Import Data
         </div>
@@ -48,6 +50,8 @@ class MapButtons extends Component {
           <div className="tooltipsUnder">Filter</div>
         </div>
         {filterBoxOpen && <FilterBox filterData={filterData}
+                                     map={map}
+                                     topic={topic}
                                      allForFiltering={allForFiltering}
                                      visibleForFiltering={visibleForFiltering}
                                      toggleMetacode={toggleMetacode}
@@ -67,5 +71,3 @@ class MapButtons extends Component {
     </div>
   }
 }
-
-export default MapButtons

frontend/src/components/common/VisualizationControls.js

@@ -1,18 +1,19 @@
 import React, { Component, PropTypes } from 'react'
 
-class MapControls extends Component {
+export default class VisualizationControls extends Component {
   static propTypes = {
+    map: PropTypes.object,
     onClickZoomExtents: PropTypes.func,
     onClickZoomIn: PropTypes.func,
     onClickZoomOut: PropTypes.func
   }
 
   render () {
-    const { onClickZoomExtents, onClickZoomIn, onClickZoomOut } = this.props
+    const { map, onClickZoomExtents, onClickZoomIn, onClickZoomOut } = this.props
     return <div className="mapControls mapElement">
-      <div className="zoomExtents mapControl" onClick={onClickZoomExtents}>
+      {map && <div className="zoomExtents mapControl" onClick={onClickZoomExtents}>
         <div className="tooltips">Center View</div>
-      </div>
+      </div>}
       <div className="zoomIn mapControl" onClick={onClickZoomIn}>
         <div className="tooltips">Zoom In</div>
       </div>
@@ -22,5 +23,3 @@ class MapControls extends Component {
     </div>
   }
 }
-
-export default MapControls