Merge pull request #211 from debiai/fix_algo_providers_freeze

Fix algo providers freeze

backend/swagger.yaml

@@ -1,6 +1,6 @@
 swagger: "2.0"
 info:
-  version: 0.28.0-beta2
+  version: 0.28.0-beta3
   title: DebiAI_BACKEND_API
   description: DebiAI backend api
   contact:

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "debiai_frontend",
-  "version": "0.28.0-beta2",
+  "version": "0.28.0-beta3",
   "description": "Frontend for Debiai, made with Vuejs",
   "license": "Apache-2.0",
   "scripts": {

frontend/src/components/debiai/dataAnalysis/algoProviders/Algorithm.vue

@@ -3,19 +3,25 @@
     class="algorithm item"
     @click="$emit('selected')"
   >
-    <!-- Top: Tags, controls -->
-    <div
-      class="top"
-      v-if="algorithm.tags"
-    >
-      <div class="tags">
-        <div
-          class="tag"
-          v-for="(tag, i) in algorithm.tags"
-          :key="i"
+    <!-- Top: Title, controls -->
+    <div class="top">
+      <div class="title">
+        <inline-svg
+          :src="require('@/assets/svg/algorithm.svg')"
+          width="15"
+          height="15"
+        />
+        <h4 :title="'Id: ' + algorithm.id">
+          {{
+            algorithm.name !== null && algorithm.name !== undefined ? algorithm.name : algorithm.id
+          }}
+        </h4>
+        <p
+          class="version tag"
+          v-if="algorithm.version !== null && algorithm.version !== undefined"
         >
-          {{ tag }}
-        </div>
+          {{ algorithm.version }}
+        </p>
       </div>
 
       <div class="controls">
@@ -31,30 +37,18 @@
       </div>
     </div>
 
-    <!-- Name, version, description, author -->
+    <!-- version, author -->
     <div class="header">
-      <inline-svg
-        :src="require('@/assets/svg/algorithm.svg')"
-        width="15"
-        height="15"
-      />
-      <h4
-        class="title"
-        :title="'Id: ' + algorithm.id"
-      >
-        {{
-          algorithm.name !== null && algorithm.name !== undefined ? algorithm.name : algorithm.id
-        }}
-      </h4>
-      <p
-        class="version tag"
-        v-if="algorithm.version !== null && algorithm.version !== undefined"
-      >
-        {{ algorithm.version }}
-      </p>
-      <p class="description">
-        {{ algorithm.description }}
-      </p>
+      <div class="tags">
+        <div
+          class="tag"
+          v-for="(tag, i) in algorithm.tags"
+          :key="i"
+        >
+          {{ tag }}
+        </div>
+      </div>
+
       <div
         class="author"
         v-if="algorithm.author"
@@ -69,6 +63,8 @@
       </div>
     </div>
 
+    <p class="description">{{ algorithm.description }}</p>
+
     <!-- Displays the different parameters and results -->
     <div class="content">
       <div class="section">
@@ -179,7 +175,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .algorithm {
   border: 1px solid var(--greyDark);
   border-radius: 4px;
@@ -188,93 +184,108 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: stretch;
-}
 
-/* Top */
-.top {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
+  /* Top */
+  .top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 
-.top .tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px;
-  margin-bottom: 10px;
-}
+    .title {
+      margin-top: 1px;
+      display: flex;
+      align-items: center;
+      gap: 5px;
 
-/* Header */
-.header {
-  margin: 0;
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding-bottom: 30px;
-  flex-wrap: wrap;
-}
-.header .title {
-  margin-top: 1px;
-}
-.header .version {
-  margin: 0;
-}
-.header .description {
-  flex: 5;
-  color: var(--fontColorLight);
-  min-width: 200px;
-  margin: 0;
-}
-.header .author {
-  color: var(--fontColorLight);
-  padding: 5px;
-}
+      .version {
+        margin: 0;
+        margin-left: 10px;
+      }
+    }
+  }
 
-/* Content */
-.content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-}
+  /* Header */
+  .header {
+    margin: 0;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 8px;
+    flex-wrap: wrap;
 
-.content .section {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.content .section-title {
-  width: 50px;
-}
-.content .section .description {
-  color: var(--fontColorLight);
-}
+    .tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 5px;
+      margin-bottom: 10px;
+    }
 
-.parameter-list {
-  display: flex;
-  gap: 10px;
-  overflow: auto;
-  padding-bottom: 10px;
-}
-.parameter {
-  border: 1px solid var(--greyDark);
-  border-radius: 4px;
-  padding: 6px;
-  min-width: 150px;
-}
-.parameter .name {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 5px;
-  padding: 5px;
-}
-.parameter .name #DocumentationBlock {
-  flex: 1;
-  display: flex;
-  justify-content: flex-end;
-}
-.parameter p {
-  margin: 4px;
+    .author {
+      color: var(--fontColorLight);
+      padding: 5px;
+    }
+  }
+
+  .description {
+    color: var(--fontColorLight);
+    white-space: pre-wrap;
+    min-width: 200px;
+    margin: 0;
+  }
+
+  /* Content */
+  .content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding-top: 10px;
+    gap: 5px;
+
+    .section {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+      .section-title {
+        width: 50px;
+      }
+
+      .description {
+        color: var(--fontColorLight);
+      }
+    }
+  }
+
+  .parameter-list {
+    display: flex;
+    gap: 10px;
+    overflow: auto;
+    padding-bottom: 10px;
+
+    .parameter {
+      border: 1px solid var(--greyDark);
+      border-radius: 4px;
+      padding: 6px;
+      min-width: 150px;
+
+      .name {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 5px;
+        padding: 5px;
+
+        #DocumentationBlock {
+          flex: 1;
+          display: flex;
+          justify-content: flex-end;
+        }
+      }
+
+      p {
+        margin: 4px;
+      }
+    }
+  }
 }
 </style>

frontend/src/components/debiai/dataAnalysis/algoProviders/Algorithms.vue

@@ -272,6 +272,7 @@ export default {
         return {
           name: input.name,
           value: input.value,
+          columnLabel: input.columnLabel,
         };
       });
       this.$backendDialog

frontend/src/components/debiai/dataAnalysis/algoProviders/Experiments.vue

@@ -141,8 +141,26 @@
                     v-for="input in experiment.inputs"
                     :key="input.name"
                   >
-                    <div class="name">{{ input.name }}</div>
-                    <div class="value">{{ input.value.toString() }}</div>
+                    <div class="name">{{ input.name }}:</div>
+                    <div
+                      class="value"
+                      v-if="input.columnLabel"
+                    >
+                      {{ input.columnLabel }}
+                    </div>
+                    <div
+                      class="value"
+                      v-else-if="Array.isArray(input.value)"
+                    >
+                      {{ input.value.slice(0, 10) }}
+                      <span v-if="input.value.length > 10">...</span>
+                    </div>
+                    <div
+                      class="value"
+                      v-else
+                    >
+                      {{ input.value }}
+                    </div>
                   </div>
                 </div>
               </DocumentationBlock>
@@ -423,6 +441,13 @@ export default {
       justify-content: space-between;
     }
 
+    .inputs {
+      .input {
+        display: flex;
+        gap: 5px;
+      }
+    }
+
     .results {
       width: 100%;
       border-collapse: collapse;