Null values support

debiaiServer/swagger.yaml

@@ -1,6 +1,6 @@
 swagger: "2.0"
 info:
-  version: 0.28.1
+  version: 0.29.0-beta2
   title: DebiAI_BACKEND_API
   description: DebiAI backend api
   contact:
@@ -1238,8 +1238,6 @@ paths:
             type: array
             items:
               type: array
-              items:
-                type: number
 
       responses:
         200:

frontend/cspell.json

@@ -41,6 +41,7 @@
     "ncontours",
     "parcats",
     "parcoords",
+    "psutil",
     "rangeslider",
     "relayout",
     "resizestop",
@@ -80,8 +81,7 @@
     "zeroline",
     "Zindex",
     "zmax",
-    "zmin",
-    "psutil"
+    "zmin"
   ],
   "flagWords": [],
   "ignorePaths": [

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "debiai_frontend",
-  "version": "0.28.1",
+  "version": "0.29.0-beta2",
   "description": "Frontend for Debiai, made with Vuejs",
   "license": "Apache-2.0",
   "scripts": {
@@ -24,7 +24,6 @@
     "vue-inline-svg": "^2.0.0",
     "vue-progressive-image": "^3.2.0",
     "vue-router": "^3.3.4",
-    "vue-table-dynamic": "^0.4.4",
     "vuex": "^3.5.1"
   },
   "devDependencies": {

frontend/src/components/debiai/dataAnalysis/common/Column.vue

@@ -69,6 +69,19 @@ Click to set column as the main color"
       {{ column.typeText }}
     </div>
 
+    <!-- Nb null values pie chart -->
+    <div
+      class="nbNullValues"
+      v-if="column.nbNullValues > 0"
+      :title="column.nbNullValues + ' null values'"
+    >
+      <div
+        class="pie"
+        :style="{ '--p': (column.nbNullValues / column.originalValues.length) * 100 }"
+      />
+      {{ Math.ceil((column.nbNullValues / column.originalValues.length) * 100) }}%
+    </div>
+
     <!-- Menu -->
     <transition name="fade">
       <dropdown-menu
@@ -333,5 +346,32 @@ export default {
       color: var(--undefined);
     }
   }
+
+  /* Pie chart */
+  .nbNullValues {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    font-size: 0.8em;
+    color: var(--greyDarker);
+    font-weight: bold;
+
+    .pie {
+      position: relative;
+      width: 20px;
+      height: 20px;
+      display: inline-grid;
+      place-content: center;
+      border-radius: 50%;
+      background: var(--greyLight);
+    }
+    .pie:before {
+      content: "";
+      position: absolute;
+      border-radius: 50%;
+      inset: 0;
+      background: conic-gradient(var(--greyDarker) calc(var(--p) * 1%), #0000 0);
+    }
+  }
 }
 </style>

frontend/src/components/debiai/dataAnalysis/common/ColumnSelection.vue

@@ -111,18 +111,13 @@ export default {
     } else {
       this.selectedColumns = this.defaultSelected;
     }
-    document.addEventListener("keydown", this.keyHandler);
   },
   mounted() {
     // Set focus on search bar
     this.$refs.columnsSearch.focus();
   },
 
   methods: {
-    // Handles the keydown event and emits the "cancel" event when the Escape key is pressed
-    keyHandler(k) {
-      if (k.key == "Escape") this.$emit("cancel");
-    },
     // Handles the selection of a column and emits the "colSelect" event with the selected column index
     columnSelected(colIndex) {
       this.$emit("colSelect", colIndex);
@@ -233,9 +228,6 @@ export default {
       if (this.defaultSelected) this.selectedColumns = this.defaultSelected;
     },
   },
-  beforeDestroy() {
-    document.removeEventListener("keydown", this.keyHandler);
-  },
 };
 </script>
 

frontend/src/components/debiai/dataAnalysis/dataFilters/filterTypes/FilterGenericData.vue

@@ -11,7 +11,13 @@
         :class="'aligned centered ' + (filter.type === 'intervals' ? 'intervalCol' : 'valueCol')"
         title="Column name"
       >
