Rewrite relationship cell and update default column widths

packages/frontend-core/src/components/sheet/cells/OptionsCell.svelte

@@ -164,7 +164,6 @@
     user-select: none;
   }
   .arrow {
-    /*border-right: 2px solid var(--spectrum-global-color-blue-400);*/
     position: absolute;
     right: 0;
     top: 0;
@@ -202,7 +201,7 @@
     top: 0;
   }
   .option {
-    flex: 0 0 var(--row-height);
+    flex: 0 0 var(--default-row-height);
     padding: 0 var(--cell-padding);
     display: flex;
     flex-direction: row;

packages/frontend-core/src/components/sheet/cells/RelationshipCell.svelte

@@ -13,7 +13,8 @@
   export let invertX = false
   export let invertY = false
 
-  const { API } = getContext("sheet")
+  const { API, dispatch } = getContext("sheet")
+  const color = getColor(0)
 
   let isOpen = false
   let searchResults
@@ -23,11 +24,9 @@
   let primaryDisplay
   let candidateIndex
   let lastSearchId
-  let results
 
   $: oneRowOnly = schema?.relationshipType === "one-to-many"
   $: editable = focused && !readonly
-  $: results = getResults(searchResults, value)
   $: lookupMap = buildLookupMap(value, isOpen)
   $: search(searchString)
   $: {
@@ -94,10 +93,12 @@
     }
 
     // Sort and process results
-    searchResults = results.rows?.map(row => ({
-      ...row,
-      primaryDisplay: row[primaryDisplay],
-    }))
+    searchResults = sortRows(
+      results.rows?.map(row => ({
+        ...row,
+        primaryDisplay: row[primaryDisplay],
+      }))
+    )
     candidateIndex = searchResults?.length ? 0 : null
     lastSearchString = searchString
   }, 250)
@@ -112,17 +113,9 @@
     })
   }
 
