glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

reenable topic view in react

Browse source
This commit is contained in:
Connor Turland 2017-03-16 00:02:54 -04:00
parent 38baeee994
commit 20c9f989e1
12 changed files with 183 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/Metamaps/GlobalUI/CreateMap.js
View file

@ -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'

22
frontend/src/Metamaps/GlobalUI/ReactApp.js
View file

@ -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() {

4
frontend/src/Metamaps/Map/index.js
View file

@ -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 {

53
frontend/src/Metamaps/Topic.js
View file

@ -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) {
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()
document.title = Active.Topic.get('name') + ' | Metamaps'
// set filter mapper H3 text
$('#filter_by_mapper h3').html('CREATORS')
// build and render the visualization
var start = function() {
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.reset()
Filter.checkMetacodes()
Filter.checkSynapses()
Filter.checkMappers()
// for mobile
$('#header_content').html(Active.Topic.get('name'))
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()
}
})
}
$.ajax({
url: '/topics/' + id + '/network.json',
success: start
})
},
end: function() {
if (Active.Topic) {

50
frontend/src/components/MapView/index.js
View file

@ -1,14 +1,14 @@
import React, { Component, PropTypes } from 'react'
import DataVis from './DataVis'
import MapButtons from './MapButtons'
import InfoAndHelp from './InfoAndHelp'
import DataVis from '../common/DataVis'
import UpperOptions from '../common/UpperOptions'
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,27 +87,29 @@ 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}
currentUser={currentUser}
onImportClick={openImportLightbox}
onForkClick={forkMap}
canEditMap={canEditMap}
filterData={filterData}
allForFiltering={allForFiltering}
visibleForFiltering={visibleForFiltering}
toggleMetacode={toggleMetacode}
toggleMapper={toggleMapper}
toggleSynapse={toggleSynapse}
filterAllMetacodes={filterAllMetacodes}
filterAllMappers={filterAllMappers}
filterAllSynapses={filterAllSynapses} />
<UpperOptions ref={x => this.upperOptions = x}
map={map}
currentUser={currentUser}
onImportClick={openImportLightbox}
onForkClick={forkMap}
canEditMap={canEditMap}
filterData={filterData}
allForFiltering={allForFiltering}
visibleForFiltering={visibleForFiltering}
toggleMetacode={toggleMetacode}
toggleMapper={toggleMapper}
toggleSynapse={toggleSynapse}
filterAllMetacodes={filterAllMetacodes}
filterAllMappers={filterAllMappers}
filterAllSynapses={filterAllSynapses} />
<DataVis />
<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}
onClickZoomIn={onZoomIn}
onClickZoomOut={onZoomOut} />
<VisualizationControls map={map}
onClickZoomExtents={onZoomExtents}
onClickZoomIn={onZoomIn}
onClickZoomOut={onZoomOut} />
<InfoAndHelp mapIsStarred={mapIsStarred}
currentUser={currentUser}
map={map}
@ -119,5 +121,3 @@ class MapView extends Component {
</div>
}
}
export default MapView

9
frontend/src/components/TopicCard/Links.js
View file

@ -1,6 +1,7 @@
/* global $ */
import React, { PropTypes, Component } from 'react'
import { Link } from 'react-router'
import MetacodeSelect from '../MetacodeSelect'
import Permission from './Permission'
@ -52,21 +53,21 @@ 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...`
output.push(<li key="showMore"><span className="showMore" onClick={this.toggleShowMoreMaps}>{text}</span></li>)
}
return output
}

80
frontend/src/components/TopicView/index.js
View file

@ -1,9 +1,77 @@
import React, { PropTypes, Component } from 'react'
import React, { Component, PropTypes } from 'react'
class TopicView extends Component {
render() {
return null
import DataVis from '../common/DataVis'
import UpperOptions from '../common/UpperOptions'
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

0
frontend/src/components/MapView/DataVis.js → frontend/src/components/common/DataVis.js
View file

10
frontend/src/components/common/FilterBox.js
View file

@ -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,
filterAllMetacodes, filterAllMappers, filterAllSynapses } = this.props
const { topic, map, filterData, allForFiltering, visibleForFiltering, toggleMetacode,
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>

10
frontend/src/components/MapView/InfoAndHelp.js → frontend/src/components/common/InfoAndHelp.js
View file

@ -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} />
{currentUser && <div className={`starMap infoElement mapElement ${starclassName}`} onClick={onStarClick}>
{map && <MapInfoBox map={map} currentUser={currentUser} infoBoxHtml={infoBoxHtml} />}
{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>

30
frontend/src/components/MapView/MapButtons.js → frontend/src/components/common/UpperOptions.js
View file

@ -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,15 +50,17 @@ class MapButtons extends Component {
<div className="tooltipsUnder">Filter</div>
</div>
{filterBoxOpen && <FilterBox filterData={filterData}
allForFiltering={allForFiltering}
visibleForFiltering={visibleForFiltering}
toggleMetacode={toggleMetacode}
toggleMapper={toggleMapper}
toggleSynapse={toggleSynapse}
filterAllMetacodes={filterAllMetacodes}
filterAllMappers={filterAllMappers}
filterAllSynapses={filterAllSynapses}
closeBox={() => this.reset()} />}
map={map}
topic={topic}
allForFiltering={allForFiltering}
visibleForFiltering={visibleForFiltering}
toggleMetacode={toggleMetacode}
toggleMapper={toggleMapper}
toggleSynapse={toggleSynapse}
filterAllMetacodes={filterAllMetacodes}
filterAllMappers={filterAllMappers}
filterAllSynapses={filterAllSynapses}
closeBox={() => this.reset()} />}
</div>
{currentUser && <div className="sidebarFork upperRightEl">
<div className="sidebarForkIcon upperRightIcon" onClick={onForkClick}>
@ -67,5 +71,3 @@ class MapButtons extends Component {
</div>
}
}
export default MapButtons

11
frontend/src/components/MapView/MapControls.js → frontend/src/components/common/VisualizationControls.js
View file

@ -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