-        {{ filter.column.label }}
+        <span v-if="filter.column && filter.column.label">
+          {{ filter.column.label }}
+        </span>
+        <span v-else>
+          Column not found
+          <!-- TODO Prevent this from happening -->
+        </span>
       </div>
     </div>
 

frontend/src/components/debiai/dataAnalysis/dataFilters/filterTypes/Values.vue

@@ -41,7 +41,7 @@
 
         <select
           v-model="newValue"
-          v-if="filter.column.uniques"
+          v-if="filter.column.uniques && filter.column.uniques.length < 30"
         >
           <option
             v-for="unValues in filter.column.uniques"
@@ -54,18 +54,8 @@
 
       <!-- #controls -->
       <div class="aligned centered">
-        <button
-          @click="addValue(false)"
-          :disabled="newValue === null || newValue === ''"
-        >
-          Add
-        </button>
-        <button
-          @click="addValue(true)"
-          :disabled="newValue === null || newValue === ''"
-        >
-          Add and close
-        </button>
+        <button @click="addValue(false)">Add</button>
+        <button @click="addValue(true)">Add and close</button>
         <button
           class="red"
           @click="addValuePanel = false"
@@ -88,7 +78,15 @@
         @click="removeValue(value)"
         title="Remove the value form the filter"
       >
-        {{ value }}
+        <span v-if="value !== null">
+          {{ value }}
+        </span>
+        <span
+          v-else
+          style="opacity: 0.7"
+        >
+          Null
+        </span>
       </button>
       <button
         @click="addValuePanel = true"
@@ -128,9 +126,11 @@ export default {
   methods: {
     addValue(closeAfter) {
       // Convert the value to the right type
-      const valueToAdd =
+      let valueToAdd =
         this.filter.column.typeText === "Num" ? parseFloat(this.newValue) : this.newValue;
 
+      if (valueToAdd === "" || isNaN(valueToAdd)) valueToAdd = null;
+
       // Add the value to the filter in the store
       this.$store.commit("addValueToFilter", {
         filterId: this.filter.id,

frontend/src/components/debiai/dataAnalysis/widgets/DensityPlot2D/DensityPlot2D.vue

@@ -516,7 +516,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-#pointPlot {
+#densityPlot2D {
   display: flex;
   flex-direction: column;
 }

frontend/src/components/debiai/dataAnalysis/widgets/NightStarsPlot/NightStarsPlot.vue

@@ -196,11 +196,12 @@ export default {
 
     // Plot
     checkPlot(failFast = false) {
-      const colColor = this.data.columns[this.coloredColumnIndex];
+      const colColor = this.data.getColumn(this.coloredColumnIndex);
 
       if (
         this.coloredColumnIndex !== null &&
         this.dividePerColor &&
+        colColor &&
         colColor.uniques.length > 100
       ) {
         if (failFast) return false;
@@ -248,8 +249,12 @@ export default {
 
       let colColor;
       let extraPlotName = "";
-      if (this.coloredColumnIndex !== null && this.dividePerColor) {
-        colColor = this.data.columns[this.coloredColumnIndex];
+      if (
+        this.coloredColumnIndex !== null &&
+        this.dividePerColor &&
+        this.data.getColumn(this.coloredColumnIndex)
+      ) {
+        colColor = this.data.getColumn(this.coloredColumnIndex);
         extraPlotName = " grouped by " + colColor.label;
 
         let selectedColors;
@@ -286,7 +291,7 @@ export default {
             stdX,
             stdY,
             color: i,
-            name: colColor.uniques[i],
+            name: colColor.uniques[i] || "Missing data",
           });
         });
       } else {
@@ -428,6 +433,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+#nightStarsPlot {
+  display: flex;
+  flex-direction: column;
+}
+
 #settings {
   display: flex;
   flex-direction: column;

frontend/src/components/debiai/dataAnalysis/widgets/PointPlot/PointPlot.vue

@@ -185,12 +185,12 @@
               </label>
             </div>
           </div>
-          <!-- Display null values -->
+          <!-- Connect values -->
           <div
             class="data"
             v-if="!averageAsBar"
           >
-            <span class="name">Display null values</span>
+            <span class="name">Connect values</span>
             <div class="value">
               <input
                 type="checkbox"