From 742a5116bcd6c22f07f2302a4300fcb4e3d0514e Mon Sep 17 00:00:00 2001
From: Etienne Burdet <etienne.burdet@hey.com>
Date: Fri, 13 Dec 2024 15:52:28 +0100
Subject: [PATCH] =?UTF-8?q?chore:=C2=A0simplifying=20styling=20and=20width?=
 =?UTF-8?q?=20computing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Table/Body.svelte          |  2 --
 .../src/components/Table/Cell/Cell.svelte     | 13 ++++-----
 .../components/Table/Headers/Headers.svelte   |  3 +--
 .../src/components/Table/Headers/Th.svelte    | 10 ++-----
 .../src/components/Table/Row.svelte           |  3 +--
 .../src/components/Table/Table.svelte         | 27 +++++--------------
 .../src/components/Table/store.ts             |  2 ++
 .../src/components/Table/utils.ts             | 12 ++++++---
 8 files changed, 26 insertions(+), 46 deletions(-)

diff --git a/packages/visualizations/src/components/Table/Body.svelte b/packages/visualizations/src/components/Table/Body.svelte
index c306b929..b4108702 100644
--- a/packages/visualizations/src/components/Table/Body.svelte
+++ b/packages/visualizations/src/components/Table/Body.svelte
@@ -11,7 +11,6 @@
     export let emptyStateLabel: string | undefined;
 
     let hoveredRow: number | null;
-    export let isHorizontallyScrolled: boolean;
 </script>
 
 <tbody
@@ -36,7 +35,6 @@
                 {columns}
                 {rowProps}
                 {record}
-                {isHorizontallyScrolled}
                 setHovered={() => {
                     hoveredRow = rowIndex;
                 }}
diff --git a/packages/visualizations/src/components/Table/Cell/Cell.svelte b/packages/visualizations/src/components/Table/Cell/Cell.svelte
index 9163d160..e7b4af82 100644
--- a/packages/visualizations/src/components/Table/Cell/Cell.svelte
+++ b/packages/visualizations/src/components/Table/Cell/Cell.svelte
@@ -9,25 +9,22 @@
     import NumberFormat from 'components/Format/NumberFormat.svelte';
     import URLFormat from 'components/Format/URLFormat.svelte';
     import { DATA_FORMAT } from '../constants';
-    import { locale, stickyColumnsOffset, lastStickyColumn } from '../store';
+    import { isHorizontallyScrolled, locale, stickyColumnsOffset } from '../store';
     import type { Column } from '../types';
     import { isColumnOfType, getStickyClasses } from '../utils';
 
     export let rawValue: unknown;
     export let column: Column;
-    export let isHorizontallyScrolled: boolean;
 
     $: ({ dataFormat } = column);
     $: offset = $stickyColumnsOffset.get(column.key);
-    $: stickyClasses = getStickyClasses(
-        $stickyColumnsOffset.has(column.key),
-        column.key === $lastStickyColumn,
-        isHorizontallyScrolled
-    );
 </script>
 
 <!-- To display a format value, rawValue must be different from undefined or null -->
