Add support for rendering real relationships inside grid

packages/standard-components/src/DataGrid/Relationship/RelationshipDisplay.svelte

@@ -0,0 +1,58 @@
+<script>
+  import { onMount } from "svelte"
+  import api from "../../api"
+  import getTable from "./tableCache"
+
+  export let columnName
+  export let row
+
+  let linkedRows = []
+  let displayColumn
+
+  onMount(async () => {
+    linkedRows = await fetchLinkedRowsData(row, columnName)
+    if (linkedRows && linkedRows.length) {
+      const table = await getTable(linkedRows[0].tableId)
+      if (table && table.primaryDisplay) {
+        displayColumn = table.primaryDisplay
+      }
+    }
+  })
+
+  async function fetchLinkedRowsData(row, columnName) {
+    if (!row || !row._id) {
+      return []
+    }
+    const QUERY_URL = `/api/${row.tableId}/${row._id}/enrich`
+    const response = await api.get(QUERY_URL)
+    const enrichedRow = await response.json()
+    return enrichedRow[columnName]
+  }
+</script>
+
+<div class="container">
+  {#if linkedRows && linkedRows.length && displayColumn}
+    {#each linkedRows as linkedRow}
+      <div class="linked-row">{linkedRow[displayColumn]}</div>
+    {/each}
+  {/if}
+</div>
+
+<style>
+  .container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xs);
+    width: 100%;
+  }
+  .linked-row {
+    color: white;
+    background-color: var(--ink);
+    border-radius: var(--border-radius-l);
+    padding: var(--spacing-xs) var(--spacing-s) calc(var(--spacing-xs) + 1px)
+      var(--spacing-s);
+    line-height: 1;
+  }
+</style>

packages/standard-components/src/DataGrid/Relationship/tableCache.js

@@ -0,0 +1,21 @@
+import api from "../../api"
+
+let cache = {}
+
+async function fetchTable(id) {
+  const FETCH_TABLE_URL = `/api/tables/${id}`
+  const response = await api.get(FETCH_TABLE_URL)
+  return await response.json()
+}
+
+export default async function getTable(tableId) {
+  if (!tableId) {
+    return null
+  }
+  if (!cache[tableId]) {
+    console.log("cache miss for " + tableId)
+    cache[tableId] = fetchTable(tableId)
+    cache[tableId] = await cache[tableId]
+  }
+  return await cache[tableId]
+}

packages/standard-components/src/DataGrid/customRenderer.js

@@ -4,6 +4,7 @@
 import AttachmentCell from "./AttachmentCell/Button.svelte"
 import Select from "./Select/Wrapper.svelte"
 import DatePicker from "./DateTime/Wrapper.svelte"
+import RelationshipDisplay from "./Relationship/RelationshipDisplay.svelte"
 
 const renderers = new Map([
   ["boolean", booleanRenderer],
@@ -103,14 +104,20 @@ function optionsRenderer({ inclusion }, editable) {
   }
 }
 /* eslint-disable no-unused-vars */
-function linkedRowRenderer(constraints, editable) {
+function linkedRowRenderer(constraints, editable, schema) {
   return params => {
     let container = document.createElement("div")
     container.style.display = "grid"
     container.style.placeItems = "center"
     container.style.height = "100%"
 
-    container.innerText = params.value ? params.value.length : 0
+    new RelationshipDisplay({
+      target: container,
+      props: {
+        row: params.data,
+        columnName: params.column.colId,
+      },
+    })
 
     return container
   }