From dfd6633bee08a22006374069d82a596be5b6a303 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 10 Mar 2023 10:25:26 +0000
Subject: [PATCH] Improve rendering performance and simplify component props

---
 .../src/components/sheet/StickyColumn.svelte  | 23 +++++++++++++------
 .../components/sheet/cells/OptionsCell.svelte |  3 +--
 .../components/sheet/cells/SheetCell.svelte   | 19 ---------------
 .../src/components/sheet/stores/ui.js         |  2 ++
 .../src/components/sheet/stores/viewport.js   | 15 ++++++++++--
 5 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/packages/frontend-core/src/components/sheet/StickyColumn.svelte b/packages/frontend-core/src/components/sheet/StickyColumn.svelte
index 1e40f568b0..9774d1230d 100644
--- a/packages/frontend-core/src/components/sheet/StickyColumn.svelte
+++ b/packages/frontend-core/src/components/sheet/StickyColumn.svelte
@@ -68,11 +68,9 @@
   <div class="header row">
     <!-- Field headers -->
     <SheetCell
-      header
-      foo
-      label
       width="40"
       on:click={$config.allowSelectRows && selectAll}
+      center
     >
       {#if $config.allowSelectRows}
         <Checkbox value={rowCount && selectedRowCount === rowCount} />
@@ -92,10 +90,10 @@
         {@const containsSelectedRow = $selectedCellRow?._id === row._id}
         <div class="row" on:mouseenter={() => ($hoveredRowId = row._id)}>
           <SheetCell
-            label
             rowSelected={rowSelected || containsSelectedRow}
             {rowHovered}
             width="40"
+            center
           >
             <div
               on:click={() => selectRow(row._id)}
@@ -120,7 +118,6 @@
               rowSelected={rowSelected || containsSelectedRow}
               {rowHovered}
               rowIdx={idx}
-              sticky
               selected={$selectedCellId === cellId}
               selectedUser={$selectedCellMap[cellId]}
               on:click={() => ($selectedCellId = cellId)}
@@ -150,9 +147,9 @@
         >
           <SheetCell
             rowHovered={$hoveredRowId === "new"}
-            label
             on:click={addRow}
             width="40"
+            center
           >
             <Icon name="Add" size="S" />
           </SheetCell>
@@ -172,8 +169,10 @@
 
 <style>
   .sticky-column {
-    flex: 0 0 calc(var(--width) + 0px);
+    flex: 0 0 var(--width);
   }
+
+  /* Add shadow when scrolled */
   .sticky-column.scrolled :global(.cell:last-child:after) {
     content: " ";
     position: absolute;
@@ -182,6 +181,8 @@
     left: 100%;
     background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent);
   }
+
+  /* Don't show borders between cells in the sticky column */
   .sticky-column :global(.cell:not(:last-child)) {
     border-right: none;
   }
@@ -191,6 +192,10 @@
     position: relative;
     z-index: 2;
   }
+  .header :global(.cell) {
+    background: var(--spectrum-global-color-gray-100);
+    border-bottom: none;
+  }
   .row {
     display: flex;
     flex-direction: row;
@@ -206,6 +211,10 @@
   }
 
   /* Styles for label cell */
+  .checkbox,
+  .number {
+    padding: 0 var(--cell-padding);
+  }
   .checkbox {
     display: none;
   }
diff --git a/packages/frontend-core/src/components/sheet/cells/OptionsCell.svelte b/packages/frontend-core/src/components/sheet/cells/OptionsCell.svelte
index 64456fe0f2..e8117312dd 100644
--- a/packages/frontend-core/src/components/sheet/cells/OptionsCell.svelte
+++ b/packages/frontend-core/src/components/sheet/cells/OptionsCell.svelte
@@ -9,10 +9,9 @@
   export let multi = false
   export let readonly = false
 
-  const options = schema?.constraints?.inclusion || []
-
   let open = false
 
+  $: options = schema?.constraints?.inclusion || []
   $: editable = selected && !readonly
   $: values = Array.isArray(value) ? value : [value].filter(x => x != null)
   $: unselectedOptions = options.filter(x => !values.includes(x))
diff --git a/packages/frontend-core/src/components/sheet/cells/SheetCell.svelte b/packages/frontend-core/src/components/sheet/cells/SheetCell.svelte
index 50df0754b2..cb36910e97 100644
--- a/packages/frontend-core/src/components/sheet/cells/SheetCell.svelte
+++ b/packages/frontend-core/src/components/sheet/cells/SheetCell.svelte
@@ -1,8 +1,6 @@
 <script>
-  export let label = false
   export let rowSelected = false
   export let rowHovered = false
-  export let sticky = false
   export let selected = false
   export let reorderSource = false
   export let reorderTarget = false
@@ -10,7 +8,6 @@
   export let center = false
   export let selectedUser = null
   export let rowIdx
-  export let foo
 
   $: style = getStyle(width, selectedUser)
 
@@ -25,11 +22,8 @@
 
 <div
   class="cell"
-  class:foo
-  class:label
   class:row-selected={rowSelected}
   class:row-hovered={rowHovered}
-  class:sticky
   class:selected
   class:selected-other={selectedUser != null}
   class:reorder-source={reorderSource}
@@ -105,19 +99,6 @@
     height: calc(var(--cell-height) + 2px);
   }
 
-  /* Label cells */
-  .cell.label {
-    padding: var(--cell-padding);
-    flex: 0 0 40px;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-  }
-  .cell.foo {
-    background: var(--spectrum-global-color-gray-100);
-  }
-
   /* Other user email */
   .user {
     position: absolute;
diff --git a/packages/frontend-core/src/components/sheet/stores/ui.js b/packages/frontend-core/src/components/sheet/stores/ui.js
index 4c052102bc..1a90dd75ad 100644
--- a/packages/frontend-core/src/components/sheet/stores/ui.js
+++ b/packages/frontend-core/src/components/sheet/stores/ui.js
@@ -5,6 +5,7 @@ export const createUIStores = context => {
   const selectedCellId = writable(null)
   const selectedRows = writable({})
   const hoveredRowId = writable(null)
+  const selectedCellAPI = writable(null)
 
   // Derive the row that contains the selected cell.
   const selectedCellRow = derived(
@@ -74,6 +75,7 @@ export const createUIStores = context => {
     selectedRows,
     hoveredRowId,
     selectedCellRow,
+    selectedCellAPI,
     ui: {
       actions: {
         blur,
diff --git a/packages/frontend-core/src/components/sheet/stores/viewport.js b/packages/frontend-core/src/components/sheet/stores/viewport.js
index ef95965ff7..63880ada06 100644
--- a/packages/frontend-core/src/components/sheet/stores/viewport.js
+++ b/packages/frontend-core/src/components/sheet/stores/viewport.js
@@ -44,8 +44,19 @@ export const createViewportStores = context => {
         leftEdge += $columns[endColIdx].width
         endColIdx++
       }
-      return $columns.slice(startColIdx, endColIdx)
-    }
+      const nextVisibleColumns = $columns.slice(startColIdx, endColIdx)
+
+      // Cautiously shrink the number of rendered columns.
+      // This is to avoid rapidly shrinking and growing the visible column count
+      // which results in remounting cells
+      const currentCount = get(visibleColumns).length
+      if (currentCount === nextVisibleColumns.length + 1) {
+        return $columns.slice(startColIdx, endColIdx + 1)
+      } else {
+        return nextVisibleColumns
+      }
+    },
+    []
   )
 
   // Fetch next page when approaching end of data