more portable metacode selector component

frontend/src/components/TopicCard/Links.js

@@ -5,6 +5,9 @@ import React, { PropTypes, Component } from 'react'
 import Metacode from './Metacode'
 import Permission from './Permission'
 
+// TODO use a callback instead of an import
+import Visualize from '../../Metamaps/Visualize'
+
 const inmaps = (topic) => {
   const inmapsArray = topic.get('inmaps') || []
   const inmapsLinks = topic.get('inmapsLinks') || []
@@ -60,18 +63,22 @@ class Links extends Component {
     bindShowCardListeners(this.props.topic, this.props.ActiveMapper)
   }
 
+  handleMetacodeClick = metacodeId => {
+    this.props.updateTopic({
+      metacode_id: metacodeId
+    })
+    Visualize.mGraph.plot()
+  }
+
   render = () => {
     const { topic, ActiveMapper } = this.props
-    const topicId = topic.isNew() ? topic.cid : topic.id // TODO should we really be using cid here?!?
     const metacode = topic.getMetacode()
 
     return (
       <div className="links">
         <Metacode
-          topic={topic}
           metacode={metacode}
-          ActiveMapper={ActiveMapper}
-          updateTopic={this.props.updateTopic}
+          onMetacodeClick={this.handleMetacodeClick}
           metacodeSets={this.props.metacodeSets}
         />
         <div className="linkItem contributor">
@@ -84,7 +91,7 @@ class Links extends Component {
           <div className="hoverTip">Click to see which maps topic appears on</div>
           <div className="tip"><ul>{inmaps(topic)}</ul></div>
         </div>
-        <a href={`/topics/${topicId}`} target="_blank" className="linkItem synapseCount">
+        <a href={`/topics/${topic.id}`} target="_blank" className="linkItem synapseCount">
           <div className="synapseCountIcon"></div>
           {topic.get('synapse_count').toString()}
           <div className="tip">Click to see this topics synapses</div>

frontend/src/components/TopicCard/Metacode.js

@@ -1,137 +1,73 @@
 /* global $ */
 
+/*
+ * Metacode selector component
+ *
+ * This component takes in a callback (onMetacodeClick; takes one metacode id)
+ * and a list of metacode sets and renders them. If you click a metacode, it
+ * passes that metacode's id to the callback.
+ */
+
 import React, { PropTypes, Component } from 'react'
 
-import DataModel from '../../Metamaps/DataModel'
-import Visualize from '../../Metamaps/Visualize'
-
-// TODO all of these should be largely turned into passed-in callbacks
-const bindShowCardListeners = (topic, ActiveMapper) => {
-  var authorized = topic.authorizeToEdit(ActiveMapper)
-  var selectingMetacode = false
-  // attach the listener that shows the metacode title when you hover over the image
-  $('.showcard .metacodeImage').mouseenter(function() {
-    $('.showcard .icon').css('z-index', '4')
-    $('.showcard .metacodeTitle').show()
-  })
-  $('.showcard .linkItem.icon').mouseleave(function() {
-    if (!selectingMetacode) {
-      $('.showcard .metacodeTitle').hide()
-      $('.showcard .icon').css('z-index', '1')
-    }
-  })
-
-  var metacodeLiClick = function() {
-    selectingMetacode = false
-    var metacodeId = parseInt($(this).attr('data-id'))
-    var metacode = DataModel.Metacodes.get(metacodeId)
-    $('.CardOnGraph').find('.metacodeTitle').html(metacode.get('name'))
-      .append('<div class="expandMetacodeSelect"></div>')
-      .attr('class', 'metacodeTitle mbg' + metacode.id)
-    $('.CardOnGraph').find('.metacodeImage').css('background-image', 'url(' + metacode.get('icon') + ')')
-    topic.save({
-      metacode_id: metacode.id
-    })
-    Visualize.mGraph.plot()
-    $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge')
-    $('.metacodeTitle').hide()
-    $('.showcard .icon').css('z-index', '1')
-  }
-
-  var openMetacodeSelect = function(event) {
-    var TOPICCARD_WIDTH = 300
-    var METACODESELECT_WIDTH = 404
-    var MAX_METACODELIST_HEIGHT = 270
-
-    if (!selectingMetacode) {
-      selectingMetacode = true
-
-      // this is to make sure the metacode
-      // select is accessible onscreen, when opened
-      // while topic card is close to the right
-      // edge of the screen
-      var windowWidth = $(window).width()
-      var showcardLeft = parseInt($('.showcard').css('left'))
-      var distanceFromEdge = windowWidth - (showcardLeft + TOPICCARD_WIDTH)
-      if (distanceFromEdge < METACODESELECT_WIDTH) {
-        $('.metacodeSelect').addClass('onRightEdge')
-      }
-
-      // this is to make sure the metacode
-      // select is accessible onscreen, when opened
-      // while topic card is close to the bottom
-      // edge of the screen
-      var windowHeight = $(window).height()
-      var showcardTop = parseInt($('.showcard').css('top'))
-      var topicTitleHeight = $('.showcard .title').height() + parseInt($('.showcard .title').css('padding-top')) + parseInt($('.showcard .title').css('padding-bottom'))
-      var distanceFromBottom = windowHeight - (showcardTop + topicTitleHeight)
-      if (distanceFromBottom < MAX_METACODELIST_HEIGHT) {
-        $('.metacodeSelect').addClass('onBottomEdge')
-      }
-
-      $('.metacodeSelect').show()
-      event.stopPropagation()
-    }
-  }
-
-  var hideMetacodeSelect = function() {
-    selectingMetacode = false
-    $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge')
-    $('.metacodeTitle').hide()
-    $('.showcard .icon').css('z-index', '1')
-  }
-
-  if (authorized) {
-    $('.showcard .metacodeTitle').click(openMetacodeSelect)
-    $('.showcard').click(hideMetacodeSelect)
-    $('.metacodeSelect > ul > li').click(function(event) {
-      event.stopPropagation()
-    })
-    $('.metacodeSelect li li').click(metacodeLiClick)
-  }
-}
-
 class Metacode extends Component {
-  componentDidMount = () => {
-    bindShowCardListeners(this.props.topic, this.props.ActiveMapper)
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      showMetacodeTitle: false,
+      showMetacodeSelect: false
+    }
   }
 
   metacodeOptions = () => {
     return (
       <div id="metacodeOptions">
         <ul>
-          {this.props.metacodeSets.map(set => {
-            return (<li key={set.name}>
+          {this.props.metacodeSets.map(set => (
+            <li key={set.name}>
               <span>{set.name}</span>
               <div className="expandMetacodeSet"></div>
               <ul>
-                {set.metacodes.map(m => {
-                  return (<li key={m.id} data-id={m.id}>
+                {set.metacodes.map(m => (
+                  <li key={m.id}
+                    onClick={() => this.props.onMetacodeClick(m.id)}
+                  >
                     <img width="24" height="24" src={m.icon_path} alt={m.name} />
                     <div className="mSelectName">{m.name}</div>
                     <div className="clearfloat"></div>
-                  </li>)
-                })}
+                  </li>
+                ))}
               </ul>
-            </li>)
-          })}
+            </li>
+          ))}
         </ul>
       </div>
     )
   }
 
-
   render = () => {
-    const { metacode } = this.props
-
     return (
-      <div className="linkItem icon">
-        <div className={`metacodeTitle mbg${metacode.get('id')}`}>
-          {metacode.get('name')}
-          <div className="expandMetacodeSelect"></div>
+      <div className="linkItem icon"
+        style={{ zIndex: this.state.showMetacodeTitle ? 4 : 1 }}
+        onMouseLeave={() => this.setState({ showMetacodeTitle: false, showMetacodeSelect: false })}
+      >
+        <div className={`metacodeTitle mbg${this.props.metacode.get('id')}`}
+          style={{ display: this.state.showMetacodeTitle ? 'block' : 'none' }}
+        >
+          {this.props.metacode.get('name')}
+          <div className="expandMetacodeSelect"
+            onClick={() => this.setState({ showMetacodeSelect: !this.state.showMetacodeSelect })}
+          />
         </div>
-        <div className="metacodeImage" style={{backgroundImage: `url(${metacode.get('icon')})`}} title="click and drag to move card"></div>
-        <div className="metacodeSelect">
+        <div className="metacodeImage"
+          style={{backgroundImage: `url(${this.props.metacode.get('icon')})`}}
+          title="click and drag to move card"
+          onMouseEnter={() => this.setState({ showMetacodeTitle: true })}
+        />
+        <div className="metacodeSelect"
+          style={{ display: this.state.showMetacodeSelect ? 'block' : 'none' }}
+        >
           {this.metacodeOptions()}
         </div>
       </div>
@@ -140,10 +76,8 @@ class Metacode extends Component {
 }
 
 Metacode.propTypes = {
-  topic: PropTypes.object, // backbone object
   metacode: PropTypes.object, // backbone object
-  ActiveMapper: PropTypes.object,
-  updateTopic: PropTypes.func,
+  onMetacodeClick: PropTypes.func,
   metacodeSets: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string,
     metacodes: PropTypes.arrayOf(PropTypes.shape({