Added switch feature for control panel

src/store/actions.js

@@ -73,5 +73,13 @@ export default {
    */
   unsetTask: (context, {taskID}) => {
     context.commit(types.UNSET_TASK, {taskID})
+  },
+  /**
+   * Commits a control panel vm for keeping track of all such instances.
+   * @param context The context of the action.
+   * @param taskID The id of the task to remove.
+   */
+  addControlPanel: (context, vm) => {
+    context.commit(types.ADD_CONTROL_PANEL, {vm})
   }
 }

src/store/getters.js

@@ -3,5 +3,6 @@ export default {
   tasks: state => state.tasks,
   subsets: state => state.subsets,
   requestManager: state => state.requestManager,
+  controlPanels: state => state.controlPanels,
   filter: state => name => state.filters[name]
 }

src/store/mutation-types.js

@@ -4,5 +4,6 @@ export default {
   SET_SUBSETS: 'SET_SUBSETS',
   SET_FILTER: 'SET_FILTER',
   SET_TASK: 'SET_TASK',
-  UNSET_TASK: 'UNSET_TASK'
+  UNSET_TASK: 'UNSET_TASK',
+  ADD_CONTROL_PANEL: 'ADD_CONTROL_PANEL'
 }

src/store/mutations.js

@@ -27,5 +27,8 @@ export default {
   },
   [types.UNSET_TASK] (state, {taskID}) {
     Vue.delete(state.tasks, taskID)
+  },
+  [types.ADD_CONTROL_PANEL] (state, {vm}) {
+    state.controlPanels.push(vm)
   }
 }

src/store/store.js

