Topology filter overhaul, still needs backend support

client/app/scripts/components/app.js

@@ -107,6 +107,7 @@ export default class App extends React.Component {
           highlightedEdgeIds={this.state.highlightedEdgeIds} detailsWidth={detailsWidth}
           selectedNodeId={this.state.selectedNodeId} topMargin={topMargin}
           forceRelayout={this.state.forceRelayout}
+          topologyOptions={this.state.activeTopologyOptions}
           topologyId={this.state.currentTopologyId} />
 
         <Sidebar>

client/app/scripts/components/topology-option-action.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { changeTopologyOption } from '../actions/app-actions';
 
 export default class TopologyOptionAction extends React.Component {
+
   constructor(props, context) {
     super(props, context);
     this.onClick = this.onClick.bind(this);
@@ -10,14 +11,18 @@ export default class TopologyOptionAction extends React.Component {
 
   onClick(ev) {
     ev.preventDefault();
-    changeTopologyOption(this.props.option, this.props.value, this.props.topologyId);
+    const { optionId, topologyId, item } = this.props;
+    changeTopologyOption(optionId, item.get('value'), topologyId);
   }
 
   render() {
+    const { activeValue, item } = this.props;
+    const className = activeValue === item.get('value')
+      ? 'topology-option-action topology-option-action-selected' : 'topology-option-action';
     return (
-      <span className="sidebar-item-action" onClick={this.onClick}>
-        {this.props.value}
-      </span>
+      <div className={className} onClick={this.onClick}>
+        {item.get('label')}
+      </div>
     );
   }
 }

client/app/scripts/components/topology-options.js

@@ -3,66 +3,28 @@ import React from 'react';
 import TopologyOptionAction from './topology-option-action';
 
 export default class TopologyOptions extends React.Component {
-  renderAction(action, option, topologyId) {
-    return (
-      <TopologyOptionAction option={option} value={action} topologyId={topologyId} key={action} />
-    );
-  }
 
-  /**
-   * transforms a list of options into one sidebar-item.
-   * The sidebar text comes from the active option. the actions come from the
-   * remaining items.
-   */
-  renderOption(items) {
-    let activeText;
-    let activeValue;
-    const actions = [];
-    const activeOptions = this.props.activeOptions;
-    const topologyId = this.props.topologyId;
-    const option = items.first().get('option');
-
-    // find active option value
-    if (activeOptions && activeOptions.has(option)) {
-      activeValue = activeOptions.get(option);
-    } else {
-      // get default value
-      items.forEach(item => {
-        if (item.get('default')) {
-          activeValue = item.get('value');
-        }
-      });
-    }
-
-    // render active option as text, add other options as actions
-    items.forEach(item => {
-      if (item.get('value') === activeValue) {
-        activeText = item.get('display');
-      } else {
-        actions.push(this.renderAction(item.get('value'), item.get('option'), topologyId));
-      }
-    }, this);
+  renderOption(option) {
+    const { activeOptions, topologyId } = this.props;
+    const optionId = option.get('id');
+    const activeValue = activeOptions && activeOptions.has(optionId)
+      ? activeOptions.get(optionId) : option.get('defaultValue');
 
     return (
-      <div className="sidebar-item" key={option}>
-        {activeText}
-        <span className="sidebar-item-actions">
-          {actions}
-        </span>
+      <div className="topology-option" key={optionId}>
+        <div className="topology-option-wrapper">
+          {option.get('options').map(item => <TopologyOptionAction
+            optionId={optionId} topologyId={topologyId} key={item.get('value')}
+            activeValue={activeValue} item={item} />)}
+        </div>
       </div>
     );
   }
 
   render() {
-    const options = this.props.options.map((items, optionId) => {
-      let itemsMap = items.map(item => item.set('option', optionId));
-      itemsMap = itemsMap.set('option', optionId);
-      return itemsMap;
-    });
-
     return (
       <div className="topology-options">
-        {options.toIndexedSeq().map(items => this.renderOption(items))}
+        {this.props.options.toIndexedSeq().map(option => this.renderOption(option))}
       </div>
     );
   }