Render objects in popovers unless their mask is whitelisted

src/App.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Button, Heading, Input, Label, MultiSelect, Select } from "flowbite-svelte";
-  import { easydbInstanceStore, easydbInstanceDataStore, easydbInstanceDataPromiseStore, easydbTokenPromiseStore, userTokenStore, uuidStore, viewerPanelStateStore } from "./lib/stores";
+  import { easydbInstanceStore, easydbInstanceDataStore, easydbInstanceDataPromiseStore, easydbTokenPromiseStore, masksToRenderStore, userTokenStore, uuidStore, viewerPanelStateStore } from "./lib/stores";
   import EasyDbDetailView from "./components/EasyDBDetailView.svelte";
 
   let uuid = "859e2318-32f6-4013-8468-ef8cec0b581b";
@@ -15,13 +15,19 @@
   let selected_app_language = 'de-DE';
   let selected_data_languages = ['de-DE', 'en-US'];
 
+  function getAvailableMasks() {
+    return Array.from(Object.keys($easydbInstanceDataStore.masks), (m) => { return { value: m, name: m }});
+  }
+  let selected_masks = [];
+
   $: userTokenStore.set(token);
 
   function dumpStores() {
     console.log("easydbInstanceStore: ", $easydbInstanceStore);
     console.log("easydbInstanceDataStore: ", $easydbInstanceDataStore);
     console.log("easydbInstanceDataPromiseStore: ", $easydbInstanceDataPromiseStore);
     console.log("easydbTokenPromiseStore: ", $easydbTokenPromiseStore);
+    console.log("masksToRenderStore: ", $masksToRenderStore);
     console.log("userTokenStore: ", $userTokenStore);
     console.log("uuidStore: ", $uuidStore);
     console.log("viewerPanelStateStore: ", $viewerPanelStateStore);
@@ -159,12 +165,23 @@
         </Label>
         <Input bind:value={mask} />
       </div>
+
+      {#await $easydbInstanceDataPromiseStore }
+        Waiting for instance data...
+      {:then}
+        <div class="space-y-2 p-4">
+          <Label>
+            Masks to render (objects using these masks will render in the detail view, all others as popovers):
+          </Label>
+          <MultiSelect items={getAvailableMasks()} bind:value={selected_masks}/>
+        </div>
+      {/await}
       <div class="space-y-2 p-4">
         <Button on:click={dumpStores} class="w-full">Dump all stores to the console (Debugging)</Button>
       </div>
     </div>
     <div class="w-1/2 p-4 border border-gray-300">
-      <EasyDbDetailView uuid={uuid} appLanguage={selected_app_language} dataLanguages={selected_data_languages} easydbInstance={instance} mask={mask}/>
+      <EasyDbDetailView uuid={uuid} appLanguage={selected_app_language} dataLanguages={selected_data_languages} easydbInstance={instance} mask={mask} masksToRender={selected_masks} />
     </div>
   </div>
 </main>

src/components/EasyDBDetailView.svelte

@@ -1,24 +1,21 @@
 <script>
-  import { easydb_api_object } from "../lib/apiaccess";
   import { pregen_instance } from "../lib/easydbPregen";
-  import { maskObj } from "../lib/easydbHelpers";
-  import { appLanguageStore, dataLanguagesStore, easydbInstanceStore, easydbInstanceDataPromiseStore, uuidStore } from "../lib/stores";
+  import { appLanguageStore, dataLanguagesStore, easydbInstanceStore, easydbInstanceDataPromiseStore, userGivenMasksToRenderStore, uuidStore } from "../lib/stores";
 
-  import RecursiveEasyDbDetailView from "./logic/RecursiveEasyDBDetailView.svelte";
-  import TitleDisplay from "./logic/TitleDisplay.svelte";
-  import ViewerPanel from "./logic/ViewerPanel.svelte";
+  import DetailViewImpl from "./logic/DetailViewImpl.svelte";
   import Waiting from "./utils/Waiting.svelte";
-  import DetailControls from "./logic/DetailControls.svelte";
 
   export let uuid = "";
   export let appLanguage = "de-DE";
   export let dataLanguages = ["de-DE", "en-US"];
   export let easydbInstance = pregen_instance;
   export let mask = "";
+  export let masksToRender = [];
 
   $: appLanguageStore.set(appLanguage);
   $: dataLanguagesStore.set(dataLanguages);
   $: easydbInstanceStore.set(easydbInstance);
+  $: userGivenMasksToRenderStore.set(masksToRender)
   $: uuidStore.set([uuid]);
 </script>
 
@@ -27,14 +24,5 @@
     Accessing the EasyDB instance...
   </Waiting>
 {:then}
-  {#await easydb_api_object($uuidStore.at(-1), mask) }
-    <Waiting>
-      Waiting for API response...
-    </Waiting>
-  {:then data }
-    <DetailControls data={data}/>
-    <ViewerPanel fields={maskObj(data).fields} data={data} table={maskObj(data).table_name_hint}/>
-    <TitleDisplay data={data} table={maskObj(data).table_name_hint}/>
-    <RecursiveEasyDbDetailView fields={maskObj(data).fields} data={data} table={maskObj(data).table_name_hint}/>
-  {/await}
+  <DetailViewImpl mask={mask}/>
 {/await}

src/components/fields/Link.svelte

@@ -1,7 +1,7 @@
 <script>
   import { fieldData, hasField, standardHasAsset, selectStandardAsset } from "../../lib/easydbHelpers";
-  import { dataLanguagesStore, pushUUID } from "../../lib/stores";
-  import { A, Card, P } from "flowbite-svelte";
+  import { dataLanguagesStore, pushUUID, masksToRenderStore } from "../../lib/stores";
+  import { A, Card, P, Popover } from "flowbite-svelte";
 
   import FieldLabel from "./FieldLabel.svelte";
 
@@ -11,6 +11,28 @@
   export let condensed;
 
   const fdata = fieldData(data, table, field);
+
+  // Here, we load the component lazily
+  let detailViewComponent;
+
+  function requiresPopover() {
+    console.log($masksToRenderStore);
+    console.log(fdata._mask);
+    console.log($masksToRenderStore.includes(fdata._mask));
+    if (!$masksToRenderStore) {
+      return false;
+    }
+    return !($masksToRenderStore.includes(fdata._mask));
+  }
+
+  function handleClick() {
+    if(!requiresPopover()) {
+      pushUUID(fdata._uuid);
+    }
+    else {
+      detailViewComponent = import("../logic/DetailViewImpl.svelte");
+    }
+  }
 </script>
 
 {#if hasField(data, table, field)}
@@ -21,15 +43,22 @@
   {/if}
   {#if standardHasAsset(fdata)}
     <Card class="easydb-link max-w-full h-32" img={selectStandardAsset(fdata)} horizontal>
-      <A on:click={() => { pushUUID(fdata._uuid); }}>
+      <A id="link" on:click={handleClick}>
         {fdata["_standard"]["1"].text[$dataLanguagesStore[0]]}
       </A>
     </Card>
   {:else}
     <span class="easydb-link">
-      <A on:click={() => { pushUUID(fdata._uuid); }}>
+      <A id="link" on:click={handleClick}>
         {fdata["_standard"]["1"].text[$dataLanguagesStore[0]]}
       </A>
     </span>
   {/if}
 {/if}
+{#if detailViewComponent }
+  {#await detailViewComponent then { default : DetailViewImpl }}
+    <Popover class="w-[800px] h-[800px] overflow-auto z-20" triggeredBy="#link" trigger="click">
+      <DetailViewImpl uuid={fdata._uuid} />
+    </Popover>
+  {/await}
+{/if}

src/components/logic/DetailViewImpl.svelte

@@ -0,0 +1,25 @@
+<script>
+  import { easydb_api_object } from "../../lib/apiaccess";
+  import { maskObj } from "../../lib/easydbHelpers";
+  import { uuidStore } from "../../lib/stores";
+
+  import RecursiveEasyDbDetailView from "./RecursiveEasyDBDetailView.svelte";
+  import TitleDisplay from "./TitleDisplay.svelte";
+  import ViewerPanel from "./ViewerPanel.svelte";
+  import Waiting from "../utils/Waiting.svelte";
+  import DetailControls from "./DetailControls.svelte";
+
+  export let uuid;
+  export let mask = "";
+</script>
+
+{#await easydb_api_object(uuid ? uuid : $uuidStore.at(-1), mask) }
+  <Waiting>
+    Waiting for API response...
+  </Waiting>
+{:then data }
+  <DetailControls data={data}/>
+  <ViewerPanel fields={maskObj(data).fields} data={data} table={maskObj(data).table_name_hint}/>
+  <TitleDisplay data={data} table={maskObj(data).table_name_hint}/>
+  <RecursiveEasyDbDetailView fields={maskObj(data).fields} data={data} table={maskObj(data).table_name_hint}/>
+{/await}

src/components/logic/RecursiveEasyDBDetailView.svelte

@@ -177,7 +177,7 @@
   {:else if firstField.kind === "link" }
     {#if firstField.output[output] }
       {#if (firstField.inline === "standard") || (firstField.inline === "short") }
-        <Link field={firstField} data={data} table={table} condensed={condensed}/>
+        <Link field={firstField} data={data} table={table} condensed={condensed} />
       {:else if firstField.inline === "text" }
         <Card horizontal class="max-w-full block">
           {#await loadAdditionalUUID(firstField)}

src/lib/apiaccess.js

@@ -19,7 +19,7 @@ export async function easydb_api_object(uuid, mask) {
   if(response.status != 200) {
     throw new Error(`Could not fetch the data for uuid: ${uuid}`);
   }
-  const response_json = await response.json()
+  const response_json = await response.json();
   return response_json;
 }
 

src/lib/stores.js

@@ -96,3 +96,23 @@ export function popUUID() {
   uuidStore.update(uuids => uuids.slice(0, -1));
   viewerPanelStateStore.set("asset");
 }
+
+// A store for the user given choice of which masks to render
+export const userGivenMasksToRenderStore = writable([]);
+
+// The list of masks that should be rendered in the component
+export const masksToRenderStore = derived(
+  [userGivenMasksToRenderStore, easydbInstanceDataStore],
+  ([$userGivenMasksToRenderStore, $easydbInstanceDataStore]) => {
+    if ($easydbInstanceDataStore === undefined) {
+      return [];
+    }
+    if ($userGivenMasksToRenderStore.length === 0) {
+      if ($easydbInstanceDataStore.masks === null) {
+        return [];
+      }
+      return Object.keys($easydbInstanceDataStore.masks);
+    }
+    return $userGivenMasksToRenderStore;
+  }
+);