listing relationships in UI

packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte

@@ -6,9 +6,13 @@
   import EditViewPopover from "./popovers/EditViewPopover.svelte"
   import NavItem from "components/common/NavItem.svelte"
 
+  const alphabetical = (a, b) => a.name?.toLowerCase() > b.name?.toLowerCase()
+
   export let sourceId
 
+
   $: selectedView = $views.selected && $views.selected.name
+  $: sortedTables = $tables.list.filter(table => table.sourceId === sourceId).sort(alphabetical)
 
   function selectTable(table) {
     tables.select(table)
@@ -33,7 +37,7 @@
 
 {#if $database?._id}
   <div class="hierarchy-items-container">
-    {#each $tables.list.filter(table => table.sourceId === sourceId) as table, idx}
+    {#each sortedTables as table, idx}
       <NavItem
         indentLevel={1}
         border={idx > 0}
@@ -46,7 +50,7 @@
           <EditTablePopover {table} />
         {/if}
       </NavItem>
-      {#each Object.keys(table.views || {}) as viewName, idx (idx)}
+      {#each [...Object.keys(table.views || {})].sort() as viewName, idx (idx)}
         <NavItem
           indentLevel={2}
           icon="Remove"

packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/index.svelte

@@ -15,6 +15,19 @@
   $: integration = datasource && $integrations[datasource.source]
   $: plusTables = datasource?.plus ? Object.values(datasource.entities) : []
 
+  function buildRelationshipDisplayString(fromTable, toTable) {
+    let displayString = fromTable.name
+    const toTableName = toTable.tableId?.split("_").pop()
+
+    displayString += `→ ${toTableName} (${toTable.relationshipType})`
+
+    if (toTable.through) {
+      // TODO: Through stuff
+    }
+
+    return displayString
+  }
+
   async function saveDatasource() {
     try {
       // Create datasource
@@ -133,14 +146,15 @@
           </Body>
           <div class="query-list">
               {#each plusTables as table}
-                {#each Object.keys(table) as column}
-                  {#if table[column].type === "link"}
+                {#each Object.keys(table.schema) as column}
+                  {#if table.schema[column].type === "link"}
                     <div
                       class="query-list-item"
-                      on:click={() => onClickTable(table[column])}
+                      on:click={() => onClickTable(table.schema[column])}
                     >
-                      <p class="query-name">{table[column].name}</p>
-                      <p>Primary Key: {table[column].primary}</p>
+                      <p class="query-name">{table.schema[column].name}</p>
+                      <p>{buildRelationshipDisplayString(table, table.schema[column])}</p>
+                      <!-- <p>{table.name} → {getTableNameFromId(table.schema[column].tableId)} ({table.schema[column].relationshipType}) </p> -->
                       <p>→</p>
                     </div>
                   {/if}