several small style and usability fixes

package-lock.json

 {
-  "name": "Fractalis",
-  "version": "0.1.0",
+  "name": "fractalis",
+  "version": "0.1.8",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

src/assets/base.sass

-@import '~assets/css-reset.css'
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons')
 @import '~tippy.js/dist/tippy.css'
 
@@ -15,4 +14,4 @@
 
 .fjs-seperator
   width: 100%
-  margin: 20px 0 20px 0
+  margin: 20px 0 20px 0
\ No newline at end of file

src/assets/css-reset.css

-/*
-YUI 3.18.1 (build f7e7bcb)
-Copyright 2014 Yahoo! Inc. All rights reserved.
-Licensed under the BSD License.
-http://yuilibrary.com/license/
-*/
-
-.yui3-cssreset html{color:#000;background:#FFF}.yui3-cssreset body,.yui3-cssreset div,.yui3-cssreset dl,.yui3-cssreset dt,.yui3-cssreset dd,.yui3-cssreset ul,.yui3-cssreset ol,.yui3-cssreset li,.yui3-cssreset h1,.yui3-cssreset h2,.yui3-cssreset h3,.yui3-cssreset h4,.yui3-cssreset h5,.yui3-cssreset h6,.yui3-cssreset pre,.yui3-cssreset code,.yui3-cssreset form,.yui3-cssreset fieldset,.yui3-cssreset legend,.yui3-cssreset input,.yui3-cssreset textarea,.yui3-cssreset p,.yui3-cssreset blockquote,.yui3-cssreset th,.yui3-cssreset td{margin:0;padding:0}.yui3-cssreset table{border-collapse:collapse;border-spacing:0}.yui3-cssreset fieldset,.yui3-cssreset img{border:0}.yui3-cssreset address,.yui3-cssreset caption,.yui3-cssreset cite,.yui3-cssreset code,.yui3-cssreset dfn,.yui3-cssreset em,.yui3-cssreset strong,.yui3-cssreset th,.yui3-cssreset var{font-style:normal;font-weight:normal}.yui3-cssreset ol,.yui3-cssreset ul{list-style:none}.yui3-cssreset caption,.yui3-cssreset th{text-align:left}.yui3-cssreset h1,.yui3-cssreset h2,.yui3-cssreset h3,.yui3-cssreset h4,.yui3-cssreset h5,.yui3-cssreset h6{font-size:100%;font-weight:normal}.yui3-cssreset q:before,.yui3-cssreset q:after{content:''}.yui3-cssreset abbr,.yui3-cssreset acronym{border:0;font-variant:normal}.yui3-cssreset sup{vertical-align:text-top}.yui3-cssreset sub{vertical-align:text-bottom}.yui3-cssreset input,.yui3-cssreset textarea,.yui3-cssreset select{font-family:inherit;font-size:inherit;font-weight:inherit}.yui3-cssreset input,.yui3-cssreset textarea,.yui3-cssreset select{*font-size:100%}.yui3-cssreset legend{color:#000}#yui3-css-stamp.cssreset-context{display:none}

src/vue/charts/CorrelationAnalysis.vue

@@ -233,6 +233,9 @@
           .on('end', () => {
             this.error = ''
             if (!d3.event.selection) {
+              if (this.selectedPoints.length === 0) {
+                return
+              }
               this.selectedPoints = []
             } else {
               const [[x0, y0], [x1, y1]] = d3.event.selection
@@ -411,7 +414,7 @@
       border: solid 1px #fff
       text-align: left
       border-radius: 3px
-      margin: 1%
+      padding: 0 0.5vw 0 0.5vw
   svg
     .fjs-lin-reg-line
       stroke: #ff5e00

src/vue/charts/Heatmap.vue

@@ -488,6 +488,7 @@
         margin: 0.4vh 0 0.4vh 0
         border: solid 1px #fff
         border-radius: 3px
+        padding: 0 0.5vw 0 0.5vw
     .fjs-clustering-params
       display: flex
       flex-direction: column
@@ -495,6 +496,7 @@
       .fjs-cluster-algo-fieldset
         border: solid 1px #fff
         border-radius: 3px
+        padding: 0 0.5vw 0 0.5vw
         margin: 0.4vh 0 0.4vh 0
         div
           float: left
@@ -503,6 +505,7 @@
         flex-direction: column
         border: solid 1px #fff
         border-radius: 3px
+        padding: 0 0.5vw 0 0.5vw
         margin: 0.4vh 0 0.4vh 0
         div
           margin-top: 3px

src/vue/charts/PCA.vue

@@ -252,6 +252,9 @@
           .extent([[0, 0], [this.padded.width, this.padded.height]])
           .on('end', () => {
             if (!d3.event.selection) {
+              if (this.selectedPoints.length === 0) {
+                return
+              }
               this.selectedPoints = []
             } else {
               const [[x0, y0], [x1, y1]] = d3.event.selection

src/vue/components/Chart.vue

 <template>
-  <div class="fjs-chart" @click="focusControlPanel">
+  <div class="fjs-chart" @mousedown.capture="focusControlPanel">
     <slot></slot>
   </div>
 </template>

src/vue/components/ControlPanel.vue

@@ -124,7 +124,8 @@
     height: 100vh
     overflow-y: auto
     flex-shrink: 0
-    font-size: 0.875em
+    font-size: calc(0.5vh + 7px) /* min 7px */
+    z-index: 9999
     .fjs-panel-header
       display: flex
       justify-content: space-between

src/vue/components/DataBox.vue

@@ -142,6 +142,7 @@
         flex-direction: column
         .fjs-data-entry-header
           display: flex
+          align-items: center
           justify-content: space-between
           cursor: pointer
           padding: 0.25vh 0.25vw 0.25vh 0.25vw

webpack.config.js

@@ -15,7 +15,7 @@ if (env === 'production') {
   plugins.push(new webpack.DefinePlugin({'process.env': {NODE_ENV: '"production"'}}))
   filename = `${library}-${VERSION}.min.js`
 } else {
-  filename = `${library}-${VERSION}.js`
+  filename = `${library}.js`
 }
 
 module.exports = {