-<td style={isNil(offset) ? '' : `--sticky-offset: ${offset}px;`} class={stickyClasses}>
+<td
+    style={isNil(offset) ? '' : `--sticky-offset: ${offset}px;`}
+    class={getStickyClasses(column, $isHorizontallyScrolled)}
+>
     <div class={`table-data--${dataFormat}`}>
         {#if isValidRawValue(rawValue)}
             {#if isColumnOfType(column, DATA_FORMAT.boolean)}
diff --git a/packages/visualizations/src/components/Table/Headers/Headers.svelte b/packages/visualizations/src/components/Table/Headers/Headers.svelte
index 7bd92bac..91247133 100644
--- a/packages/visualizations/src/components/Table/Headers/Headers.svelte
+++ b/packages/visualizations/src/components/Table/Headers/Headers.svelte
@@ -2,7 +2,6 @@
     import type { Column } from '../types';
     import Th from './Th.svelte';
 
-    export let isHorizontallyScrolled: boolean;
     export let columns: Column[];
     export let extraButtonColumn = false;
 </script>
@@ -13,7 +12,7 @@
             <th />
         {/if}
         {#each columns as column (column.key)}
-            <Th {column} dataFormat={column.dataFormat} {isHorizontallyScrolled} />
+            <Th {column} dataFormat={column.dataFormat} />
         {/each}
     </tr>
 </thead>
diff --git a/packages/visualizations/src/components/Table/Headers/Th.svelte b/packages/visualizations/src/components/Table/Headers/Th.svelte
index 469b4c37..bcd7570f 100644
--- a/packages/visualizations/src/components/Table/Headers/Th.svelte
+++ b/packages/visualizations/src/components/Table/Headers/Th.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
     import type { Column, DataFormat } from '../types';
-    import { stickyColumnsWidth, stickyColumnsOffset, lastStickyColumn } from '../store';
+    import { stickyColumnsWidth, stickyColumnsOffset, isHorizontallyScrolled } from '../store';
     import { getStickyClasses } from '../utils';
     import SortButton from './SortButton.svelte';
 
     export let column: Column;
     export let dataFormat: DataFormat;
-    export let isHorizontallyScrolled: boolean;
 
     let clientWidth: number;
 
@@ -14,16 +13,11 @@
     $: if ($stickyColumnsWidth.has(column.key)) {
         stickyColumnsWidth.updateColumn(column.key, clientWidth);
     }
-    $: stickyClasses = getStickyClasses(
-        $stickyColumnsWidth.has(column.key),
-        column.key === $lastStickyColumn,
-        isHorizontallyScrolled
-    );
 </script>
 
 <th
     style={`--sticky-offset: ${$stickyColumnsOffset.get(column.key)}px`}
-    class={`table-header--${dataFormat} ${stickyClasses}`}
+    class={`table-header--${dataFormat} ${getStickyClasses(column, $isHorizontallyScrolled)}`}
     bind:clientWidth
 >
     {#if column.onClick}
diff --git a/packages/visualizations/src/components/Table/Row.svelte b/packages/visualizations/src/components/Table/Row.svelte
index 47344bf0..9545a60e 100644
--- a/packages/visualizations/src/components/Table/Row.svelte
+++ b/packages/visualizations/src/components/Table/Row.svelte
@@ -8,7 +8,6 @@
     export let record: Record<string, unknown>;
     export let isHovered = false;
     export let setHovered: () => void;
-    export let isHorizontallyScrolled: boolean;
 
     $: ({ onClick, onMouseEnter, onMouseLeave, actionAriaLabel } = rowProps || {});
     $: handleMouseEnter = (e: HoverEvent<HTMLTableRowElement>) => {
@@ -48,7 +47,7 @@
         </td>
     {/if}
     {#each columns as column}
-        <Cell rawValue={record[column.key]} {column} {isHorizontallyScrolled} />
+        <Cell rawValue={record[column.key]} {column} />
     {/each}
 </tr>
 
diff --git a/packages/visualizations/src/components/Table/Table.svelte b/packages/visualizations/src/components/Table/Table.svelte
index dc4768b0..0d90896b 100644
--- a/packages/visualizations/src/components/Table/Table.svelte
+++ b/packages/visualizations/src/components/Table/Table.svelte
@@ -4,7 +4,7 @@
     import type { Column, RowProps } from './types';
     import Headers from './Headers';
     import Body from './Body.svelte';
-    import { stickyColumnsWidth } from './store';
+    import { stickyColumnsWidth, isHorizontallyScrolled } from './store';
 
     export let loadingRowsNumber: number | null;
     export let columns: Column[];
@@ -15,22 +15,14 @@
 
     const tableId = `table-${generateId()}`;
 
-    let isHorizontallyScrolled = false;
     let scrollBox: HTMLDivElement;
     let sortedStickyColumns: Column[] = [];
 
     function handleScroll() {
-        isHorizontallyScrolled =
+        $isHorizontallyScrolled =
             document.dir === 'rtl' ? scrollBox?.scrollLeft < 0 : scrollBox?.scrollLeft > 0;
     }
 
-    $: sortedStickyColumns = [...columns].sort((colA, colB) => {
-        if (Boolean(colA?.sticky) === Boolean(colB?.sticky)) {
-            return 0;
-        }
-        return colA?.sticky ? -1 : 1;
-    });
-
     // resets scroll when changing columns parameters
     $: if (columns && scrollBox) {
         scrollBox.scrollLeft = 0;
@@ -41,28 +33,23 @@
             return colA?.sticky ? -1 : 1;
         });
         stickyColumnsWidth.reset();
-        sortedStickyColumns
-            .filter((col) => col?.sticky)
-            .forEach((col) => {
+        sortedStickyColumns.forEach((col) => {
+            if (col?.sticky) {
                 stickyColumnsWidth.updateColumn(col.key, 0);
-            });
+            }
+        });
     }
 </script>
 
 <div class="scrollbox" bind:this={scrollBox} on:scroll={handleScroll}>
     <table aria-describedby={description ? tableId : undefined}>
-        <Headers
-            columns={sortedStickyColumns}
-            {isHorizontallyScrolled}
-            extraButtonColumn={Boolean(rowProps?.onClick)}
-        />
+        <Headers columns={sortedStickyColumns} extraButtonColumn={Boolean(rowProps?.onClick)} />
         <Body
             {records}
             columns={sortedStickyColumns}
             {rowProps}
             {emptyStateLabel}
             {loadingRowsNumber}
-            {isHorizontallyScrolled}
         />
     </table>
 </div>
diff --git a/packages/visualizations/src/components/Table/store.ts b/packages/visualizations/src/components/Table/store.ts
index 52a22b3b..171c4b20 100644
--- a/packages/visualizations/src/components/Table/store.ts
+++ b/packages/visualizations/src/components/Table/store.ts
@@ -36,3 +36,5 @@ export const stickyColumnsOffset = derived(stickyColumnsWidth, ($widths) => {
 export const lastStickyColumn = derived(stickyColumnsWidth, ($widths) =>
     [...$widths.keys()].at(-1)
 );
+
+export const isHorizontallyScrolled = writable(false);
diff --git a/packages/visualizations/src/components/Table/utils.ts b/packages/visualizations/src/components/Table/utils.ts
index 3396eb90..9cff71ce 100644
--- a/packages/visualizations/src/components/Table/utils.ts
+++ b/packages/visualizations/src/components/Table/utils.ts
@@ -1,9 +1,13 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { get } from 'svelte/store';
 import type { DataFormat, Column, ColumnOfType } from './types';
+import { lastStickyColumn } from './store';
 
-export const getStickyClasses = (sticky: boolean, lastSticky: boolean, scrolled: boolean) =>
-    `${sticky && 'sticky'} 
-    ${lastSticky && 'isLastSticky'} 
-    ${scrolled && 'isHorizontallyScrolled'}`;
+export const getStickyClasses = (column: Column, scrolled: boolean) => `
+    ${column.sticky && 'sticky'} 
+    ${column.key === get(lastStickyColumn) && 'isLastSticky'} 
+    ${scrolled && 'isHorizontallyScrolled'}
+`;
 
 export function isColumnOfType<K extends DataFormat>(
     column: Column,