Version 1.16.0: Quality of Life 2 (#107)

* Plot tick and axis visibility improvement

* Clickable home logo

* Improved understandability of export data options

* Bumped version to 1.16.0

* Fixed number and text form components

* Checkboxes fixed

* Pressing enter while editing an axis will now trigger the update

* Adjusted selectors to have the same fontsize as other form items

* Adjusted selector bottom marigin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "md-analysis-cli",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "private": true,
   "author": {
     "name": "Julian Martinsson Bonde",

src/App.vue

@@ -1,7 +1,10 @@
 <template>
     <div id="app" style="height: 100%;">
         <div class="mdac-header px-3">
-            <div class="title-container">
+            <div 
+                class="title-container clickable"
+                @click="setView('pcp')"
+            >
                 MDAC
             </div>
 

src/components/inputs/CheckboxInput.vue

@@ -0,0 +1,60 @@
+<template>
+    <div class="labeled-input-container mb-1" >
+        <div @click="cbox.click()" class="clickable">
+            <span class="input-group-text">
+                <slot />
+            </span>
+        </div>
+        <div style="display:flex; justify-content: end;">
+            <input 
+                ref="cbox"
+                type="checkbox" 
+                v-model="model"
+            >
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { defineModel, ref } from "vue";
+
+const model = defineModel();
+
+const cbox = ref(null);
+
+</script>
+
+<style lang="scss" scoped>
+
+    .labeled-input-container {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: 0.5em;
+    }
+    
+    .input-group-text {
+        font-size: 0.8em;
+        min-width: 50px;
+        padding: 0.1em 0.5em 0.1em 0.4em;
+
+
+    }
+    .input-group-prepend {
+        padding: 0;
+    }
+
+    .form-control  {
+        padding: 0.1rem 0 0.1rem 0.4rem;
+        font-size: 0.8em !important;
+        font-family: monospace;
+        text-align: right;
+        padding-right: 4px;
+    }
+
+    .input-number {
+        height: 1.8em;
+        font-size: 0.8em;
+        min-width: 30px;
+    }
+
+</style>

src/components/inputs/NumberInput.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="labeled-input-container mb-1">
+        <div>
+            <span class="input-group-text">
+                <slot />
+            </span>
+        </div>
+        <input 
+            class="input-number"
+            type="number" 
+            :step="props.step" 
+            :max="props.max" 
+            :min="props.min"
+            :value="model"
+            @input="$emit('update:modelValue', $event.target.value)"
+        >
+    </div>
+</template>
+
+<script setup>
+import { defineModel } from "vue";
+
+const model = defineModel();
+
+const props = defineProps({
+    'step': {
+        type: Number,
+        default: 0.1
+    },
+    'max': {
+        type: Number,
+        default: 1.0
+    },
+    'min': {
+        type: Number,
+        default: 0.0
+    },
+})
+
+</script>
+
+<style lang="scss" scoped>
+
+    .labeled-input-container {
+        display: grid;
+        grid-template-columns: 1fr 3fr;
+        gap: 0.5em;
+    }
+    
+    .input-group-text {
+        font-size: 0.8em;
+        min-width: 50px;
+        padding: 0.1em 0.5em 0.1em 0.4em;
+
+
+    }
+    .input-group-prepend {
+        padding: 0;
+    }
+
+    .form-control  {
+        padding: 0.1rem 0 0.1rem 0.4rem;
+        font-size: 0.8em !important;
+        font-family: monospace;
+        text-align: right;
+        padding-right: 4px;
+    }
+
+    .input-number {
+        height: 1.8em;
+        font-size: 0.8em;
+        min-width: 30px;
+    }
+
+</style>

src/components/inputs/TextInput.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="labeled-input-container mb-1">
         <div>
-            <span class="">
+            <span class="input-group-text">
                 <slot />
             </span>
         </div>
@@ -25,10 +25,12 @@ defineEmits(['update:modelValue'])
     .labeled-input-container {
         display: grid;
         grid-template-columns: 1fr 3fr;
+        gap: 0.5em;
     }
+    
     .input-group-text {
-        font-size: 1em;
-        width: 60px;
+        font-size: 0.8em;
+        width: 80px;
         padding: 0.1em 0 0.1em 0.4em;
 
 
@@ -39,7 +41,7 @@ defineEmits(['update:modelValue'])
 
     .form-control  {
         padding: 0.1rem 0 0.1rem 0.4rem;
-        font-size: 1em !important;
+        font-size: 0.8em !important;
         font-family: monospace;
         text-align: right;
         padding-right: 4px;

src/components/plot-layouts/PCPlot/PCPlot.vue

@@ -11,12 +11,20 @@
                 tabindex="0"
                 height="100%" 
                 width="100%" 
-                style="font-size: 1em; font-family: monospace; position: absolute; left: 0; top: 0; "
+                style="font-size: 1em; font-family: monospace; position: absolute; left: 0; top: 0; user-select: none;"
                 @mousemove.prevent="onMouseMove"
                 @mouseup.prevent="dragFilterDone"
                 @keydown.delete="dataStore.deleteCategory(selectedCategory)"
             >
-
+            <filter x="0" y="0" width="1" height="1" id="solid">
+                <feFlood flood-color="white" :flood-opacity="optionsStore.tickBackgroundOpacity" result="bg" />
+                <feMerge>
+                    <feMergeNode in="bg"/>
+                    <feMergeNode in="SourceGraphic"/>
+                </feMerge>
+            </filter>
+
+
                 <!-- Full graphics group -->
                 <g
                     v-if="data.length > 0"
@@ -460,7 +468,7 @@ function exportSVG () {
     let style = `<style>`
     style += 'svg {font-family: monospace;}'
     style += '.title {font-size: 0.8rem; text-anchor: start; x: 0px;}'
-    style += '.tick-string {font-size: 0.8rem; text-anchor: end; dominant-baseline: middle;}'
+    style += '.tick-string {font-size: 0.8rem; text-anchor: end; dominant-baseline: middle; filter: url(#solid);}'
     style += 'line {stroke: black; fill-opacity: 0;}'
     style += 'path {fill-opacity: 0;}'
     style += '.filter-box {stroke: white;stroke-opacity: 0.9;stroke-width: 2px;fill: #595959; fill-opacity: 0.6;x: -8px;width: 16px;}' 
@@ -513,10 +521,15 @@ function exportSVG () {
 
 		.filter-hitbox {
 			stroke: transparent;
-			fill-opacity: 0;
+			fill: transparent;
 			x: -10px;
 			y: -20px;
 			width: 20px;
+
+            &:hover {
+                stroke: rgb(0, 0, 0);
+                fill: rgba(255,255,255, 0.05);
+            }
 		}
 
 		.title {
@@ -528,6 +541,8 @@ function exportSVG () {
 			text-anchor: end;
 			dominant-baseline: middle;
 			font-weight: bold;
+            pointer-events: none;
+            filter: (url(#solid))
 		}
 	}
 

src/components/sidemenu/analysis/ColorCodeForm.vue

@@ -4,7 +4,7 @@
         :start-maximized="props.startMaximized"
     >
         <div class="control-group">
-            <div class="labeled-form">                
+            <div class="labeled-form mb-2" style="font-size: 0.8em;">                
                 <span>Property:</span>
                 <select 
                     v-model="selectedColorCodeCategory" 
@@ -14,30 +14,20 @@
                     <option v-for="c in categories" :key="c.id" :value="c"> {{ c.displayTitle }}</option>
                 </select>
             </div>
-            <div class="control-group" title="If enabled, data points will be color-coded based on input similarity (euclidean proximity).">
-                <div style="display: flex; justify-content: space-between; flex-direction: row;">
-                    <label class="form-check-label m-0">
-                        Use similarity color coding
-                    </label>
-                    <input
-                        v-model="useSimilarityColorCoding"
-                        type="checkbox" 
-                        @change="onUseSimilarityColorCodingChange"
-                    >
-                </div>
-            </div>
 
-            <div class="control-group" title="If enabled, the plot will display a color code indicator.">
-                <div style="display: flex; justify-content: space-between; flex-direction: row;">
-                    <label class="form-check-label m-0">
-                        Show color code legend
-                    </label>
-                    <input
-                        v-model="showColorCodeLegend"
-                        type="checkbox" 
-                    >
-                </div>
-            </div>
+            <CheckboxInput 
+                v-model="useSimilarityColorCoding"
+                title="If enabled, selected data points will be color-coded based on input similarity (euclidean proximity)."
+            >
+                Use similarity color coding
+            </CheckboxInput>
+
+            <CheckboxInput 
+                v-model="showColorCodeLegend"
+                title="If enabled, the plot will display a color code indicator."
+            >
+                Show color code legend
+            </CheckboxInput>
         </div>
     </SidebarSection>
 </template>
@@ -47,6 +37,7 @@ import { storeToRefs } from "pinia";
 import SidebarSection from "@/components/layouts/SidebarSection";
 import {useOptionsStore} from "@/store/OptionsStore";
 import {useDataStore} from "@/store/DataStore";
+import CheckboxInput from "@/components/inputs/CheckboxInput.vue";
 
 const optionsStore = useOptionsStore();
 const dataStore = useDataStore();