Version 1.15.0 (#104)

* Bump version to 1.15.0 * Fixed bug that caused raster PCP not to redraw on axis change (#103) * Enable axis flip (#105) * Fixed bug that caused raster PCP not to redraw on axis change * Flip axis * Bumped to version 1.15.0 * Fixed error when requesting redraw after changing render type
johnmartins · Aug 20, 2024 · 4ba1808 · 4ba1808
1 parent 0379905
commit 4ba1808
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 49 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "md-analysis-cli",
-  "version": "1.14.1",
+  "version": "1.15.0",
   "private": true,
   "author": {
     "name": "Julian Martinsson Bonde",

diff --git a/src/components/plot-layouts/PCPlot/PCPlotFilter.vue b/src/components/plot-layouts/PCPlot/PCPlotFilter.vue
@@ -14,7 +14,6 @@
             :y="y - capHeight"
             :height="capHeight"
             @mousedown.prevent="moveFilterTop"
-
         />
 
         <rect 
@@ -27,18 +26,17 @@
 </template>
 
 <script setup>
-import {computed, ref} from 'vue'
-import {storeToRefs} from "pinia"
+import {computed, ref} from 'vue';
+import {storeToRefs} from "pinia";
 
-import {truncateDecimals} from "@/utils/data-utils"
-import {getTrueEventCoordinates} from "@/utils/svg-utils"
+import Category from '@/models/plots/Category';
 
 // Stores
-import {useDataStore} from "../../../store/DataStore"
-import {usePCPStore} from "../../../store/PCPStore"
+import { useDataStore } from '@/store/DataStore';
+import { usePCPStore } from "@/store/PCPStore";
 
-const PCPStore = usePCPStore()
-const dataStore = useDataStore()
+const PCPStore = usePCPStore();
+const dataStore = useDataStore();
 
 const {axisLength} = storeToRefs(PCPStore)
 const emit = defineEmits(['onInteraction', 'onMouseEnter', 'onMouseLeave'])
@@ -53,7 +51,16 @@ const capHeight = ref(6)
 
 const y = computed(() => {
     if (props.filter.type === 'single-range') {
-        return props.category.scaleLinear(props.filter.thresholdB)*axisLength.value
+
+        let threshold = props.filter.thresholdB;
+
+        // check if axis is flipped upside-down
+        let c = Category.lookup(props.filter.columnID);
+        if (c.lb - c.ub > 0) { 
+            threshold = props.filter.thresholdA;
+        }
+
+        return props.category.scaleLinear(threshold)*axisLength.value
     } else if (props.filter.type === 'categoric') {
         return props.filter.lowerBoundRatio*axisLength.value
     } else {
@@ -63,7 +70,7 @@ const y = computed(() => {
 
 const height = computed( () => {
     if (props.filter.type === 'single-range') {
-        return (props.category.scaleLinear(props.filter.thresholdA)-props.category.scaleLinear(props.filter.thresholdB))*axisLength.value
+        return Math.abs(props.category.scaleLinear(props.filter.thresholdA)-props.category.scaleLinear(props.filter.thresholdB))*axisLength.value
     } else if (props.filter.type === 'categoric') {
         return (props.filter.upperBoundRatio - props.filter.lowerBoundRatio)*axisLength.value
     } else {

diff --git a/src/components/plot-layouts/PCPlot/PCPlotPathLayerRaster.vue b/src/components/plot-layouts/PCPlot/PCPlotPathLayerRaster.vue
@@ -8,10 +8,10 @@ import { storeToRefs } from "pinia";
 import * as d3 from "d3";
 
 // Stores
-import {useDataStore} from "../../../store/DataStore"
-import {usePCPStore} from "../../../store/PCPStore"
-import {useOptionsStore} from "../../../store/OptionsStore"
-import {useStateStore} from "../../../store/StateStore"
+import {useDataStore} from "@/store/DataStore"
+import {usePCPStore} from "@/store/PCPStore"
+import {useOptionsStore} from "@/store/OptionsStore"
+import {useStateStore} from "@/store/StateStore"
 
 defineExpose({
     generateDataUrl
@@ -38,6 +38,7 @@ eventBus.on('Router.TabChange', (viewName) => {
     if (viewName !== 'pcp') return
     resizeCanvas()
 })
+eventBus.on('RequestPCPRedraw', restartRedrawCountdown);
 
 // Canvas draw variables
 let pathCanvas = document.createElement('canvas');
@@ -75,23 +76,27 @@ async function generateDataUrl () {
 }
 
 function restartRedrawCountdown () {
-    if (PCPStore.renderingType !== 'raster') return
-    if (stateStore.activeView !== 'pcp') return
+    if (PCPStore.renderingType !== 'raster') return;
+    if (stateStore.activeView !== 'pcp') return;
+    if (!canvasContainer.value) return;
 
-    let refreshDelay = 250
+    let refreshDelay = 250;
 
     if (redrawTimerID) {
-        clearTimeout(redrawTimerID)
+        clearTimeout(redrawTimerID);
     }
 
     redrawTimerID = setTimeout( () => {
-        draw()
-        redrawTimerID = null
-    }, refreshDelay)
+        draw();
+        redrawTimerID = null;
+    }, refreshDelay);
 }
 
 async function draw () {
     if (PCPStore.renderingType !== 'raster') return;
+    if (!canvasContainer.value) {
+        console.warn('Canvas container not found');
+    }
     await stateStore.setLoading('Redrawing PCP canvas');
     const t_draw_start = performance.now();
     PCPStore.pathsDataUrl = null;

diff --git a/src/components/sidemenu/settings/EditCategoryForm.vue b/src/components/sidemenu/settings/EditCategoryForm.vue
@@ -15,9 +15,34 @@
                 </div>
 
                 <div class="button-group" style="width: 100%">
-                    <button class="small success" @click="editCategory">Update</button>
-                    <button v-if="selectedCategory.enabled" class="small danger" @click="disableCategory">Disable</button>
-                    <button v-if="!selectedCategory.enabled" class="small" @click="enableCategory">Enable</button>
+                    <button 
+                        class="small success" 
+                        @click="editCategory"
+                    >
+                        Update
+                    </button>
+
+                    <button 
+                        class="small info" 
+                        @click="flipCategory" 
+                        :disabled="editedCategory.usesCategoricalData === true"
+                    >
+                        Flip
+                    </button>
+                    <button 
+                        v-if="selectedCategory.enabled" 
+                        class="small danger" 
+                        @click="disableCategory"
+                    >
+                        Disable
+                    </button>
+                    <button 
+                        v-if="!selectedCategory.enabled" 
+                        class="small" 
+                        @click="enableCategory"
+                    >
+                        Enable
+                    </button>
                 </div>
             </div>
         </div>
@@ -28,59 +53,71 @@
 </template>
 
 <script setup>
-import { ref, watch } from "vue"
-import { storeToRefs } from "pinia"
+import { ref, watch, inject } from "vue";
+import { storeToRefs } from "pinia";
 
 // Stores
-import {useDataStore} from "@/store/DataStore"
-import {useStateStore} from "@/store/StateStore"
+import {useDataStore} from "@/store/DataStore";
+import {useStateStore} from "@/store/StateStore";
 
 // Components
-import TextInput from '@/components/inputs/TextInput'
-import SidebarSection from '@/components/layouts/SidebarSection'
+import TextInput from '@/components/inputs/TextInput';
+import SidebarSection from '@/components/layouts/SidebarSection';
     
 // Models
-import Category from '@/models/plots/Category'
+import Category from '@/models/plots/Category';
 
 // DOM
-const sidebarSection = ref(null)
+const sidebarSection = ref(null);
 
-const dataStore = useDataStore()
-const stateStore = useStateStore()
+const dataStore = useDataStore();
+const stateStore = useStateStore();
 
-const {selectedCategory} = storeToRefs(stateStore)
-const editedCategory = ref(null)
+const {selectedCategory} = storeToRefs(stateStore);
+const editedCategory = ref(null);
+
+const eventBus = inject('eventBus');
 
 watch(selectedCategory, () => {
     if (!selectedCategory.value) {
-        editedCategory.value = null
-        return
+        editedCategory.value = null;
+        return;
     }
 
-    sidebarSection.value.maximized = true
+    sidebarSection.value.maximized = true;
 
     // The reason we do this insead of using v-models directly on the inputs is because
     // utilizing v-models for huge data sets can be very slow. Decoupling the edited and real variable
     // allows the user to edit the category with normal speed regardless of data set size.
-    let newCat = new Category("$$TEMPORARY_CATEGORY$$", 0, 1, {overwrite: true})
-    newCat.morph(selectedCategory.value, {migrateReference: false})
-    editedCategory.value = newCat
+    let newCat = new Category("$$TEMPORARY_CATEGORY$$", 0, 1, {overwrite: true});
+    newCat.morph(selectedCategory.value, {migrateReference: false});
+    editedCategory.value = newCat;
 })
 
 function disableCategory () {
-    selectedCategory.value.enabled = false
+    selectedCategory.value.enabled = false;
 }
 
 function enableCategory () {
-    selectedCategory.value.enabled = true
+    selectedCategory.value.enabled = true;
+}
+
+function flipCategory () {
+    let newLb = editedCategory.value.ub;
+    let newUb = editedCategory.value.lb;
+    editedCategory.value.lb = newLb;
+    editedCategory.value.ub = newUb;
+
+    editCategory();
 }
 
 function editCategory () {
-    selectedCategory.value.morph(editedCategory.value, {migrateReference: false})
+    selectedCategory.value.morph(editedCategory.value, {migrateReference: false});
+    eventBus.emit('RequestPCPRedraw');
 }
 
 </script>
 
 <style lang="scss" scoped>
 
-</style>
+</style>
diff --git a/src/scss/Buttons.scss b/src/scss/Buttons.scss
@@ -30,16 +30,34 @@ button {
         font-size: 12px !important;
     }
 
+    &.success {
+        background-color: $color-success;
+        border: 1px solid $color-success-base;
+
+        &:hover {
+            background-color: $color-success-base;
+        }
+    }
+
     // Danger variation
     &.danger {
         background-color: $color-danger;
-        border: 1px solid $color-danger;
+        border: 1px solid $color-danger-base;
 
         &:hover {
             background-color: $color-danger-base;
         }
     }
 
+    &.info {
+        background-color: $color-info;
+        border: 1px solid $color-info-base;
+
+        &:hover {
+            background-color: $color-info-base;
+        }
+    }
+
     &.active {
         background-color: $color-light;
         color: $color-primary-base;