Fixed minor id related issues

src/vue/charts/CorrelationAnalysis.vue

@@ -15,14 +15,20 @@
       <hr class="fjs-seperator"/>
       <fieldset class="fjs-correlation-method">
         <legend>Correlation Method</legend>
-        <input type="radio" id="fjs-param-method-1" value="pearson" v-model="params.method">
-        <label for="fjs-param-method-1">Pearson</label>
+        <label>
+          <input type="radio" value="pearson" v-model="params.method">
+          Pearson
+        </label>
         <br/>
-        <input type="radio" id="fjs-param-method-2" value="spearman" v-model="params.method">
-        <label for="fjs-param-method-2">Spearman</label>
+        <label>
+          <input type="radio" value="spearman" v-model="params.method">
+          Spearman
+        </label>
         <br/>
-        <input type="radio" id="fjs-param-method-3" value="kendall" v-model="params.method">
-        <label for="fjs-param-method-3">Kendall</label>
+        <label>
+          <input type="radio" value="kendall" v-model="params.method">
+          Kendall
+        </label>
       </fieldset>
     </control-panel>
 

src/vue/charts/Heatmap.vue

@@ -13,46 +13,64 @@
         <fieldset>
           <legend>Expression Level</legend>
           <div>
-            <label for="fjs-level-1">Mean</label>
-            <input type="radio" id="fjs-level-1" value="mean" v-model="rankingMethod">
+            <input type="radio" value="mean" v-model="rankingMethod">
+            <label>
+              Mean
+            </label>
           </div>
           <div>
-            <label for="fjs-level-2">Median</label>
-            <input type="radio" id="fjs-level-2" value="median" v-model="rankingMethod">
+            <input type="radio" value="median" v-model="rankingMethod">
+            <label>
+              Median
+            </label>
           </div>
         </fieldset>
         <fieldset>
           <legend>Expression Variability</legend>
           <div>
-            <label for="fjs-var-1">Variance</label>
-            <input type="radio" id="fjs-var-1" value="variance" v-model="rankingMethod">
+            <input type="radio" value="variance" v-model="rankingMethod">
+            <label>
+              Variance
+            </label>
           </div>
         </fieldset>
         <fieldset>
           <legend>Differential Expression</legend>
           <div>
-            <label for="fjs-dgea-1">logFC</label>
-            <input type="radio" id="fjs-dgea-1" value="logFC" v-model="rankingMethod">
+            <input type="radio" value="logFC" v-model="rankingMethod">
+            <label>
+              logFC
+            </label>
           </div>
           <div>
-            <label for="fjs-dgea-2">t</label>
-            <input type="radio" id="fjs-dgea-2" value="t" v-model="rankingMethod">
+            <input type="radio" value="t" v-model="rankingMethod">
+            <label>
+              t
+            </label>
           </div>
           <div>
-            <label for="fjs-dgea-3">F</label>
-            <input type="radio" id="fjs-dgea-3" value="F" v-model="rankingMethod">
+            <input type="radio" value="F" v-model="rankingMethod">
+            <label>
+              F
+            </label>
           </div>
           <div>
-            <label for="fjs-dgea-4">B</label>
-            <input type="radio" id="fjs-dgea-4" value="B" v-model="rankingMethod">
+            <input type="radio" value="B" v-model="rankingMethod">
+            <label>
+              B
+            </label>
           </div>
           <div>
-            <label for="fjs-dgea-5">P.Value</label>
-            <input type="radio" id="fjs-dgea-5" value="P.Val" v-model="rankingMethod">
+            <input type="radio" value="P.Val" v-model="rankingMethod">
+            <label>
+              P.Value
+            </label>
           </div>
           <div>
-            <label for="fjs-dgea-6">adj.P.Value</label>
-            <input type="radio" id="fjs-dgea-6" value="adj.P.Val" v-model="rankingMethod">
+            <input type="radio" value="adj.P.Val" v-model="rankingMethod">
+            <label>
+              adj.P.Value
+            </label>
           </div>
         </fieldset>
       </div>
@@ -62,12 +80,16 @@
         <fieldset class="fjs-cluster-algo-fieldset">
           <legend>Algorithm</legend>
           <div>
-            <label for="fjs-hclust-radio">Hierarch.</label>
-            <input type="radio" id="fjs-hclust-radio" value="hclust" v-model="cluster.algorithm"/>
+            <label>
+              <input type="radio" value="hclust" v-model="cluster.algorithm"/>
+              Hierarch.
+            </label>
           </div>
           <div>
