Improve rendering performance and simplify component props

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;
   }

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))

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;

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,

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