Improved experiments results display

backend/swagger.yaml

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

frontend/package.json

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

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

@@ -283,6 +283,19 @@ export default {
           });
           this.algoToUse = null;
 
+          if (typeof results === "string") {
+            try {
+              // Convert to object if it's a string
+              // Replace 'Infinity' to avoid JSON.parse error
+              results = results
+                .replace(/ -Infinity/g, '"-Infinity"')
+                .replace(/ Infinity/g, '"Infinity"');
+              results = JSON.parse(results);
+            } catch (error) {
+              throw new Error("Results are not a valid JSON object");
+            }
+          }
+
           const experiment = {
             results,
             inputs,

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

@@ -181,7 +181,18 @@
                 <td class="name">{{ result.name }}</td>
                 <td
                   class="value"
-                  v-if="Array.isArray(result.value)"
+                  v-if="
+                    Array.isArray(result.value) &&
+                    result.value.length &&
+                    typeof result.value[0] === 'object' &&
+                    result.value[0] !== null
+                  "
+                >
+                  <DataTable :data="result.value" />
+                </td>
+                <td
+                  class="value"
+                  v-else-if="Array.isArray(result.value)"
                 >
                   {{ result.value.length }} elements {{ result.value.slice(0, 5) }}...
                 </td>
@@ -216,8 +227,13 @@
 </template>
 
 <script>
+import DataTable from "@/components/debiai/dataAnalysis/common/DataTable.vue";
+
 export default {
   name: "Experiments",
+  components: {
+    DataTable,
+  },
   props: {
     algorithm: { type: Object, required: true },
     algoProvider: { type: Object, required: true },
@@ -420,7 +436,8 @@ export default {
       }
 
       td {
-        padding: 5px;
+        padding: 10px 5px;
+        vertical-align: top;
       }
 
       .name {

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

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <table>
+      <thead>
+        <tr>
+          <th
+            v-for="key in keys"
+            :key="key"
+          >
+            {{ key }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(item, index) in data.slice(0, max_length_to_show)"
+          :key="index"
+        >
+          <td
+            v-for="key in keys"
+            :key="key"
+          >
+            {{ item[key] }}
+          </td>
+        </tr>
+        <tr v-if="data.length > max_length_to_show">
+          <td :colspan="keys.length">
+            <span>
+              <b>And {{ data.length - max_length_to_show }} more...</b>
+            </span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DataTable",
+  data() {
+    return {
+      max_length_to_show: 20,
+    };
+  },
+  props: {
+    data: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
+  },
+  computed: {
+    keys() {
+      if (this.data.length === 0) return [];
+      return Object.keys(this.data[0]);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+table {
+  width: 100%;
+  border-collapse: collapse;
+
+  th,
+  td {
+    border: 1px solid #ccc;
+    padding: 8px;
+    text-align: left;
+  }
+
+  th {
+    background-color: #f2f2f2;
+  }
+}
+</style>