diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 4a4fc673..3ebbbad6 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -20,5 +20,4 @@ <% # for populating the change metacode list on the topic card %> <%= render :partial => 'shared/metacodeoptions' %> <% end %> - <%= render :partial => 'layouts/foot' %> diff --git a/app/views/shared/_filterBox.html.erb b/app/views/shared/_filterBox.html.erb deleted file mode 100644 index 6698e64d..00000000 --- a/app/views/shared/_filterBox.html.erb +++ /dev/null @@ -1,124 +0,0 @@ -<%# - # @file - # this code generates the list of icons in the filter box in the upper right menu area - #%> - -<% - @mappers = [] - @synapses = [] - @metacodes = [] - @metacodelist = '' - @mapperlist = '' - @synapselist = '' -# There are essentially three functions happening here one to fill data to -#@mappers with all people who have mapped on the selected map, which -#actually gets checked twice once for topics or within @metacodes and once -#for synapses on the map. @synapses get filled with all synapses on the map -#and metacodes is filled with all the metacodes that are being used on the map. - - if @map - @alltopics.each_with_index do |topic, index| - if @metacodes.index(topic.metacode) == nil - @metacodes.push(topic.metacode) - end - end - @allsynapses.each_with_index do |synapse, index| - if @synapses.index{|s| s.desc == synapse.desc} == nil - @synapses.push(synapse) - end - end - @allmappings.each_with_index do |mapping, index| - if @mappers.index(mapping.user) == nil - @mappers.push(mapping.user) - end - end - elsif @topic - @alltopics.each_with_index do |topic, index| - if @metacodes.index(topic.metacode) == nil - @metacodes.push(topic.metacode) - end - if @mappers.index(topic.user) == nil - @mappers.push(topic.user) - end - end - @allsynapses.each_with_index do |synapse, index| - if @synapses.index{|s| s.desc == synapse.desc} == nil - @synapses.push(synapse) - end - if @mappers.index(synapse.user) == nil - @mappers.push(synapse.user) - end - end - end - - if @map || @topic - @metacodes.sort! {|x,y| - n1 = x.name || "" - n2 = y.name || "" - n1 <=> n2 - } - @synapses.sort! {|x,y| - d1 = x.desc || "" - d2 = y.desc || "" - d1 <=> d2 - } - @mappers.sort! {|x,y| - n1 = x.name || "" - n2 = y.name || "" - n1 <=> n2 - } - - @metacodes.each_with_index do |metacode, index| - @metacodelist += '
  • ' - @metacodelist += '' + metacode.name + '' - @metacodelist += '

    ' + metacode.name.downcase + '

    • ' - end - @synapses.each_with_index do |synapse, index| - d = synapse.desc || "" - @synapselist += '
  • ' - @synapselist += 'synapse icon

    ' + d - @synapselist += '

    • ' - end - @mappers.each_with_index do |mapper, index| - @mapperlist += '
  • ' - @mapperlist += '' + mapper.name + '' - @mapperlist += '

    ' + mapper.name + '

    • ' - end - end -%> -
    -

    FILTER BY

    -
    -

    <%= @map ? "MAPPERS" : @topic ? "CREATORS" : "" %>

    - NONE - ALL -
    - -
    -
    - -
    -

    METACODES

    - NONE - ALL -
    - -
    -
    - -
    -

    SYNAPSES

    - NONE - ALL -
    - -
    -
    - -
    diff --git a/frontend/src/Metamaps/DataModel/Mapper.js b/frontend/src/Metamaps/DataModel/Mapper.js index 20eb5e5a..735bda86 100644 --- a/frontend/src/Metamaps/DataModel/Mapper.js +++ b/frontend/src/Metamaps/DataModel/Mapper.js @@ -9,12 +9,12 @@ const Mapper = Backbone.Model.extend({ toJSON: function(options) { return _.omit(this.attributes, this.blacklist) }, - prepareLiForFilter: function() { - return outdent` -
  • - ${this.get('name')} -

    ${this.get('name')}

    -
    • ` + prepareDataForFilter: function() { + return { + id: this.id, + image: this.get('image'), + name: this.get('name') + } }, followMap: function(id) { const idIndex = this.get('follows').maps.indexOf(id) diff --git a/frontend/src/Metamaps/DataModel/Metacode.js b/frontend/src/Metamaps/DataModel/Metacode.js index e7ee5a31..e75ff3ef 100644 --- a/frontend/src/Metamaps/DataModel/Metacode.js +++ b/frontend/src/Metamaps/DataModel/Metacode.js @@ -9,12 +9,12 @@ const Metacode = Backbone.Model.extend({ image.src = this.get('icon') this.set('image', image) }, - prepareLiForFilter: function() { - return outdent` -
  • - ${this.get('name')} -

    ${this.get('name').toLowerCase()}

    -
    • ` + prepareDataForFilter: function() { + return { + id: this.id, + name: this.get('name'), + icon: this.get('icon') + } } }) diff --git a/frontend/src/Metamaps/DataModel/Synapse.js b/frontend/src/Metamaps/DataModel/Synapse.js index e5cb0ae8..d090d1ba 100644 --- a/frontend/src/Metamaps/DataModel/Synapse.js +++ b/frontend/src/Metamaps/DataModel/Synapse.js @@ -28,12 +28,11 @@ const Synapse = Backbone.Model.extend({ this.on('change', this.updateEdgeView) this.on('change:desc', Filter.checkSynapses, this) }, - prepareLiForFilter: function() { - return outdent` -
  • - synapse icon -

    ${this.get('desc')}

    -
    • ` + prepareDataForFilter: function() { + return { + desc: this.get('desc'), + icon: DataModel.synapseIconUrl + } }, authorizeToEdit: function(mapper) { if (mapper && (this.get('permission') === 'commons' || this.get('collaborator_ids').includes(mapper.get('id')) || this.get('user_id') === mapper.get('id'))) return true diff --git a/frontend/src/Metamaps/Filter.js b/frontend/src/Metamaps/Filter.js index f617c05c..e8361bd3 100644 --- a/frontend/src/Metamaps/Filter.js +++ b/frontend/src/Metamaps/Filter.js @@ -5,13 +5,17 @@ import _ from 'lodash' import Active from './Active' import Control from './Control' import DataModel from './DataModel' -import GlobalUI from './GlobalUI' +import GlobalUI, { ReactApp } from './GlobalUI' import Settings from './Settings' import Visualize from './Visualize' const Filter = { + dataForPresentation: { + metacodes: [], + mappers: [], + synapses: [] + }, filters: { - name: '', metacodes: [], mappers: [], synapses: [] @@ -23,19 +27,6 @@ const Filter = { }, isOpen: false, changing: false, - init: function() { - var self = Filter - - $('.sidebarFilterBox .showAllMetacodes').click(self.filterNoMetacodes) - $('.sidebarFilterBox .showAllSynapses').click(self.filterNoSynapses) - $('.sidebarFilterBox .showAllMappers').click(self.filterNoMappers) - $('.sidebarFilterBox .hideAllMetacodes').click(self.filterAllMetacodes) - $('.sidebarFilterBox .hideAllSynapses').click(self.filterAllSynapses) - $('.sidebarFilterBox .hideAllMappers').click(self.filterAllMappers) - - self.bindLiClicks() - self.getFilterData() - }, toggleBox: function(event) { var self = Filter @@ -75,65 +66,24 @@ const Filter = { }, reset: function() { var self = Filter - self.filters.metacodes = [] self.filters.mappers = [] self.filters.synapses = [] self.visible.metacodes = [] self.visible.mappers = [] self.visible.synapses = [] - - $('#filter_by_metacode ul').empty() - $('#filter_by_mapper ul').empty() - $('#filter_by_synapse ul').empty() - - $('.filterBox .showAll').addClass('active') - }, - /* - Most of this data essentially depends on the ruby function which are happening for filter inside view filterBox - But what these function do is load this data into three accessible array within java : metacodes, mappers and synapses - */ - getFilterData: function() { - var self = Filter - - var metacode, mapper, synapse - - $('#filter_by_metacode li').each(function() { - metacode = $(this).attr('data-id') - self.filters.metacodes.push(metacode) - self.visible.metacodes.push(metacode) - }) - - $('#filter_by_mapper li').each(function() { - mapper = ($(this).attr('data-id')) - self.filters.mappers.push(mapper) - self.visible.mappers.push(mapper) - }) - - $('#filter_by_synapse li').each(function() { - synapse = ($(this).attr('data-id')) - self.filters.synapses.push(synapse) - self.visible.synapses.push(synapse) - }) - }, - bindLiClicks: function() { - var self = Filter - $('#filter_by_metacode ul li').unbind().click(self.toggleMetacode) - $('#filter_by_mapper ul li').unbind().click(self.toggleMapper) - $('#filter_by_synapse ul li').unbind().click(self.toggleSynapse) + self.dataForPresentation.metacodes = [] + self.dataForPresentation.mappers = [] + self.dataForPresentation.synapses = [] + ReactApp.render() }, // an abstraction function for checkMetacodes, checkMappers, checkSynapses to reduce // code redundancy - /* - @param - */ updateFilters: function(collection, propertyToCheck, correlatedModel, filtersToUse, listToModify) { var self = Filter - var newList = [] var removed = [] var added = [] - // the first option enables us to accept // ['Topics', 'Synapses'] as 'collection' if (typeof collection === 'object') { @@ -166,41 +116,24 @@ const Filter = { } }) } - removed = _.difference(self.filters[filtersToUse], newList) added = _.difference(newList, self.filters[filtersToUse]) - - // remove the list items for things no longer present on the map _.each(removed, function(identifier) { - $('#filter_by_' + listToModify + ' li[data-id="' + identifier + '"]').fadeOut('fast', function() { - $(this).remove() - }) const index = self.visible[filtersToUse].indexOf(identifier) self.visible[filtersToUse].splice(index, 1) + delete self.dataForPresentation[filtersToUse][identifier] }) - - var model, li, jQueryLi - function sortAlpha(a, b) { - return a.childNodes[1].innerHTML.toLowerCase() > b.childNodes[1].innerHTML.toLowerCase() ? 1 : -1 - } - // for each new filter to be added, create a list item for it and fade it in _.each(added, function(identifier) { - model = DataModel[correlatedModel].get(identifier) || - DataModel[correlatedModel].find(function(model) { - return model.get(propertyToCheck) === identifier + const model = DataModel[correlatedModel].get(identifier) || + DataModel[correlatedModel].find(function(m) { + return m.get(propertyToCheck) === identifier }) - li = model.prepareLiForFilter() - jQueryLi = $(li).hide() - $('li', '#filter_by_' + listToModify + ' ul').add(jQueryLi.fadeIn('fast')) - .sort(sortAlpha).appendTo('#filter_by_' + listToModify + ' ul') + self.dataForPresentation[filtersToUse][identifier] = model.prepareDataForFilter() self.visible[filtersToUse].push(identifier) }) - // update the list of filters with the new list we just generated self.filters[filtersToUse] = newList - - // make sure clicks on list items still trigger the right events - self.bindLiClicks() + ReactApp.render() }, checkMetacodes: function() { var self = Filter @@ -219,114 +152,49 @@ const Filter = { var self = Filter self.updateFilters('Synapses', 'desc', 'Synapses', 'synapses', 'synapse') }, - filterAllMetacodes: function(e) { + filterAllMetacodes: function(toVisible) { var self = Filter - $('#filter_by_metacode ul li').addClass('toggledOff') - $('.showAllMetacodes').removeClass('active') - $('.hideAllMetacodes').addClass('active') - self.visible.metacodes = [] + self.visible.metacodes = toVisible ? self.filters.metacodes.slice() : [] + ReactApp.render() self.passFilters() }, - filterNoMetacodes: function(e) { + filterAllMappers: function(toVisible) { var self = Filter - $('#filter_by_metacode ul li').removeClass('toggledOff') - $('.showAllMetacodes').addClass('active') - $('.hideAllMetacodes').removeClass('active') - self.visible.metacodes = self.filters.metacodes.slice() + self.visible.mappers = toVisible ? self.filters.mappers.slice() : [] + ReactApp.render() self.passFilters() }, - filterAllMappers: function(e) { + filterAllSynapses: function(toVisible) { var self = Filter - $('#filter_by_mapper ul li').addClass('toggledOff') - $('.showAllMappers').removeClass('active') - $('.hideAllMappers').addClass('active') - self.visible.mappers = [] - self.passFilters() - }, - filterNoMappers: function(e) { - var self = Filter - $('#filter_by_mapper ul li').removeClass('toggledOff') - $('.showAllMappers').addClass('active') - $('.hideAllMappers').removeClass('active') - self.visible.mappers = self.filters.mappers.slice() - self.passFilters() - }, - filterAllSynapses: function(e) { - var self = Filter - $('#filter_by_synapse ul li').addClass('toggledOff') - $('.showAllSynapses').removeClass('active') - $('.hideAllSynapses').addClass('active') - self.visible.synapses = [] - self.passFilters() - }, - filterNoSynapses: function(e) { - var self = Filter - $('#filter_by_synapse ul li').removeClass('toggledOff') - $('.showAllSynapses').addClass('active') - $('.hideAllSynapses').removeClass('active') - self.visible.synapses = self.filters.synapses.slice() + self.visible.synapses = toVisible ? self.filters.synapses.slice() : [] + ReactApp.render() self.passFilters() }, // an abstraction function for toggleMetacode, toggleMapper, toggleSynapse // to reduce code redundancy // gets called in the context of a list item in a filter box - toggleLi: function(whichToFilter) { + toggleLi: function(whichToFilter, id) { var self = Filter - var id = $(this).attr('data-id') if (self.visible[whichToFilter].indexOf(id) === -1) { self.visible[whichToFilter].push(id) - $(this).removeClass('toggledOff') } else { const index = self.visible[whichToFilter].indexOf(id) self.visible[whichToFilter].splice(index, 1) - $(this).addClass('toggledOff') } + ReactApp.render() self.passFilters() }, - toggleMetacode: function() { + toggleMetacode: function(id) { var self = Filter - self.toggleLi.call(this, 'metacodes') - - if (self.visible.metacodes.length === self.filters.metacodes.length) { - $('.showAllMetacodes').addClass('active') - $('.hideAllMetacodes').removeClass('active') - } else if (self.visible.metacodes.length === 0) { - $('.showAllMetacodes').removeClass('active') - $('.hideAllMetacodes').addClass('active') - } else { - $('.showAllMetacodes').removeClass('active') - $('.hideAllMetacodes').removeClass('active') - } + self.toggleLi('metacodes', id) }, - toggleMapper: function() { + toggleMapper: function(id) { var self = Filter - self.toggleLi.call(this, 'mappers') - - if (self.visible.mappers.length === self.filters.mappers.length) { - $('.showAllMappers').addClass('active') - $('.hideAllMappers').removeClass('active') - } else if (self.visible.mappers.length === 0) { - $('.showAllMappers').removeClass('active') - $('.hideAllMappers').addClass('active') - } else { - $('.showAllMappers').removeClass('active') - $('.hideAllMappers').removeClass('active') - } + self.toggleLi('mappers', id) }, - toggleSynapse: function() { + toggleSynapse: function(id) { var self = Filter - self.toggleLi.call(this, 'synapses') - - if (self.visible.synapses.length === self.filters.synapses.length) { - $('.showAllSynapses').addClass('active') - $('.hideAllSynapses').removeClass('active') - } else if (self.visible.synapses.length === 0) { - $('.showAllSynapses').removeClass('active') - $('.hideAllSynapses').addClass('active') - } else { - $('.showAllSynapses').removeClass('active') - $('.hideAllSynapses').removeClass('active') - } + self.toggleLi('synapses', id) }, passFilters: function() { var self = Filter diff --git a/frontend/src/Metamaps/GlobalUI/ReactApp.js b/frontend/src/Metamaps/GlobalUI/ReactApp.js index f007bf47..22ee02ff 100644 --- a/frontend/src/Metamaps/GlobalUI/ReactApp.js +++ b/frontend/src/Metamaps/GlobalUI/ReactApp.js @@ -102,6 +102,7 @@ const ReactApp = { }, self.getMapProps(), self.getTopicProps(), + self.getFilterProps(), self.getMapsProps(), self.getTopicCardProps(), self.getChatProps()) @@ -121,8 +122,6 @@ const ReactApp = { launchNewMap: Map.launch, toggleMapInfoBox: InfoBox.toggleBox, infoBoxHtml: InfoBox.html, - toggleFilterBox: Filter.toggleBox, - filterBoxHtml: $('.filterBox')[0] && $('.filterBox')[0].outerHTML, openImportLightbox: () => ImportDialog.show(), forkMap: Map.fork, openHelpLightbox: () => self.openLightbox('cheatsheet'), @@ -187,6 +186,21 @@ const ReactApp = { handleInputMessage: ChatView.handleInputMessage } }, + getFilterProps: function() { + const self = ReactApp + return { + filterData: Filter.dataForPresentation, + toggleFilterBox: Filter.toggleBox, + allForFiltering: Filter.filters, + visibleForFiltering: Filter.visible, + toggleMetacode: Filter.toggleMetacode, + toggleMapper: Filter.toggleMapper, + toggleSynapse: Filter.toggleSynapse, + filterAllMetacodes: Filter.filterAllMetacodes, + filterAllMappers: Filter.filterAllMappers, + filterAllSynapses: Filter.filterAllSynapses + } + }, resize: function() { const self = ReactApp const maps = ExploreMaps.collection diff --git a/frontend/src/Metamaps/Map/index.js b/frontend/src/Metamaps/Map/index.js index 8d6c5aec..fad4cc0b 100644 --- a/frontend/src/Metamaps/Map/index.js +++ b/frontend/src/Metamaps/Map/index.js @@ -92,7 +92,6 @@ const Map = { const self = Map var start = function() { Map.setAccessRequest() - $('#filter_by_mapper h3').html('MAPPERS') // TODO: rewrite filter box in react Visualize.type = 'ForceDirected' JIT.prepareVizData() Filter.reset() diff --git a/frontend/src/components/MapView/FilterBox.js b/frontend/src/components/MapView/FilterBox.js deleted file mode 100644 index 6b6fdd34..00000000 --- a/frontend/src/components/MapView/FilterBox.js +++ /dev/null @@ -1,16 +0,0 @@ -import React, { Component, PropTypes } from 'react' - -class FilterBox extends Component { - static propTypes = { - isMap: PropTypes.bool, - filterBoxHtml: PropTypes.string - } - - render () { - const { filterBoxHtml } = this.props - const html = {__html: filterBoxHtml} - return
    - } -} - -export default FilterBox diff --git a/frontend/src/components/MapView/MapButtons.js b/frontend/src/components/MapView/MapButtons.js index c4b3c4d2..165cdc73 100644 --- a/frontend/src/components/MapView/MapButtons.js +++ b/frontend/src/components/MapView/MapButtons.js @@ -1,6 +1,6 @@ import React, { Component, PropTypes } from 'react' -import FilterBox from './FilterBox' +import FilterBox from '../common/FilterBox' class MapButtons extends Component { static propTypes = { @@ -9,11 +9,20 @@ class MapButtons extends Component { onImportClick: PropTypes.func, onForkClick: PropTypes.func, onFilterClick: PropTypes.func, - filterBoxHtml: PropTypes.string + allForFiltering: PropTypes.object, + visibleForFiltering: PropTypes.object, + toggleMetacode: PropTypes.func, + toggleMapper: PropTypes.func, + toggleSynapse: PropTypes.func, + filterAllMetacodes: PropTypes.func, + filterAllMappers: PropTypes.func, + filterAllSynapses: PropTypes.func, } render () { - const { currentUser, canEditMap, filterBoxHtml, onFilterClick, onImportClick, onForkClick } = this.props + const { currentUser, canEditMap, filterBoxHtml, onFilterClick, onImportClick, onForkClick, + filterData, allForFiltering, visibleForFiltering, toggleMetacode, toggleMapper, toggleSynapse, + filterAllMetacodes, filterAllMappers, filterAllSynapses } = this.props return
    {canEditMap &&
    @@ -24,7 +33,15 @@ class MapButtons extends Component {
    Filter
    - +
    {currentUser &&
    diff --git a/frontend/src/components/MapView/index.js b/frontend/src/components/MapView/index.js index 24c61b2b..204c5e09 100644 --- a/frontend/src/components/MapView/index.js +++ b/frontend/src/components/MapView/index.js @@ -18,7 +18,15 @@ class MapView extends Component { onMapStar: PropTypes.func, onMapUnstar: PropTypes.func, toggleFilterBox: PropTypes.func, - filterBoxHtml: PropTypes.string, + 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, toggleMapInfoBox: PropTypes.func, infoBoxHtml: PropTypes.string, currentUser: PropTypes.object, @@ -61,7 +69,9 @@ class MapView extends Component { render = () => { const { mobile, map, currentUser, onOpen, onClose, - toggleMapInfoBox, toggleFilterBox, infoBoxHtml, filterBoxHtml, + toggleMapInfoBox, infoBoxHtml, toggleFilterBox, allForFiltering, visibleForFiltering, + toggleMetacode, toggleMapper, toggleSynapse, filterAllMetacodes, + filterAllMappers, filterAllSynapses, filterData, openImportLightbox, forkMap, openHelpLightbox, mapIsStarred, onMapStar, onMapUnstar, onZoomExtents, onZoomIn, onZoomOut, hasLearnedTopicCreation } = this.props @@ -79,10 +89,18 @@ class MapView extends Component { return
    + onFilterClick={toggleFilterBox} + filterData={filterData} + allForFiltering={allForFiltering} + visibleForFiltering={visibleForFiltering} + toggleMetacode={toggleMetacode} + toggleMapper={toggleMapper} + toggleSynapse={toggleSynapse} + filterAllMetacodes={filterAllMetacodes} + filterAllMappers={filterAllMappers} + filterAllSynapses={filterAllSynapses} /> {currentUser && } diff --git a/frontend/src/components/common/FilterBox.js b/frontend/src/components/common/FilterBox.js new file mode 100644 index 00000000..0899e008 --- /dev/null +++ b/frontend/src/components/common/FilterBox.js @@ -0,0 +1,105 @@ +import React, { Component, PropTypes } from 'react' + +class FilterBox extends Component { + static propTypes = { + 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 + } + + render () { + const { filterData, allForFiltering, visibleForFiltering, toggleMetacode, toggleMapper, toggleSynapse, + filterAllMetacodes, filterAllMappers, filterAllSynapses } = this.props + + const mapperAllClass = "showAll showAllMappers" + + (allForFiltering.mappers.length === visibleForFiltering.mappers.length ? ' active' : '') + const mapperNoneClass = "hideAll hideAllMappers" + + (visibleForFiltering.mappers.length === 0 ? ' active' : '') + const metacodeAllClass = "showAll showAllMetacodes" + + (allForFiltering.metacodes.length === visibleForFiltering.metacodes.length ? ' active' : '') + const metacodeNoneClass = "hideAll hideAllMetacodes" + + (visibleForFiltering.metacodes.length === 0 ? ' active' : '') + const synapseAllClass = "showAll showAllSynapses" + + (allForFiltering.synapses.length === visibleForFiltering.synapses.length ? ' active' : '') + const synapseNoneClass = "hideAll hideAllSynapses" + + (visibleForFiltering.synapses.length === 0 ? ' active' : '') + return
    +
    +

    FILTER BY

    +
    +

    MAPPERS

    + filterAllMappers()}>NONE + filterAllMappers(true)}>ALL +
    +
      + {allForFiltering.mappers.map(m => { + const data = filterData.mappers[m] + const isVisible = visibleForFiltering.mappers.indexOf(m) > -1 + return + })} +
    +
    +
    + +
    +

    METACODES

    + filterAllMetacodes()}>NONE + filterAllMetacodes(true)}>ALL +
    +
      + {allForFiltering.metacodes.map(m => { + const data = filterData.metacodes[m] + const isVisible = visibleForFiltering.metacodes.indexOf(m) > -1 + return + })} +
    +
    +
    + +
    +

    SYNAPSES

    + filterAllSynapses()}>NONE + filterAllSynapses(true)}>ALL +
    +
      + {allForFiltering.synapses.map(s => { + const data = filterData.synapses[s] + const isVisible = visibleForFiltering.synapses.indexOf(s) > -1 + return + })} +
    +
    +
    +
    +
    + } +} + +function Mapper({ visible, name, id, image, toggle }) { + return
  • toggle(id)} key={id} className={visible ? '' : 'toggledOff'}> + {name} +

    {name}

    +
    • +} + +function Metacode({ visible, name, id, icon, toggle }) { + return
  • toggle(id)} key={id} className={visible ? '' : 'toggledOff'}> + {name} +

    {name.toLowerCase()}

    +
    • +} + +function Synapse({ visible, desc, icon, toggle }) { + return
  • toggle(desc)} key={desc} className={visible ? '' : 'toggledOff'}> + synapse icon +

    {desc}

    +
    • +} + +export default FilterBox