feat(UI): Display index names if present (#516)

Index names will now be visible. 
Limitation: sticky index columns are disable in this case has it is a
pain to manage absolute coordinates. This could be tackled in another
PR.

https://github.com/user-attachments/assets/a55cc3a9-177f-4ad2-bcfc-44ff4090c536

fixes #495

Author: rouk1

skore-ui/src/ShareApp.vue

@@ -38,6 +38,7 @@ function getItemSubtitle(created_at: Date, updated_at: Date) {
             :columns="data.columns"
             :data="data.data"
             :index="data.index"
+            :indexNames="data.indexNames"
           />
           <ImageWidget
             v-if="['image/svg+xml', 'image/png', 'image/jpeg', 'image/webp'].includes(mediaType)"

skore-ui/src/assets/fixtures/named-index-datatable.json

@@ -0,0 +1,13 @@
+{
+  "index": [["france", "paris", "1"]],
+  "columns": ["age", "number", "gender"],
+  "data": [
+    [
+      ">70",
+      "loremipsumdolorsitametloremipsumdolorsitametloremipsumdolorsitametloremipsumdolorsitametloremipsumdolorsitametloremipsumdolorsitametloremipsumdolorsitametloremipsumdolorsitametloremipsumdolorsitametloremipsumdolorsitametloremipsumdolorsitametloremipsumdolorsitamet loremipsumdolorsitamet loremipsumdolorsitamet",
+      "M"
+    ]
+  ],
+  "index_names": ["country", "city", "district"],
+  "column_names": [null]
+}

skore-ui/src/components/DataFrameWidget.vue

@@ -8,6 +8,7 @@ export interface DataFrameWidgetProps {
   index: any[];
   columns: any[];
   data: any[][];
+  indexNames: any[];
 }
 const props = defineProps<DataFrameWidgetProps>();
 
@@ -61,6 +62,14 @@ const visibleRows = computed(() => {
   return rows.value.slice(pageStart.value, pageEnd.value);
 });
 
+const indexNamesColSpan = computed(() => {
+  const hasIndexNames = props.indexNames.some((name) => name !== null);
+  if (hasIndexNames) {
+    return props.indexNames.length;
+  }
+  return 1;
+});
+
 function nextPage() {
   if (currentPage.value < totalPages.value - 1) {
     currentPage.value++;
@@ -90,13 +99,31 @@ watch([() => toValue(props.data), () => toValue(props.columns)], () => {
       <table>
         <thead>
           <tr>
-            <th>index</th>
+            <th :colspan="indexNamesColSpan">index</th>
             <th v-for="(name, i) in props.columns" :key="i">{{ name }}</th>
           </tr>
+          <tr v-if="indexNamesColSpan > 1">
+            <th v-for="(name, i) in props.indexNames" :key="i" class="named-index">
+              {{ name }}
+            </th>
+            <th v-for="(name, i) in props.columns" :key="i"></th>
+          </tr>
         </thead>
         <tbody>
           <tr v-for="(row, i) in visibleRows" :key="i">
-            <td v-for="(value, i) in row" :key="i">{{ value }}</td>
+            <template v-if="indexNamesColSpan === 1">
+              <td v-for="(value, i) in row" :key="i" :colspan="i === 0 ? indexNamesColSpan : 1">
+                {{ value }}
+              </td>
+            </template>
+            <template v-else>
+              <td v-for="(value, i) in row[0].split(', ')" :key="i" class="named-index">
+                {{ value }}
+              </td>
+              <td v-for="(value, i) in row.slice(1)" :key="i">
+                {{ value }}
+              </td>
+            </template>
           </tr>
         </tbody>
       </table>
@@ -155,19 +182,24 @@ watch([() => toValue(props.data), () => toValue(props.columns)], () => {
       & tr {
         & th {
           padding: var(--spacing-padding-small);
+          text-align: right;
 
-          &:first-child {
+          &:first-child,
+          &.named-index {
+            background-color: var(--background-color-elevated);
+          }
+
+          &[colspan="1"]:first-child:not(.named-index) {
             position: sticky;
             left: 0;
-            background-color: var(--background-color-elevated);
-            text-align: left;
           }
         }
       }
     }
 
     & tbody {
       & tr {
+        position: relative;
         padding: var(--spacing-padding-small);
 
         & td {
@@ -176,16 +208,18 @@ watch([() => toValue(props.data), () => toValue(props.columns)], () => {
           font-size: var(--text-size-highlight);
           font-weight: var(--text-weight-highlight);
 
-          &:first-child {
-            position: sticky;
-            left: 0;
-            width: auto;
+          &:first-child,
+          &.named-index {
             background-color: var(--background-color-elevated);
             color: var(--text-color-normal);
             font-size: var(--text-size-normal);
             font-weight: var(--text-weight-normal);
             text-align: left;
-            white-space: nowrap;
+          }
+
+          &:first-child:not(.named-index) {
+            position: sticky;
+            left: 0;
           }
         }
 
@@ -195,6 +229,7 @@ watch([() => toValue(props.data), () => toValue(props.columns)], () => {
       }
     }
 
+    /* stylelint-disable no-descending-specificity */
     & > thead > tr:not(:last-child) > th,
     & > thead > tr:not(:last-child) > td,
     & > tbody > tr:not(:last-child) > th,

skore-ui/src/views/ComponentsView.vue

@@ -7,6 +7,7 @@ import datatable from "@/assets/fixtures/datatable.json";
 import htmlSnippet from "@/assets/fixtures/html-snippet.html?raw";
 import markdownString from "@/assets/fixtures/markdown.md?raw";
 import multiIndexDatatable from "@/assets/fixtures/multi-index-datatable.json";
+import namedIndexDatatable from "@/assets/fixtures/named-index-datatable.json";
 import spec from "@/assets/fixtures/vega.json";
 
 import DataFrameWidget from "@/components/DataFrameWidget.vue";
@@ -221,12 +222,21 @@ const isCached = ref(false);
           :index="datatable.index"
           :columns="datatable.columns"
           :data="datatable.data"
+          :index-names="datatable.index_names"
         />
         <div>multi index</div>
         <DataFrameWidget
           :index="multiIndexDatatable.index"
           :columns="multiIndexDatatable.columns"
           :data="multiIndexDatatable.data"
+          :index-names="multiIndexDatatable.index_names"
+        />
+        <div>named index</div>
+        <DataFrameWidget
+          :index="namedIndexDatatable.index"
+          :columns="namedIndexDatatable.columns"
+          :data="namedIndexDatatable.data"
+          :index-names="namedIndexDatatable.index_names"
         />
       </TabsItem>
       <TabsItem :value="3">

skore-ui/src/views/project/ProjectView.vue

@@ -126,6 +126,7 @@ onBeforeUnmount(() => {
                   :columns="data.columns"
                   :data="data.data"
                   :index="data.index"
+                  :indexNames="data.indexNames"
                 />
                 <ImageWidget
                   v-if="

skore-ui/tests/components/DataFrameWidget.spec.ts

@@ -20,7 +20,7 @@ function generateFakeProps(numItems: number) {
     ]);
   }
 
-  return { index, columns, data };
+  return { index, columns, data, indexNames: [] };
 }
 
 function mountComponent(props: any) {