stop using jquery ui for topic card dragging

app/assets/stylesheets/base.scss.erb

@@ -33,7 +33,6 @@
 
 .showcard {
     position:absolute;
-    display:none;
     top:100px;
     left:100px;
     width:300px;

frontend/src/Metamaps/GlobalUI/ReactApp.js

@@ -151,7 +151,7 @@ const ReactApp = {
       metacodeSets: TopicCard.metacodeSets,
       updateTopic: TopicCard.updateTopic,
       onTopicFollow: TopicCard.onTopicFollow,
-      redrawCanvas: TopicCard.redrawCanvas
+      redrawCanvas: () => Visualize.mGraph.plot()
     }
   },
   getTopicProps: function() {

frontend/src/Metamaps/Views/TopicCard.js

@@ -7,9 +7,6 @@ import GlobalUI, { ReactApp } from '../GlobalUI'
 const TopicCard = {
   openTopic: null, // stores the topic that's currently open
   metacodeSets: [],
-  redrawCanvas: () => {
-    Visualize.mGraph.plot()
-  },
   init: function(serverData) {
     const self = TopicCard
     self.metacodeSets = serverData.metacodeSets
@@ -41,20 +38,11 @@ const TopicCard = {
     var topic = node.getData('topic')
     self.openTopic = topic
     self.render()
-    $('.showcard').fadeIn('fast', () => {
-      $('.showcard').draggable({
-        handle: '.metacodeImage',
-        stop: function() {
-          $(this).height('auto')
-        }
-      })
-      opts.complete && opts.complete()
-    })
   },
   hideCard: function() {
     var self = TopicCard
-    $('.showcard').fadeOut('fast')
     self.openTopic = null
+    self.render()
   }
 }
 

frontend/src/components/MapView/index.js

@@ -77,7 +77,7 @@ export default class MapView extends Component {
             toggleMetacode, toggleMapper, toggleSynapse, filterAllMetacodes,
             filterAllMappers, filterAllSynapses, filterData,
             openImportLightbox, forkMap, openHelpLightbox,
-            mapIsStarred, onMapStar, onMapUnstar,
+            mapIsStarred, onMapStar, onMapUnstar, openTopic,
             onZoomExtents, onZoomIn, onZoomOut, hasLearnedTopicCreation } = this.props
     const { chatOpen } = this.state
     const onChatOpen = () => {
@@ -107,7 +107,7 @@ export default class MapView extends Component {
                     filterAllMappers={filterAllMappers}
                     filterAllSynapses={filterAllSynapses} />
       <DataVis />
-      <TopicCard {...this.props} />
+      {openTopic && <TopicCard {...this.props} />}
       {currentUser && <Instructions mobile={mobile} hasLearnedTopicCreation={hasLearnedTopicCreation} />}
       {currentUser && <MapChat {...this.props} onOpen={onChatOpen} onClose={onChatClose} chatOpen={chatOpen} ref={x => this.mapChat = x} />}
       <VisualizationControls map={map}

frontend/src/components/TopicCard/index.js

@@ -1,4 +1,5 @@
 import React, { PropTypes, Component } from 'react'
+import Draggable from 'react-draggable'
 
 import Title from './Title'
 import Links from './Links'
@@ -30,32 +31,34 @@ class ReactTopicCard extends Component {
     if (topic.authorizePermissionChange(currentUser)) classname += ' yourTopic'
 
     return (
-      <div className="showcard mapElement mapElementHidden" id="showcard">
-        <div className={classname}>
-          <div className={`CardOnGraph ${hasAttachment ? 'hasAttachment' : ''}`} id={`topic_${topic.id}`}>
-            <Title name={topic.get('name')}
-              authorizedToEdit={authorizedToEdit}
-              onChange={wrappedUpdateTopic}
-            />
-            <Links topic={topic}
-              ActiveMapper={this.props.currentUser}
-              updateTopic={wrappedUpdateTopic}
-              metacodeSets={this.props.metacodeSets}
-              redrawCanvas={this.props.redrawCanvas}
-            />
-            <Desc desc={topic.get('desc')}
-              authorizedToEdit={authorizedToEdit}
-              onChange={wrappedUpdateTopic}
-            />
-            <Attachments topic={topic}
-              authorizedToEdit={authorizedToEdit}
-              updateTopic={wrappedUpdateTopic}
-            />
-          {Util.isTester(currentUser) && <Follow isFollowing={isFollowing} onTopicFollow={wrappedTopicFollow} />}
-            <div className="clearfloat"></div>
+      <Draggable handle=".metacodeImage" defaultPosition={{x: 100, y: 100}}>
+        <div className="showcard mapElement mapElementHidden" id="showcard">
+          <div className={classname}>
+            <div className={`CardOnGraph ${hasAttachment ? 'hasAttachment' : ''}`} id={`topic_${topic.id}`}>
+              <Title name={topic.get('name')}
+                authorizedToEdit={authorizedToEdit}
+                onChange={wrappedUpdateTopic}
+              />
+              <Links topic={topic}
+                ActiveMapper={this.props.currentUser}
+                updateTopic={wrappedUpdateTopic}
+                metacodeSets={this.props.metacodeSets}
+                redrawCanvas={this.props.redrawCanvas}
+              />
+              <Desc desc={topic.get('desc')}
+                authorizedToEdit={authorizedToEdit}
+                onChange={wrappedUpdateTopic}
+              />
+              <Attachments topic={topic}
+                authorizedToEdit={authorizedToEdit}
+                updateTopic={wrappedUpdateTopic}
+              />
+            {Util.isTester(currentUser) && <Follow isFollowing={isFollowing} onTopicFollow={wrappedTopicFollow} />}
+              <div className="clearfloat"></div>
+            </div>
           </div>
         </div>
-      </div>
+      </Draggable>
     )
   }
 }

package.json

@@ -44,6 +44,7 @@
     "outdent": "0.3.0",
     "react": "15.4.2",
     "react-dom": "15.4.2",
+    "react-draggable": "2.2.3",
     "react-dropzone": "3.9.1",
     "react-onclickoutside": "5.9.0",
     "react-router": "3.0.2",