-  // Generates the list of results to show inside the dropdown
-  const getResults = (searchResults, value) => {
-    return searchString ? sortRows(searchResults) : sortRows(value)
-  }
-
   const open = async () => {
     isOpen = true
 
-    // Ensure results are properly reset
-    results = sortRows(value)
-
     // Fetch definition if required
     if (!definition) {
       definition = await API.fetchTableDefinition(schema.tableId)
@@ -196,6 +189,14 @@
     close()
   }
 
+  const showRelationship = async id => {
+    const relatedRow = await API.fetchRow({
+      tableId: schema.tableId,
+      rowId: id,
+    })
+    dispatch("edit-row", relatedRow)
+  }
+
   onMount(() => {
     api = {
       focus: open,
@@ -205,74 +206,136 @@
   })
 </script>
 
-<div class="container" on:click={editable ? open : null} class:editable>
-  {#each value || [] as relationship, idx}
-    {#if relationship.primaryDisplay}
-      <div class="badge" style="--color: {getColor(idx)}">
-        {relationship.primaryDisplay}
-      </div>
-    {/if}
-  {/each}
-</div>
-
-{#if isOpen}
-  <div class="dropdown" class:invertX class:invertY on:wheel|stopPropagation>
-    <div class="search">
-      <Input autofocus quiet type="text" bind:value={searchString} />
-    </div>
-    {#if !lastSearchString}
-      {#if primaryDisplay}
-        <div class="info">
-          Search for {definition.name} rows by {primaryDisplay}
-        </div>
-      {/if}
-    {:else}
-      <div class="info">
-        {searchResults.length} row{searchResults.length === 1 ? "" : "s"} found
-      </div>
-    {/if}
-    {#if results?.length}
-      <div class="results">
-        {#each results as row, idx}
-          <div
-            class="result"
-            on:click={() => toggleRow(row)}
-            class:candidate={idx === candidateIndex}
-            on:mouseenter={() => (candidateIndex = idx)}
-          >
-            <div class="badge" style="--color: {getColor(idx)}">
-              {row.primaryDisplay}
-            </div>
-            {#if isRowSelected(row)}
+<div class="wrapper" class:editable class:focused style="--color:{color};">
+  <div class="container">
+    <div class="values" on:wheel={e => (focused ? e.stopPropagation() : null)}>
+      {#each value || [] as relationship, idx}
+        {#if relationship.primaryDisplay}
+          <div class="badge">
+            <span
+              on:click={focused
+                ? () => showRelationship(relationship._id)
+                : null}
+            >
+              {relationship.primaryDisplay}
+            </span>
+            {#if focused}
               <Icon
-                size="S"
-                name="Checkmark"
-                color="var(--spectrum-global-color-blue-400)"
+                name="Close"
+                size="XS"
+                hoverable
+                on:click={() => toggleRow(relationship)}
               />
             {/if}
           </div>
-        {/each}
-      </div>
-    {/if}
+        {/if}
+      {/each}
+      {#if focused}
+        <div class="add" on:click={open}>
+          <Icon name="Add" size="S" />
+        </div>
+      {/if}
+    </div>
   </div>
-{/if}
+
+  {#if isOpen}
+    <div class="dropdown" class:invertX class:invertY on:wheel|stopPropagation>
+      <div class="search">
+        <Input
+          autofocus
+          quiet
+          type="text"
+          bind:value={searchString}
+          placeholder={primaryDisplay ? `Search by ${primaryDisplay}` : null}
+        />
+      </div>
+      {#if searchResults}
+        <div class="info">
+          {searchResults.length} row{searchResults.length === 1 ? "" : "s"} found
+        </div>
+      {/if}
+
+      {#if searchResults?.length}
+        <div class="results">
+          {#each searchResults as row, idx}
+            <div
+              class="result"
+              on:click={() => toggleRow(row)}
+              class:candidate={idx === candidateIndex}
+              on:mouseenter={() => (candidateIndex = idx)}
+            >
+              <div class="badge">
+                {row.primaryDisplay}
+              </div>
+              {#if isRowSelected(row)}
+                <Icon
+                  size="S"
+                  name="Checkmark"
+                  color="var(--spectrum-global-color-blue-400)"
+                />
+              {/if}
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
 
 <style>
-  .container {
-    align-self: stretch;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 0 var(--cell-padding);
+  .wrapper {
     flex: 1 1 auto;
-    width: 0;
-    gap: var(--cell-spacing);
+    align-self: flex-start;
+    min-height: var(--row-height);
+    max-height: var(--row-height);
     overflow: hidden;
+    --max-relationship-height: 94px;
   }
-  .container.editable:hover {
-    cursor: pointer;
+  .wrapper.focused {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background: var(--cell-background);
+    z-index: 1;
+    max-height: none;
+    overflow: visible;
   }
 
+  .container {
+    min-height: var(--row-height);
+    overflow: hidden;
+  }
+  .focused .container {
+    overflow-y: auto;
+    border-radius: 2px;
+    max-height: var(--max-relationship-height);
+  }
+  .focused .container:after {
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    border: 2px solid var(--cell-color);
+    pointer-events: none;
+    border-radius: 2px;
+    box-sizing: border-box;
+  }
+
+  .values {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex: 1 1 auto;
+    gap: var(--cell-spacing);
+    grid-row-gap: 7px;
+    overflow: hidden;
+    padding: 7px var(--cell-padding);
+    flex-wrap: wrap;
+  }
   .badge {
     flex: 0 0 auto;
     padding: 2px var(--cell-padding);
@@ -282,6 +345,23 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    display: flex;
+    align-items: center;
+    gap: var(--cell-spacing);
+  }
+  .focused .badge span:hover {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  .add {
+    background: var(--spectrum-global-color-gray-200);
+    padding: 3px 4px;
+    border-radius: 4px;
+  }
+  .add:hover {
+    background: var(--spectrum-global-color-gray-300);
+    cursor: pointer;
   }
 
   .dropdown {
@@ -290,7 +370,10 @@
     left: 0;
     min-width: 100%;
     max-width: calc(100% + var(--max-cell-render-width-overflow));
-    max-height: var(--max-cell-render-height);
+    height: calc(
+      var(--max-cell-render-height) + var(--row-height) -
+        var(--max-relationship-height)
+    );
     background: var(--cell-background);
     border: var(--cell-border);
     box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.15);
@@ -301,7 +384,7 @@
   }
   .dropdown.invertY {
     transform: translateY(-100%);
-    top: 0;
+    top: -1px;
   }
   .dropdown.invertX {
     left: auto;
@@ -317,7 +400,7 @@
   }
   .result {
     padding: 0 var(--cell-padding);
-    flex: 0 0 var(--row-height);
+    flex: 0 0 var(--default-row-height);
     display: flex;
     gap: var(--cell-spacing);
     justify-content: space-between;
@@ -332,7 +415,7 @@
   }
 
   .search {
-    flex: 0 0 calc(var(--row-height) - 1px);
+    flex: 0 0 calc(var(--default-row-height) - 1px);
     display: flex;
     align-items: center;
     margin: 0 var(--cell-padding);
@@ -342,6 +425,9 @@
     min-width: 0;
     width: 100%;
   }
+  .search :global(.spectrum-Textfield-input) {
+    font-size: 13px;
+  }
   .search :global(.spectrum-Form-item) {
     flex: 1 1 auto;
   }
@@ -349,8 +435,8 @@
   .info {
     color: var(--spectrum-global-color-gray-600);
     font-size: 12px;
-    padding: var(--cell-padding);
-    flex: 0 0 var(--row-height);
+    padding: 4px var(--cell-padding);
+    flex: 0 0 auto;
     display: flex;
     align-items: center;
     white-space: nowrap;

packages/frontend-core/src/components/sheet/controls/RowHeightButton.svelte

@@ -1,20 +1,21 @@
 <script>
   import { getContext } from "svelte"
   import { ActionButton, Popover } from "@budibase/bbui"
+  import { DefaultRowHeight } from "../lib/constants"
 
   const { rowHeight, loaded } = getContext("sheet")
   const sizeOptions = [
     {
       label: "Small",
-      size: 36,
+      size: DefaultRowHeight,
     },
     {
       label: "Medium",
-      size: 54,
+      size: 65,
     },
     {
       label: "Large",
-      size: 72,
+      size: 94,
     },
   ]
 

packages/frontend-core/src/components/sheet/layout/Sheet.svelte

@@ -24,7 +24,9 @@
     MaxCellRenderHeight,
     MaxCellRenderWidthOverflow,
     GutterWidth,
+    DefaultRowHeight,
   } from "../lib/constants"
+  import RowHeightButton from "../controls/RowHeightButton.svelte"
 
   export let API
   export let tableId
@@ -88,13 +90,14 @@
   id="sheet-{rand}"
   class:is-resizing={$isResizing}
   class:is-reordering={$isReordering}
-  style="--row-height:{$rowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-height:{MaxCellRenderHeight}px; --max-cell-render-width-overflow:{MaxCellRenderWidthOverflow}px;"
+  style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-height:{MaxCellRenderHeight}px; --max-cell-render-width-overflow:{MaxCellRenderWidthOverflow}px;"
 >
   <div class="controls">
     <div class="controls-left">
       <AddRowButton />
       <AddColumnButton />
       <slot name="controls" />
+      <RowHeightButton />
       <HideColumnsButton />
       <SortButton />
     </div>

packages/frontend-core/src/components/sheet/lib/constants.js

@@ -1,6 +1,9 @@
-export const SheetPadding = 264
-export const MaxCellRenderHeight = 216
+export const SheetPadding = 276
+export const MaxCellRenderHeight = 252
 export const MaxCellRenderWidthOverflow = 200
 export const ScrollBarSize = 8
 export const GutterWidth = 72
 export const DefaultColumnWidth = 200
+export const DefaultRelationshipColumnWidth = 360
+export const MinColumnWidth = 100
+export const DefaultRowHeight = 36

packages/frontend-core/src/components/sheet/stores/columns.js

@@ -1,6 +1,16 @@
 import { derived, get, writable } from "svelte/store"
 import { cloneDeep } from "lodash/fp"
-import { GutterWidth, DefaultColumnWidth } from "../lib/constants"
+import {
+  GutterWidth,
+  DefaultColumnWidth,
+  DefaultRelationshipColumnWidth,
+} from "../lib/constants"
+
+export const getDefaultColumnWidth = column => {
+  return column?.schema?.type === "link"
+    ? DefaultRelationshipColumnWidth
+    : DefaultColumnWidth
+}
 
 export const createStores = () => {
   const columns = writable([])
@@ -76,10 +86,12 @@ export const deriveStores = context => {
       // Copy over metadata
       if (column === $stickyColumn?.name) {
         newSchema[column].visible = true
-        newSchema[column].width = $stickyColumn.width || DefaultColumnWidth
+        newSchema[column].width =
+          $stickyColumn.width || getDefaultColumnWidth($stickyColumn)
       } else {
         newSchema[column].visible = $columns[index]?.visible ?? true
-        newSchema[column].width = $columns[index]?.width || DefaultColumnWidth
+        newSchema[column].width =
+          $columns[index]?.width || getDefaultColumnWidth($columns[index])
       }
     })
 
@@ -143,7 +155,9 @@ export const initialise = context => {
         .map(field => ({
           name: field,
           schema: schema[field],
-          width: schema[field].width || DefaultColumnWidth,
+          width:
+            schema[field].width ||
+            getDefaultColumnWidth({ schema: schema[field].type }),
           visible: schema[field].visible ?? true,
           order: schema[field].order,
         }))
@@ -181,9 +195,12 @@ export const initialise = context => {
     if (!existing && currentStickyColumn?.name === primaryDisplay) {
       existing = currentStickyColumn
     }
+    const defaultWidth = getDefaultColumnWidth({
+      schema: schema[primaryDisplay],
+    })
     stickyColumn.set({
       name: primaryDisplay,
-      width: schema[primaryDisplay].width || DefaultColumnWidth,
+      width: schema[primaryDisplay].width || defaultWidth,
       left: GutterWidth,
       schema: schema[primaryDisplay],
       idx: "sticky",

packages/frontend-core/src/components/sheet/stores/resize.js

@@ -1,7 +1,6 @@
 import { writable, get, derived } from "svelte/store"
-import { DefaultColumnWidth } from "../lib/constants"
-
-export const MinColumnWidth = 100
+import { getDefaultColumnWidth } from "./columns"
+import { MinColumnWidth } from "../lib/constants"
 
 const initialState = {
   initialMouseX: null,
@@ -98,15 +97,17 @@ export const deriveStores = context => {
 
   // Resets a column size back to default
   const resetSize = async column => {
-    if (column.name === get(stickyColumn)?.name) {
+    const $stickyColumn = get(stickyColumn)
+    const width = getDefaultColumnWidth(column)
+    if (column.name === $stickyColumn?.name) {
       stickyColumn.update(state => ({
         ...state,
-        width: DefaultColumnWidth,
+        width,
       }))
     } else {
       columns.update(state => {
         const columnIdx = state.findIndex(x => x.name === column.name)
-        state[columnIdx].width = DefaultColumnWidth
+        state[columnIdx].width = width
         return [...state]
       })
     }