-            <label for="fjs-kmeans-radio">KMeans</label>
-            <input type="radio" id="fjs-kmeans-radio" value="kmeans" v-model="cluster.algorithm"/>
+            <label>
+              <input type="radio" value="kmeans" v-model="cluster.algorithm"/>
+              KMeans
+            </label>
           </div>
         </fieldset>
 
@@ -92,42 +114,45 @@
             </select>
           </div>
           <div class="fjs-cluster-ranges">
-            <label for="fjs-n-row-clusters">{{ cluster.options.n_row_clusters }} Row Clusters</label>
-            <input id="fjs-n-row-clusters"
-                   type="range"
-                   min="1" max="20"
-                   v-model="cluster.options.n_row_clusters"/>
+            <label>
+              <input type="range"
+                     min="1" max="20"
+                     v-model="cluster.options.n_row_clusters"/>
+              {{ cluster.options.n_row_clusters }} Row Clusters
+            </label>
           </div>
           <div class="fjs-cluster-ranges">
-            <label for="fjs-n-col-clusters">{{ cluster.options.n_col_clusters }} Col Clusters</label>
-            <input id="fjs-n-col-clusters"
-                   type="range"
-                   min="1" max="20"
-                   v-model="cluster.options.n_col_clusters"/>
+            <label>
+              <input type="range"
+                     min="1" max="20"
+                     v-model="cluster.options.n_col_clusters"/>
+              {{ cluster.options.n_col_clusters }} Col Clusters
+            </label>
           </div>
         </fieldset>
 
         <fieldset class="fjs-cluster-option-fieldset" v-if="cluster.algorithm == 'kmeans'">
           <legend>Options</legend>
           <div class="fjs-cluster-ranges">
-            <label for="fjs-n-row-centroids">{{ cluster.options.n_row_centroids }} Row Centroids</label>
-            <input id="fjs-n-row-centroids"
-                   type="range"
+            <label>
+            <input type="range"
                    min="1" max="20"
                    v-model="cluster.options.n_row_centroids"/>
+              {{ cluster.options.n_row_centroids }} Row Centroids
+            </label>
           </div>
           <div class="fjs-cluster-ranges">
-            <label for="fjs-n-col-centroids">{{ cluster.options.n_col_centroids }} Col Centroids</label>
-            <input id="fjs-n-col-centroids"
-                   type="range"
+            <label>
+            <input type="range"
                    min="1" max="20"
                    v-model="cluster.options.n_col_centroids"/>
+              {{ cluster.options.n_col_centroids }} Col Centroids
+            </label>
           </div>
         </fieldset>
       </div>
     </control-panel>
 
-
     <svg :height="height" :width="width">
       <g :transform="`translate(${margin.left}, ${margin.top})`">
         <svg-canvas name="fjs-canvas" :width="padded.width" :height="padded.height"/>

src/vue/charts/PCA.vue

@@ -14,18 +14,25 @@
       </data-box>
       <hr class="fjs-seperator"/>
       <div>
-        <label for="fjs-pc-x-select">X-Axis</label>
-        <select id="fjs-pc-x-select" v-model="pcX">
-          <option :value="i" v-for="i in components">Principal Component {{i}}</option>
-        </select><br/>
-        <label for="fjs-pc-y-select">Y-Axis</label>
-        <select id="fjs-pc-y-select" v-model="pcY">
-          <option :value="i" v-for="i in components">Principal Component {{i}}</option>
-        </select>
+        <label>
+          <select v-model="pcX">
+            <option :value="i" v-for="i in components">Principal Component {{i}}</option>
+          </select>
+          X-Axis
+        </label>
+        <br/>
+        <label>
+          <select v-model="pcY">
+            <option :value="i" v-for="i in components">Principal Component {{i}}</option>
+          </select>
+          Y-Axis
+        </label>
       </div>
       <div>
-        <input id="fjs-whiten-check" type="checkbox" v-model="params.whiten"/>
-        <label for="fjs-whiten-check">Whiten Output</label>
+        <label>
+          <input type="checkbox" v-model="params.whiten"/>
+          Whiten Output
+        </label>
       </div>
     </control-panel>
 

src/vue/components/Chart.vue

@@ -25,7 +25,7 @@
         this.$emit('resize', {height: chartHeight, width: chartWidth})
       },
       focusControlPanel () {
-        const controlPanel = this.$children.filter(d => d.$options.name === 'control-panel')[0]
+        const controlPanel = this.$children.find(d => d.$options.name === 'control-panel')
         controlPanel.focus()
       }
     }