feat(categories): fix categories data and UI

aalto-ui · Oct 25, 2022 · 684821c · 684821c
1 parent 4ce8e30
commit 684821c
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 23 deletions.
diff --git a/backend/aim/metrics/m10/m10_wave.py b/backend/aim/metrics/m10/m10_wave.py
@@ -10,8 +10,6 @@
     This is the mean of a simple mapping of pixel colors to the color
     preference values experimentally obtained by Palmer and Schloss.
 
-    Category: Colour Perception.
-
     Details: Under their hypothesis that people's color preferences reflect
     their dispositions towards objects of those colors, they had
     participants grade their feelings towards sets of objects of particular

diff --git a/frontend/src/components/AIMForm.vue b/frontend/src/components/AIMForm.vue
@@ -74,7 +74,7 @@
       </b-row>
       <b-form v-if="display.metrics" id="aim-form" @submit="onSubmit">
         <div class="tablist" role="tablist">
-          <b-card no-body active class="mb-4">
+          <b-card v-if="metricConfig.categories[0].metrics.length > 0" no-body active class="mb-4">
             <b-card-header header-tag="header" role="tab" class="p-0">
               <div v-b-toggle.cat-one-accordion variant="cat-one" class="rounded" block href="#">
                 <span class="fa">
@@ -152,7 +152,7 @@
               </b-card-body>
             </b-collapse>
           </b-card>
-          <b-card no-body class="mb-4">
+          <b-card v-if="metricConfig.categories[1].metrics.length > 0" no-body class="mb-4">
             <b-card-header header-tag="header" role="tab" class="p-0">
               <div v-b-toggle.cat-two-accordion variant="cat-two" class="rounded" block href="#">
                 <span class="fa">
@@ -230,7 +230,7 @@
               </b-card-body>
             </b-collapse>
           </b-card>
-          <b-card no-body class="mb-4">
+          <b-card v-if="metricConfig.categories[2].metrics.length > 0" no-body class="mb-4">
             <b-card-header header-tag="header" role="tab" class="p-0">
               <div v-b-toggle.cat-three-accordion variant="cat-three" block class="rounded" href="#">
                 <span class="fa">
@@ -308,7 +308,7 @@
               </b-card-body>
             </b-collapse>
           </b-card>
-          <b-card no-body class="mb-4">
+          <b-card v-if="metricConfig.categories[3].metrics.length > 0" no-body class="mb-4">
             <b-card-header header-tag="header" role="tab" class="p-0">
               <div v-b-toggle.cat-four-accordion variant="cat-four" block class="rounded" href="#">
                 <span class="fa">

diff --git a/frontend/src/components/Results.vue b/frontend/src/components/Results.vue
@@ -64,7 +64,7 @@
                         <template #cell(evaluation)="data">
                           <template v-if="data.item.result.type!=='b64'">
                             <div v-if="metrics[metric].results[data.index].scores && metrics[metric].results[data.index].scores.length > 1" :id="data.item.id" class="scores">
-                              <div v-for="score in metrics[metric].results[data.index].scores" :key="score.description">
+                              <div v-for="score in metrics[metric].results[data.index].scores" :key="score.id">
                                 <div v-show="getJudgment(score, data.item.value)" :class="score.judgment" class="score">
                                   {{ score.description }}
                                   <template v-if="(score.icon[0]!=null)">

diff --git a/metrics.json b/metrics.json
@@ -1,28 +1,24 @@
 {
   "categories": [
     {
-      "id": "cp",
-      "name": "Colour Perception",
-      "icon": "palette",
-      "metrics": ["m1", "m3", "m10", "m11", "m12", "m13", "m14", "m15", "m16", "m17", "m19", "m20"]
+      "name": "Accessibility",
+      "icon": "universal-access",
+      "metrics": []
     },
     {
-      "id": "pf",
-      "name": "Perceptual Fluency",
-      "icon": "brain",
-      "metrics": ["m2", "m4", "m5", "m6", "m7", "m8", "m18"]
+      "name": "Aesthetics",
+      "icon": "gem",
+      "metrics": ["m18"]
     },
     {
-      "id": "vg",
-      "name": "Visual Guidance",
-      "icon": "compass",
-      "metrics": ["m9"]
+      "name": "Color Perception",
+      "icon": "palette",
+      "metrics": ["m1", "m3", "m10", "m11", "m12", "m13", "m14", "m15", "m16", "m17", "m19", "m20"]
     },
     {
-      "id": "ac",
-      "name": "Accessibility",
-      "icon": "universal-access",
-      "metrics": []
+      "name": "Perceptual Fluency",
+      "icon": "brain",
+      "metrics": ["m2", "m4", "m5", "m6", "m7", "m8", "m9"]
     }
   ],
   "metrics": {