@@ -10,6 +10,7 @@ const state = {
   data: [],
   tasks: {},
   requestManager: null,
+  controlPanels: [],
   subsets: [],
   filters: {
     ids: []

src/vue/charts/Boxplot.vue

 <template>
-  <div class="fjs-boxplot">
+  <div class="fjs-boxplot" @click="$emit('focus')">
 
-    <control-panel class="fjs-control-panel">
+    <control-panel class="fjs-control-panel" focus="focus">
       <data-box class="fjs-data-box"
                 header="Numerical Variables"
                 dataType="numerical"
@@ -23,6 +23,7 @@
         <input id="fjs-show-kde-check" type="checkbox" v-model="params.showKDE"/>
         <label for="fjs-show-kde-check">Show Density Est.</label>
       </div>
+      <task-view></task-view>
     </control-panel>
 
     <div class="fjs-vis-container">
@@ -114,7 +115,6 @@
         </g>
       </svg>
     </div>
-    <task-view></task-view>
   </div>
 </template>
 
@@ -124,11 +124,11 @@
   import runAnalysis from '../mixins/run-analysis'
   import * as d3 from 'd3'
   import { TweenLite } from 'gsap'
-  import TaskView from '../components/TaskView.vue'
   import deepFreeze from 'deep-freeze-strict'
   import { truncateTextUntil } from '../mixins/utils'
   import tooltip from '../directives/tooltip'
   import ControlPanel from '../components/ControlPanel.vue'
+  import TaskView from '../components/TaskView.vue'
   export default {
     name: 'boxplot',
     data () {
@@ -364,9 +364,9 @@
       }
     },
     components: {
+      TaskView,
       ControlPanel,
-      DataBox,
-      TaskView
+      DataBox
     },
     directives: {
       tooltip

src/vue/charts/CorrelationAnalysis.vue

 <template>
-  <div class="fjs-correlation-analysis">
+  <div class="fjs-correlation-analysis" @click="$emit('focus')">
 
-    <control-panel class="fjs-control-panel">
+    <control-panel class="fjs-control-panel" focus="focus">
       <data-box class="fjs-data-box"
                 header="X and Y variables"
                 dataType="numerical"
@@ -24,6 +24,7 @@
         <input type="radio" id="fjs-param-method-3" value="kendall" v-model="params.method">
         <label for="fjs-param-method-3">Kendall</label>
       </fieldset>
+      <task-view></task-view>
     </control-panel>
 
     <div class="fjs-vis-container">
@@ -121,6 +122,7 @@
   import tooltip from '../directives/tooltip.js'
   import deepFreeze from 'deep-freeze-strict'
   import ControlPanel from '../components/ControlPanel.vue'
+  import TaskView from '../components/TaskView.vue'
   export default {
     name: 'correlation-analysis',
     data () {
@@ -450,6 +452,7 @@
       window.removeEventListener('resize', this.handleResize)
     },
     components: {
+      TaskView,
       ControlPanel,
       DataBox
     },

src/vue/charts/Heatmap.vue

 <template>
-  <div class="fjs-heatmap">
-    <control-panel>
+  <div class="fjs-heatmap" @click="$emit('focus')">
+    <control-panel focus="focus">
       <data-box class="fjs-data-box"
                 header="Numerical Array Data"
                 dataType="numerical_array"
                 v-on:update="update_numericArrayData">
       </data-box>
+      <task-view></task-view>
     </control-panel>
 
     <div class="fjs-vis-container">
@@ -46,7 +47,6 @@
         </g>
       </svg>
     </div>
-    <task-view></task-view>
   </div>
 </template>
 
@@ -56,10 +56,10 @@
   import runAnalysis from '../mixins/run-analysis'
   import * as d3 from 'd3'
   import tooltip from '../directives/tooltip.js'
-  import TaskView from '../components/TaskView.vue'
   import deepFreeze from 'deep-freeze-strict'
   import { truncateTextUntil } from '../mixins/utils'
   import ControlPanel from '../components/ControlPanel.vue'
+  import TaskView from '../components/TaskView.vue'
   export default {
     name: 'heatmap',
     data () {
@@ -223,9 +223,9 @@
       window.removeEventListener('resize', this.handleResize)
     },
     components: {
+      TaskView,
       ControlPanel,
-      DataBox,
-      TaskView
+      DataBox
     },
     directives: {
       tooltip

src/vue/components/ControlPanel.vue

 <template>
   <div class="fjs-control-panel"
        :style="{left: tweened.position.left + 'px'}"
-       @mouseover="showPanel"
-       @mouseout="hidePanel">
+       v-show="focused"
+       @mouseover="locked ? noop() : show()"
+       @mouseout="locked ? noop() : hide()">
     <span class="fjs-lock-btn" v-html="lockIcon" @click="toggleLock"></span>
     <slot></slot>
     <task-view></task-view>
@@ -13,11 +14,20 @@
 <script>
   import TaskView from './TaskView.vue'
   import { TweenLite } from 'gsap'
+  import store from '../../store/store'
   export default {
     name: 'control-panel',
+    props: {
+      focus: {
+        type: String,
+        required: true
+      }
+    },
     data () {
       return {
+        focused: true,
         locked: false,
+        expanded: false,
         tweened: {
           position: {
             left: 0
@@ -31,30 +41,58 @@
       }
     },
     methods: {
+      noop () {},
       toggleLock () {
         this.locked = !this.locked
+        this.propagateState()
       },
-      showPanel () {
-        if (this.locked) {
-          return
-        }
+      show (animate) {
+        animate = typeof animate === 'undefined' ? true : animate
         const panelWidth = window.innerWidth - this.$el.getBoundingClientRect().width
-        return TweenLite.to(this.tweened.position, 0.75, {left: panelWidth})
+        this.expanded = true
+        this.propagateState()
+        return TweenLite.to(this.tweened.position, animate ? 0.75 : 0, {left: panelWidth})
       },
-      hidePanel () {
-        if (this.locked) {
-          return
-        }
-        return TweenLite.to(this.tweened.position, 0.75, {left: window.innerWidth * 0.98})
+      hide (animate) {
+        animate = typeof animate === 'undefined' ? true : animate
+        this.expanded = false
+        this.propagateState()
+        return TweenLite.to(this.tweened.position, animate ? 0.75 : 0, {left: window.innerWidth * 0.98})
+      },
+      unFocus () {
+        this.focused = false
+      },
+      unfocusAll () {
+        store.getters.controlPanels.forEach(panel => {
+          panel.unFocus()
+        })
+      },
+      propagateState () {
+        store.getters.controlPanels.forEach(panel => {
+          panel.locked = this.locked
+          panel.expanded = this.expanded
+        })
       }
     },
     mounted () {
       window.addEventListener('resize', () => {
         this.locked = false
-        this.hidePanel()
+        this.hide()
       })
       this.tweened.position.left = window.innerWidth
-      this.showPanel().eventCallback('onComplete', this.hidePanel)
+      this.show().eventCallback('onComplete', this.hide)
+    },
+    created () {
+      store.dispatch('addControlPanel', this)
+      this.$parent.$on(this.focus, () => {
+        this.unfocusAll()
+        this.focused = true
+        this.$nextTick(() => {
+          this.expanded ? this.show(false) : this.hide(false)
+        })
+      })
+      this.unfocusAll()
+      this.focused = true
     },
     components: {
       TaskView
@@ -75,7 +113,7 @@
     height: 100%
     min-width: 15vw
     .fjs-lock-btn
-      margin-bottom: 50%
+      margin-bottom: 20%
       cursor: pointer
     .fjs-balancer
       margin-top: auto

test/charts/correlationAnalysis/correlation-analysis.html

@@ -11,6 +11,9 @@
 <div style="height: 50%; width: 50%">
   <div id="placeholder1"></div>
 </div>
+<div style="height: 50%; width: 50%">
+  <div id="placeholder2"></div>
+</div>
 </body>
 
 <script>
@@ -86,4 +89,5 @@
   }
 
   fjs.setChart({chart: 'correlation-analysis', selector: '#placeholder1'})
+  fjs.setChart({chart: 'boxplot', selector: '#placeholder2'})
 </script>