From 9c081f2eeaa9cf50dba1a6013db5764125e694a8 Mon Sep 17 00:00:00 2001
From: patnorris <patrick@DESKTOP-TQ4V8LQ.localdomain>
Date: Tue, 10 Oct 2023 19:42:42 +0100
Subject: [PATCH 01/18] Refactor Bebb related code

---
 src/PersonalWebSpace_backend/main.mo          |   1 -
 .../components/ProtocolEntity.svelte          |   4 +-
 .../components/SpaceNeighbors.svelte          | 152 +++++-----------
 .../helpers/bebb_utils.ts                     | 163 ++++++++++++++++++
 4 files changed, 206 insertions(+), 114 deletions(-)
 create mode 100644 src/PersonalWebSpace_frontend/helpers/bebb_utils.ts

diff --git a/src/PersonalWebSpace_backend/main.mo b/src/PersonalWebSpace_backend/main.mo
index 4a46978..3a33b99 100644
--- a/src/PersonalWebSpace_backend/main.mo
+++ b/src/PersonalWebSpace_backend/main.mo
@@ -24,7 +24,6 @@ import HTTP "./Http";
 
 import Stoic "./EXT/Stoic";
 
-import Protocol "./Protocol";
 import Testable "mo:matchers/Testable";
 import Blob "mo:base/Blob";
 import Hash "mo:base/Hash";
diff --git a/src/PersonalWebSpace_frontend/components/ProtocolEntity.svelte b/src/PersonalWebSpace_frontend/components/ProtocolEntity.svelte
index d170e97..d0bf31b 100644
--- a/src/PersonalWebSpace_frontend/components/ProtocolEntity.svelte
+++ b/src/PersonalWebSpace_frontend/components/ProtocolEntity.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type { Entity } from "src/integrations/BebbProtocol/bebb.did";
+  import type { BebbEntity } from "../helpers/bebb_utils";
 
-  export let entity : Entity;
+  export let entity : BebbEntity;
   export let viewerIsSpaceOwner: Boolean = false;
   export let deleteSpaceNeighborFunction; // Function passed to delete the link between the Space and the Neighbor
 
diff --git a/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte b/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
index 5bd7d55..889bcc8 100644
--- a/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
+++ b/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
@@ -1,6 +1,18 @@
 <script lang="ts">
-    import type { Principal } from "@dfinity/principal";
-    import type { EntityInitiationObject, BridgeInitiationObject, EntityAttachedBridgesResult, EntityAttachedBridges, Bridge, Entity } from "src/integrations/BebbProtocol/bebb.did";
+    import type {
+        BebbBridge,
+        BebbBridgeInitiationObject,
+        BebbEntity,
+        BebbEntityAttachedBridges,
+        BebbEntityAttachedBridgesResult,
+        BebbEntityInitiationObject,
+    } from "../helpers/bebb_utils";
+    import {
+        createBebbEntityAndBridge,
+        getBebbBridgesBetweenEntities,
+        deleteBebbBridgesByOwner,
+        getConnectedEntitiesInBebb,
+    } from "../helpers/bebb_utils";
     import { onMount } from "svelte";
     import ProtocolEntity from "./ProtocolEntity.svelte";
     import UserSpaces from "./UserSpaces.svelte";
@@ -71,7 +83,7 @@
         if (neighborUrlInputHandler(newNeighborUrl) && spaceEntityId) {
             // Create Neighbor connection as Bridge from Space in Bebb Protocol
             const externalId : [string] = [newNeighborUrl];
-            const entityInitiationObject : EntityInitiationObject= {
+            const entityInitiationObject : BebbEntityInitiationObject= {
                 settings: [],
                 entityType: { 'Resource' : { 'Web' : null } },
                 name: [],
@@ -80,7 +92,7 @@
                 entitySpecificFields: externalId,
             };
 
-            const bridgeEntityInitiationObject : BridgeInitiationObject = {
+            const bridgeEntityInitiationObject : BebbBridgeInitiationObject = {
                 settings: [],
                 name: [],
                 description: [`Created to connect two Spaces as Neighbors in the Open Internet Metaverse at https://${PersonalWebSpace_frontend_canister_id}${appDomain}/`] as [string],
@@ -91,19 +103,9 @@
                 toEntityId: "",
             };
             try {
-                const createEntityResponse = await $store.protocolActor.create_entity(entityInitiationObject);
-                // @ts-ignore
-                if (createEntityResponse && createEntityResponse.Ok) {
-                    // @ts-ignore
-                    const newNeighborEntityId = createEntityResponse.Ok;
-                    bridgeEntityInitiationObject.toEntityId = newNeighborEntityId;
-                    const createBridgeResponse = await $store.protocolActor.create_bridge(bridgeEntityInitiationObject);
-                    // @ts-ignore
-                    if (createBridgeResponse && createBridgeResponse.Ok) {
-                        successfullyAddedNeighbor = true;
-                    } else {
-                        errorAddingNeighbor = true;
-                    };
+                const createBebbEntityAndBridgeResponse = await createBebbEntityAndBridge(entityInitiationObject, bridgeEntityInitiationObject);
+                if (createBebbEntityAndBridgeResponse) {
+                    successfullyAddedNeighbor = true;
                 } else {
                     errorAddingNeighbor = true;
                 };
@@ -127,69 +129,30 @@
         neighborCreationInProgress = false;
     };
 
-// Helper function to find Bridge(s) between Space and a Neighbor
-    const getBridgesBetweenEntities = async (spaceEntityId, neighborProtocolEntityId, bothBridgingDirections = false, includePendingBridges = false) : Promise<Bridge[]> => {
-        if (neighborProtocolEntityId && spaceEntityId) {
-            let getBridgesResponse : EntityAttachedBridgesResult;
-            try {
-                getBridgesResponse = await $store.protocolActor.get_from_bridge_ids_by_entity_id(spaceEntityId);
-            } catch (error) {
-                console.error("Error Getting Bridges", error);
-                return null;                
-            };
-            // @ts-ignore
-            if (getBridgesResponse && getBridgesResponse.Ok && getBridgesResponse.Ok.length > 0) {
-                // Filter for Bridges to Neighbor
-                // @ts-ignore
-                const bridgesRetrieved : EntityAttachedBridges = getBridgesResponse.Ok;
-                let getBridgeRequestPromises = [];
-                for (var i = 0; i < bridgesRetrieved.length; i++) {
-                    if (bridgesRetrieved[i] && bridgesRetrieved[i].id) {
-                        getBridgeRequestPromises.push($store.protocolActor.get_bridge(bridgesRetrieved[i].id)); // Send requests in parallel and then await all to speed up
-                    };
-                };
-                const getBridgeResponses = await Promise.all(getBridgeRequestPromises);
-                const bridgesBetweenEntities : Bridge[] = [];
-                for (var j = 0; j < getBridgeResponses.length; j++) {
-                    if (getBridgeResponses[j].Err) {
-                        console.error("Error retrieving Bridge", getBridgeResponses[j].Err);
-                    } else {
-                        const bridge : Bridge = getBridgeResponses[j].Ok;
-                        if (bridge && bridge.id && bridge.toEntityId === neighborProtocolEntityId) {
-                            bridgesBetweenEntities.push(bridge);
-                        };
-                    };
-                };
-                return bridgesBetweenEntities;
-            };
-        };
-        return null;
-    };
-
 // Owner clicked to delete a Neighbor
     // neighborProtocolEntityId: internal id in Bebb Protocol of the Neighbor to be deleted
     const deleteSpaceNeighbor = async (neighborProtocolEntityId) => {
         const spaceEntityId = extractSpaceEntityId();
         if (neighborProtocolEntityId && spaceEntityId && isViewerSpaceOwner()) {
             // Find id of Bridge between Space's and Neighbor's Entities in Bebb Protocol (note: there might be multiple)
-            const findBridgesResponse : Bridge[] = await getBridgesBetweenEntities(spaceEntityId, neighborProtocolEntityId);
+            let findBridgesResponse : BebbBridge[];
+            try {
+                findBridgesResponse = await getBebbBridgesBetweenEntities(spaceEntityId, neighborProtocolEntityId);
+            } catch (error) {
+                console.error("Error Getting Bridges ", error);                
+                return null;                
+            };
+            
             if (findBridgesResponse && findBridgesResponse.length > 0) {
-                // Delete Bridge(s) in Bebb Protocol owned by Space owner
-                let requestPromises = [];
-                for (var i = 0; i < findBridgesResponse.length; i++) {
-                    const bridgeId = findBridgesResponse[i].id;
-                    if (bridgeId && findBridgesResponse[i].owner?.toText() === spaceNft.owner?.toText()) {
-                        requestPromises.push($store.protocolActor.delete_bridge(bridgeId)); // Send requests in parallel and then await all to speed up
-                    };
-                };
-                const deletionResponses = await Promise.all(requestPromises);
-                for (var j = 0; j < deletionResponses.length; j++) {
-                    if (deletionResponses[j].Err) {
-                        console.error("Error deleting Space Neighbor", deletionResponses[j].Err);
-                        return null;
+                try {
+                    const deleteBebbBridgesByOwnerResponse = await deleteBebbBridgesByOwner(findBridgesResponse, spaceNft.owner?.toText());
+                    if (deleteBebbBridgesByOwnerResponse) {
+                        return true;
                     };
+                } catch (error) {
+                    console.error("Error deleting Space Neighbor ", error);                
+                    return null;                
                 };
-                return true;
             };
         };
         return null;
@@ -228,49 +191,16 @@
 
     const loadSpaceNeighbors = async () => {
         const spaceEntityId = extractSpaceEntityId();
-        let spaceNeighborsResponse : EntityAttachedBridgesResult;
-        let retrievedNeighborEntities : Entity[] = [];
+        let spaceNeighborsResponse : BebbEntityAttachedBridgesResult;
+        let retrievedNeighborEntities : BebbEntity[] = [];
         try {
-            try {
-                spaceNeighborsResponse = await $store.protocolActor.get_from_bridge_ids_by_entity_id(spaceEntityId);
-            } catch (error) {
-                console.error("Error Getting Bridges", error);
-                return null;                
-            };
-            // @ts-ignore
-            if (spaceNeighborsResponse && spaceNeighborsResponse.Ok && spaceNeighborsResponse.Ok.length > 0) {
-                // @ts-ignore
-                const bridgesRetrieved : EntityAttachedBridges = spaceNeighborsResponse.Ok;
-                const bridgeIds = [];
-                let getBridgeRequestPromises = [];
-                for (var i = 0; i < bridgesRetrieved.length; i++) {
-                    if (bridgesRetrieved[i] && bridgesRetrieved[i].id && bridgesRetrieved[i].linkStatus.hasOwnProperty('CreatedOwner')) {
-                        bridgeIds.push(bridgesRetrieved[i].id);
-                        getBridgeRequestPromises.push($store.protocolActor.get_bridge(bridgesRetrieved[i].id)); // Send requests in parallel and then await all to speed up
-                    };
-                };
-                const getBridgeResponses = await Promise.all(getBridgeRequestPromises);
-                let getConnectedEntityRequestPromises = [];
-                for (var j = 0; j < getBridgeResponses.length; j++) {
-                    if (getBridgeResponses[j].Err) {
-                        console.error("Error retrieving Bridge", getBridgeResponses[j].Err);
-                    } else {
-                        const bridge : Bridge = getBridgeResponses[j].Ok;
-                        getConnectedEntityRequestPromises.push($store.protocolActor.get_entity(bridge.toEntityId)); // Send requests in parallel and then await all to speed up
-                    };
-                };
-                const getConnectedEntityResponses = await Promise.all(getConnectedEntityRequestPromises);
-                for (var j = 0; j < getConnectedEntityResponses.length; j++) {
-                    if (getConnectedEntityResponses[j].Err) {
-                        console.error("Error retrieving connected Entity", getConnectedEntityResponses[j].Err);
-                    } else {
-                        const connectedEntity : Entity = getConnectedEntityResponses[j].Ok;
-                        retrievedNeighborEntities.push(connectedEntity);
-                    };
-                };
+            const getConnectedEntitiesResponse = await getConnectedEntitiesInBebb(spaceEntityId);
+            for (var j = 0; j < getConnectedEntitiesResponse.length; j++) {
+                const connectedEntity : BebbEntity = getConnectedEntitiesResponse[j];
+                retrievedNeighborEntities.push(connectedEntity);
             };
         } catch(err) {
-            console.error("Error getting SpaceNeighbors", err);
+            console.error("Error getting SpaceNeighbors ", err);
             neighborsLoadingError = true;
         };
         loadingInProgress = false;
diff --git a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
new file mode 100644
index 0000000..aace52b
--- /dev/null
+++ b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
@@ -0,0 +1,163 @@
+import { store } from "../store";
+
+import type { EntityInitiationObject, BridgeInitiationObject, EntityAttachedBridgesResult, EntityAttachedBridges, Bridge, Entity } from "src/integrations/BebbProtocol/bebb.did";
+
+export type BebbEntity = Entity;
+export type BebbEntityInitiationObject = EntityInitiationObject;
+export type BebbBridgeInitiationObject = BridgeInitiationObject;
+export type BebbEntityAttachedBridgesResult = EntityAttachedBridgesResult;
+export type BebbEntityAttachedBridges = EntityAttachedBridges;
+export type BebbBridge = Bridge;
+
+let appStore;
+store.subscribe((value) => appStore = value);
+
+export async function createBebbEntityAndBridge(entityInitiationObject: BebbEntityInitiationObject, bridgeEntityInitiationObject: BebbBridgeInitiationObject) {
+  if (!appStore) {
+    throw new Error("Error in createBebbEntityAndBridge: store not initialized");
+  };
+  const createEntityResponse = await appStore.protocolActor.create_entity(entityInitiationObject);
+  // @ts-ignore
+  if (createEntityResponse && createEntityResponse.Ok) {
+    // @ts-ignore
+    const newNeighborEntityId = createEntityResponse.Ok;
+    bridgeEntityInitiationObject.toEntityId = newNeighborEntityId;
+    const createBridgeResponse = await appStore.protocolActor.create_bridge(bridgeEntityInitiationObject);
+    // @ts-ignore
+    if (createBridgeResponse && createBridgeResponse.Ok) {
+      return true;
+    } else {
+      throw new Error("Error creating new Bridge");
+    };
+  } else {
+    throw new Error("Error creating new Entity");   
+  };
+};
+
+// Helper function to find Bridge(s) between Space and a Neighbor
+export const getBebbBridgesBetweenEntities = async (bebbEntityId: string, connectedBebbEntityId: string, bothBridgingDirections = false, includePendingBridges = false) : Promise<BebbBridge[]> => {
+  if (!appStore) {
+    throw new Error("Error in createBebbEntityAndBridge: store not initialized");
+  };
+  if (connectedBebbEntityId && bebbEntityId) {
+    let getBridgesResponse : BebbEntityAttachedBridgesResult;
+    try {
+        getBridgesResponse = await appStore.protocolActor.get_from_bridge_ids_by_entity_id(bebbEntityId);
+    } catch (error) {
+        throw new Error("Error getting from Bridge ids from Bebb for Entity");    
+    };
+    // @ts-ignore
+    if (getBridgesResponse && getBridgesResponse.Ok && getBridgesResponse.Ok.length > 0) {
+      // Filter for Bridges to Connected
+      // @ts-ignore
+      const bridgesRetrieved : BebbEntityAttachedBridges = getBridgesResponse.Ok;
+      let getBridgeRequestPromises = [];
+      for (var i = 0; i < bridgesRetrieved.length; i++) {
+        if (bridgesRetrieved[i] && bridgesRetrieved[i].id) {
+          getBridgeRequestPromises.push(appStore.protocolActor.get_bridge(bridgesRetrieved[i].id)); // Send requests in parallel and then await all to speed up
+        };
+      };
+      const getBridgeResponses = await Promise.all(getBridgeRequestPromises);
+      const bridgesBetweenEntities : BebbBridge[] = [];
+      for (var j = 0; j < getBridgeResponses.length; j++) {
+        if (getBridgeResponses[j].Err) {
+          console.error("Error retrieving Bridge", getBridgeResponses[j].Err);
+        } else {
+          const bridge : BebbBridge = getBridgeResponses[j].Ok;
+          if (bridge && bridge.id && bridge.toEntityId === connectedBebbEntityId) {
+            bridgesBetweenEntities.push(bridge);
+          };
+        };
+      };
+      return bridgesBetweenEntities;
+    };
+  };
+  return null;
+};
+
+export async function deleteBebbBridgesByOwner(bebbBridges: BebbBridge[], ownerIdentifier: string) {
+  if (!appStore) {
+    throw new Error("Error in createBebbEntityAndBridge: store not initialized");
+  };
+  // Delete Bridge(s) in Bebb Protocol owned by Space owner
+  let requestPromises = [];
+  for (var i = 0; i < bebbBridges.length; i++) {
+    const bridgeId = bebbBridges[i].id;
+    if (bridgeId && bebbBridges[i].owner?.toText() === ownerIdentifier) {
+      requestPromises.push(appStore.protocolActor.delete_bridge(bridgeId)); // Send requests in parallel and then await all to speed up
+    };
+  };
+  const deletionResponses = await Promise.all(requestPromises);
+  for (var j = 0; j < deletionResponses.length; j++) {
+    if (deletionResponses[j].Err) {
+      console.error("Error deleting Space Neighbor ", deletionResponses[j].Err);
+      return null;
+    };
+  };
+  return true;
+};
+
+export async function getConnectedBridgesFromEntityInBebb(bebbEntityId: string, bridgingDirection = "from") : Promise<BebbBridge[]> {
+
+};
+
+export async function getConnectedEntitiesInBebb(bebbEntityId: string, bridgingDirection = "from") : Promise<BebbEntity[]> {
+  try {
+    const getBridgesResponse = await getConnectedBridgesFromEntityInBebb(bebbEntityId, bridgingDirection);
+    let getConnectedEntityRequestPromises = [];
+    for (var j = 0; j < getBridgesResponse.length; j++) {
+      const bridge : BebbBridge = getBridgesResponse[j];
+      getConnectedEntityRequestPromises.push(appStore.protocolActor.get_entity(bridge.toEntityId)); // Send requests in parallel and then await all to speed up
+    };
+    const getConnectedEntityResponses = await Promise.all(getConnectedEntityRequestPromises);
+    let connectedEntities = [];
+    for (var j = 0; j < getConnectedEntityResponses.length; j++) {
+      if (getConnectedEntityResponses[j].Err) {
+          console.error("Error retrieving connected Entity", getConnectedEntityResponses[j].Err);
+      } else {
+          const connectedEntity : BebbEntity = getConnectedEntityResponses[j].Ok;
+          connectedEntities.push(connectedEntity);
+      };
+    };
+    return connectedEntities;
+
+
+
+    spaceNeighborsResponse = await $store.protocolActor.get_from_bridge_ids_by_entity_id(spaceEntityId);
+  } catch (error) {
+      console.error("Error Getting Connected Entities in Bebb ", error);
+      return null;                
+  };
+  // @ts-ignore
+  if (spaceNeighborsResponse && spaceNeighborsResponse.Ok && spaceNeighborsResponse.Ok.length > 0) {
+      // @ts-ignore
+      const bridgesRetrieved : EntityAttachedBridges = spaceNeighborsResponse.Ok;
+      const bridgeIds = [];
+      let getBridgeRequestPromises = [];
+      for (var i = 0; i < bridgesRetrieved.length; i++) {
+          if (bridgesRetrieved[i] && bridgesRetrieved[i].id && bridgesRetrieved[i].linkStatus.hasOwnProperty('CreatedOwner')) {
+              bridgeIds.push(bridgesRetrieved[i].id);
+              getBridgeRequestPromises.push($store.protocolActor.get_bridge(bridgesRetrieved[i].id)); // Send requests in parallel and then await all to speed up
+          };
+      };
+      const getBridgeResponses = await Promise.all(getBridgeRequestPromises);
+      let getConnectedEntityRequestPromises = [];
+      for (var j = 0; j < getBridgeResponses.length; j++) {
+          if (getBridgeResponses[j].Err) {
+              console.error("Error retrieving Bridge", getBridgeResponses[j].Err);
+          } else {
+              const bridge : BebbBridge = getBridgeResponses[j].Ok;
+              getConnectedEntityRequestPromises.push($store.protocolActor.get_entity(bridge.toEntityId)); // Send requests in parallel and then await all to speed up
+          };
+      };
+      const getConnectedEntityResponses = await Promise.all(getConnectedEntityRequestPromises);
+      for (var j = 0; j < getConnectedEntityResponses.length; j++) {
+          if (getConnectedEntityResponses[j].Err) {
+              console.error("Error retrieving connected Entity", getConnectedEntityResponses[j].Err);
+          } else {
+              const connectedEntity : BebbEntity = getConnectedEntityResponses[j].Ok;
+              retrievedNeighborEntities.push(connectedEntity);
+          };
+      };
+  };
+};

From b379afed8ce8c4da73a9a20f6c4499a26c505578 Mon Sep 17 00:00:00 2001
From: patnorris <patrick@DESKTOP-TQ4V8LQ.localdomain>
Date: Tue, 10 Oct 2023 20:34:36 +0100
Subject: [PATCH 02/18] Finish refactoring Bebb related code

---
 .../components/SpaceNeighbors.svelte          |   1 -
 .../components/UserSpace.svelte               |  13 +-
 .../helpers/bebb_utils.ts                     | 157 ++++++++++++------
 .../pages/CreateSpace.svelte                  |  15 +-
 .../pages/Space.svelte                        |  65 ++------
 5 files changed, 144 insertions(+), 107 deletions(-)

diff --git a/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte b/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
index 889bcc8..9fffb08 100644
--- a/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
+++ b/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
@@ -191,7 +191,6 @@
 
     const loadSpaceNeighbors = async () => {
         const spaceEntityId = extractSpaceEntityId();
-        let spaceNeighborsResponse : BebbEntityAttachedBridgesResult;
         let retrievedNeighborEntities : BebbEntity[] = [];
         try {
             const getConnectedEntitiesResponse = await getConnectedEntitiesInBebb(spaceEntityId);
diff --git a/src/PersonalWebSpace_frontend/components/UserSpace.svelte b/src/PersonalWebSpace_frontend/components/UserSpace.svelte
index 35883b1..46ff203 100644
--- a/src/PersonalWebSpace_frontend/components/UserSpace.svelte
+++ b/src/PersonalWebSpace_frontend/components/UserSpace.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
-  import type { BridgeInitiationObject } from "src/integrations/BebbProtocol/bebb.did";
+  import type {
+    BebbBridgeInitiationObject,
+  } from "../helpers/bebb_utils";
+  import {
+    createBebbBridge,
+  } from "../helpers/bebb_utils";
   import { canisterId as PersonalWebSpace_frontend_canister_id } from "canisters/PersonalWebSpace_frontend";
   import { onMount } from "svelte";
 
@@ -45,7 +50,7 @@
     const spaceEntityId = extractSpaceEntityId();
     if (entityIdToLinkTo !== "" && spaceEntityId) {
       // Create link as Bridge from Space in Bebb Protocol
-      const bridgeEntityInitiationObject : BridgeInitiationObject = {
+      const bridgeEntityInitiationObject : BebbBridgeInitiationObject = {
         settings: [],
         name: [],
         description: [`Created to connect two Spaces as Neighbors in the Open Internet Metaverse at https://${PersonalWebSpace_frontend_canister_id}${appDomain}/`] as [string],
@@ -56,9 +61,9 @@
         toEntityId: entityIdToLinkTo,
       };
       try {
-          const createBridgeResponse = await $store.protocolActor.create_bridge(bridgeEntityInitiationObject);
+          const createBridgeResponse = await createBebbBridge(bridgeEntityInitiationObject);
           // @ts-ignore
-          if (createBridgeResponse && createBridgeResponse.Ok) {
+          if (createBridgeResponse) {
             successfullyCreatedLink = true;
           } else {
             errorCreatingLink = true;
diff --git a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
index aace52b..08a1e9d 100644
--- a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
+++ b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
@@ -1,6 +1,13 @@
 import { store } from "../store";
 
-import type { EntityInitiationObject, BridgeInitiationObject, EntityAttachedBridgesResult, EntityAttachedBridges, Bridge, Entity } from "src/integrations/BebbProtocol/bebb.did";
+import type {
+  EntityInitiationObject,
+  BridgeInitiationObject,
+  EntityAttachedBridgesResult,
+  EntityAttachedBridges,
+  Bridge,
+  Entity,
+} from "src/integrations/BebbProtocol/bebb.did";
 
 export type BebbEntity = Entity;
 export type BebbEntityInitiationObject = EntityInitiationObject;
@@ -12,19 +19,49 @@ export type BebbBridge = Bridge;
 let appStore;
 store.subscribe((value) => appStore = value);
 
-export async function createBebbEntityAndBridge(entityInitiationObject: BebbEntityInitiationObject, bridgeEntityInitiationObject: BebbBridgeInitiationObject) {
+export async function createBebbEntity(entityInitiationObject: BebbEntityInitiationObject) {
   if (!appStore) {
-    throw new Error("Error in createBebbEntityAndBridge: store not initialized");
+    throw new Error("Error in createBebbEntity: store not initialized");
   };
   const createEntityResponse = await appStore.protocolActor.create_entity(entityInitiationObject);
   // @ts-ignore
   if (createEntityResponse && createEntityResponse.Ok) {
+    return createEntityResponse.Ok;
+  } else {
+    throw new Error("Error creating new Entity");   
+  };
+};
+
+export async function createBebbBridge(bridgeEntityInitiationObject: BebbBridgeInitiationObject) {
+  if (!appStore) {
+    throw new Error("Error in createBebbBridge: store not initialized");
+  };
+  const createBridgeResponse = await appStore.protocolActor.create_bridge(bridgeEntityInitiationObject);
+  // @ts-ignore
+  if (createBridgeResponse && createBridgeResponse.Ok) {
+    return createBridgeResponse.Ok;
+  } else {
+    throw new Error("Error creating new Bridge");
+  };
+};
+
+export async function createBebbEntityAndBridge(entityInitiationObject: BebbEntityInitiationObject, bridgeEntityInitiationObject: BebbBridgeInitiationObject) {
+  if (!appStore) {
+    throw new Error("Error in createBebbEntityAndBridge: store not initialized");
+  };
+  const createEntityResponse = await createBebbEntity(entityInitiationObject);
+  // @ts-ignore
+  if (createEntityResponse) {
     // @ts-ignore
-    const newNeighborEntityId = createEntityResponse.Ok;
-    bridgeEntityInitiationObject.toEntityId = newNeighborEntityId;
-    const createBridgeResponse = await appStore.protocolActor.create_bridge(bridgeEntityInitiationObject);
+    const newNeighborEntityId = createEntityResponse;
+    if (!bridgeEntityInitiationObject.toEntityId || bridgeEntityInitiationObject.toEntityId === "") {
+      bridgeEntityInitiationObject.toEntityId = newNeighborEntityId;
+    } else {
+      bridgeEntityInitiationObject.fromEntityId = newNeighborEntityId;
+    };
+    const createBridgeResponse = await createBebbBridge(bridgeEntityInitiationObject);
     // @ts-ignore
-    if (createBridgeResponse && createBridgeResponse.Ok) {
+    if (createBridgeResponse) {
       return true;
     } else {
       throw new Error("Error creating new Bridge");
@@ -37,7 +74,7 @@ export async function createBebbEntityAndBridge(entityInitiationObject: BebbEnti
 // Helper function to find Bridge(s) between Space and a Neighbor
 export const getBebbBridgesBetweenEntities = async (bebbEntityId: string, connectedBebbEntityId: string, bothBridgingDirections = false, includePendingBridges = false) : Promise<BebbBridge[]> => {
   if (!appStore) {
-    throw new Error("Error in createBebbEntityAndBridge: store not initialized");
+    throw new Error("Error in getBebbBridgesBetweenEntities: store not initialized");
   };
   if (connectedBebbEntityId && bebbEntityId) {
     let getBridgesResponse : BebbEntityAttachedBridgesResult;
@@ -77,7 +114,7 @@ export const getBebbBridgesBetweenEntities = async (bebbEntityId: string, connec
 
 export async function deleteBebbBridgesByOwner(bebbBridges: BebbBridge[], ownerIdentifier: string) {
   if (!appStore) {
-    throw new Error("Error in createBebbEntityAndBridge: store not initialized");
+    throw new Error("Error in deleteBebbBridgesByOwner: store not initialized");
   };
   // Delete Bridge(s) in Bebb Protocol owned by Space owner
   let requestPromises = [];
@@ -97,13 +134,69 @@ export async function deleteBebbBridgesByOwner(bebbBridges: BebbBridge[], ownerI
   return true;
 };
 
-export async function getConnectedBridgesFromEntityInBebb(bebbEntityId: string, bridgingDirection = "from") : Promise<BebbBridge[]> {
+export async function getConnectedBridgeIdsForEntityInBebb(bebbEntityId: string, bridgingDirection = "from") : Promise<string[]> {
+  if (!appStore) {
+    throw new Error("Error in getConnectedBridgeIdsForEntityInBebb: store not initialized");
+  };
+  const bridgeIds : string[] = [];
+  try {
+    if (bridgingDirection === "from") {
+      const bridgeIdsResponse = await appStore.protocolActor.get_from_bridge_ids_by_entity_id(bebbEntityId);
+      if (bridgeIdsResponse && bridgeIdsResponse.Ok && bridgeIdsResponse.Ok.length > 0) {
+        const bridgesRetrieved : BebbEntityAttachedBridges = bridgeIdsResponse.Ok;
+        for (var i = 0; i < bridgesRetrieved.length; i++) {
+          if (bridgesRetrieved[i] && bridgesRetrieved[i].id) {
+            bridgeIds.push(bridgesRetrieved[i].id);
+          };
+        };
+      };
+    } else { // bridgingDirection === "to"
+      const bridgeIdsResponse = await appStore.protocolActor.get_to_bridge_ids_by_entity_id(bebbEntityId);
+      if (bridgeIdsResponse && bridgeIdsResponse.Ok && bridgeIdsResponse.Ok.length > 0) {
+        const bridgesRetrieved : BebbEntityAttachedBridges = bridgeIdsResponse.Ok;
+        for (var i = 0; i < bridgesRetrieved.length; i++) {
+          if (bridgesRetrieved[i] && bridgesRetrieved[i].id) {
+            bridgeIds.push(bridgesRetrieved[i].id);
+          };
+        };
+      };
+    };    
+  } catch (error) {
+    console.error("Error in getConnectedBridgeIdsForEntityInBebb ", error);    
+  };
+  return bridgeIds;
+};
 
+export async function getConnectedBridgesForEntityInBebb(bebbEntityId: string, bridgingDirection = "from") : Promise<BebbBridge[]> {
+  if (!appStore) {
+    throw new Error("Error in getConnectedBridgesForEntityInBebb: store not initialized");
+  };
+  const bridgeIds = await getConnectedBridgeIdsForEntityInBebb(bebbEntityId, bridgingDirection);
+  let getBridgeRequestPromises = [];
+  for (var i = 0; i < bridgeIds.length; i++) {
+    if (bridgeIds[i]) { // TODO: filter like bridgesRetrieved[i].linkStatus.hasOwnProperty('CreatedOwner')
+      getBridgeRequestPromises.push(appStore.protocolActor.get_bridge(bridgeIds[i])); // Send requests in parallel and then await all to speed up
+    };
+  };
+  const getBridgeResponses = await Promise.all(getBridgeRequestPromises);
+  let bridges : BebbBridge[] = [];
+  for (var j = 0; j < getBridgeResponses.length; j++) {
+    if (getBridgeResponses[j].Err) {
+        console.error("Error retrieving Bridge", getBridgeResponses[j].Err);
+    } else {
+      const bridge : BebbBridge = getBridgeResponses[j].Ok;
+      bridges.push(bridge);
+    };
+  };
+  return bridges;
 };
 
 export async function getConnectedEntitiesInBebb(bebbEntityId: string, bridgingDirection = "from") : Promise<BebbEntity[]> {
+  if (!appStore) {
+    throw new Error("Error in getConnectedEntitiesInBebb: store not initialized");
+  };
   try {
-    const getBridgesResponse = await getConnectedBridgesFromEntityInBebb(bebbEntityId, bridgingDirection);
+    const getBridgesResponse = await getConnectedBridgesForEntityInBebb(bebbEntityId, bridgingDirection);
     let getConnectedEntityRequestPromises = [];
     for (var j = 0; j < getBridgesResponse.length; j++) {
       const bridge : BebbBridge = getBridgesResponse[j];
@@ -113,51 +206,15 @@ export async function getConnectedEntitiesInBebb(bebbEntityId: string, bridgingD
     let connectedEntities = [];
     for (var j = 0; j < getConnectedEntityResponses.length; j++) {
       if (getConnectedEntityResponses[j].Err) {
-          console.error("Error retrieving connected Entity", getConnectedEntityResponses[j].Err);
+        console.error("Error retrieving connected Entity", getConnectedEntityResponses[j].Err);
       } else {
-          const connectedEntity : BebbEntity = getConnectedEntityResponses[j].Ok;
-          connectedEntities.push(connectedEntity);
+        const connectedEntity : BebbEntity = getConnectedEntityResponses[j].Ok;
+        connectedEntities.push(connectedEntity);
       };
     };
     return connectedEntities;
-
-
-
-    spaceNeighborsResponse = await $store.protocolActor.get_from_bridge_ids_by_entity_id(spaceEntityId);
   } catch (error) {
       console.error("Error Getting Connected Entities in Bebb ", error);
       return null;                
   };
-  // @ts-ignore
-  if (spaceNeighborsResponse && spaceNeighborsResponse.Ok && spaceNeighborsResponse.Ok.length > 0) {
-      // @ts-ignore
-      const bridgesRetrieved : EntityAttachedBridges = spaceNeighborsResponse.Ok;
-      const bridgeIds = [];
-      let getBridgeRequestPromises = [];
-      for (var i = 0; i < bridgesRetrieved.length; i++) {
-          if (bridgesRetrieved[i] && bridgesRetrieved[i].id && bridgesRetrieved[i].linkStatus.hasOwnProperty('CreatedOwner')) {
-              bridgeIds.push(bridgesRetrieved[i].id);
-              getBridgeRequestPromises.push($store.protocolActor.get_bridge(bridgesRetrieved[i].id)); // Send requests in parallel and then await all to speed up
-          };
-      };
-      const getBridgeResponses = await Promise.all(getBridgeRequestPromises);
-      let getConnectedEntityRequestPromises = [];
-      for (var j = 0; j < getBridgeResponses.length; j++) {
-          if (getBridgeResponses[j].Err) {
-              console.error("Error retrieving Bridge", getBridgeResponses[j].Err);
-          } else {
-              const bridge : BebbBridge = getBridgeResponses[j].Ok;
-              getConnectedEntityRequestPromises.push($store.protocolActor.get_entity(bridge.toEntityId)); // Send requests in parallel and then await all to speed up
-          };
-      };
-      const getConnectedEntityResponses = await Promise.all(getConnectedEntityRequestPromises);
-      for (var j = 0; j < getConnectedEntityResponses.length; j++) {
-          if (getConnectedEntityResponses[j].Err) {
-              console.error("Error retrieving connected Entity", getConnectedEntityResponses[j].Err);
-          } else {
-              const connectedEntity : BebbEntity = getConnectedEntityResponses[j].Ok;
-              retrievedNeighborEntities.push(connectedEntity);
-          };
-      };
-  };
 };
diff --git a/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte b/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
index b4b448c..6d98f28 100644
--- a/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
+++ b/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
@@ -11,7 +11,12 @@
 
   import { canisterId as backendCanisterId } from "canisters/PersonalWebSpace_backend";
   import { canisterId as PersonalWebSpace_frontend_canister_id } from "canisters/PersonalWebSpace_frontend";
-  import type { EntityInitiationObject } from "src/integrations/BebbProtocol/bebb.did";
+  import type {
+    BebbEntityInitiationObject,
+  } from "../helpers/bebb_utils";
+  import {
+    createBebbEntity,
+  } from "../helpers/bebb_utils";
 
   let webHostedGlbModelUrl : string = "";
 
@@ -159,7 +164,7 @@
         setSpaceWasCreated();
         // Protocol integration: create Space as Entity in Protocol
         const externalId = `https://${PersonalWebSpace_frontend_canister_id}${appDomain}/#/space/${spaceId}`;
-        let entityInitiationObject : EntityInitiationObject = {
+        let entityInitiationObject : BebbEntityInitiationObject = {
           settings: [],
           entityType: { 'Resource' : { 'Web' : null } },
           name: ["Personal Web Space"],
@@ -167,11 +172,11 @@
           keywords: [["NFT", "Space", "Open Internet Metaverse", "heeyah"]] as [Array<string>],
           entitySpecificFields: [externalId],
         };
-        const spaceEntityIdResponse = await $store.protocolActor.create_entity(entityInitiationObject);
+        const spaceEntityIdResponse = await createBebbEntity(entityInitiationObject);
         // @ts-ignore
-        if (spaceEntityIdResponse && spaceEntityIdResponse.Ok) {
+        if (spaceEntityIdResponse) {
           // @ts-ignore
-          const spaceEntityIdUpdateResponse = await $store.backendActor.updateSpaceEntityId(spaceId, spaceEntityIdResponse.Ok);
+          const spaceEntityIdUpdateResponse = await $store.backendActor.updateSpaceEntityId(spaceId, spaceEntityIdResponse);
           // @ts-ignore
           if (!spaceEntityIdUpdateResponse || !spaceEntityIdUpdateResponse.Ok) {
             console.error("Update Space Error:", spaceEntityIdUpdateResponse);
diff --git a/src/PersonalWebSpace_frontend/pages/Space.svelte b/src/PersonalWebSpace_frontend/pages/Space.svelte
index 56ab38a..83d93de 100644
--- a/src/PersonalWebSpace_frontend/pages/Space.svelte
+++ b/src/PersonalWebSpace_frontend/pages/Space.svelte
@@ -25,7 +25,12 @@
   import { supportedImageExtensions, supportedVideoExtensions, supported3dModelExtensions } from "../helpers/utils";
   
   import { canisterId as backendCanisterId } from "canisters/PersonalWebSpace_backend";
-  import type { Entity, EntityAttachedBridgesResult, Bridge } from "src/integrations/BebbProtocol/bebb.did";
+  import type {
+    BebbEntity,
+  } from "../helpers/bebb_utils";
+  import {
+    getConnectedEntitiesInBebb,
+  } from "../helpers/bebb_utils";
   
 
 // This is needed for URL params
@@ -1185,7 +1190,7 @@
     // Find the camera entity
     let cameraEntity = document.querySelector('a-entity[camera]');
     // Enable flying in the space (i.e. pressing the forward button always moves into the direction of view, incl. up and down)
-    // ts-ignore
+    // @ts-ignore
     cameraEntity.setAttribute('wasd-controls', { acceleration:65, fly:true });
   };
 
@@ -1286,12 +1291,12 @@
 
   const extractSpaceEntityId = () => {
     if (spaceNft && spaceNft.metadata && spaceNft.metadata.length > 0) {
-        for (var j = 0; j < spaceNft.metadata[0].key_val_data.length; j++) {
-            let fieldKey = spaceNft.metadata[0].key_val_data[j].key;
-            if (fieldKey === "protocolEntityId") {
-                return spaceNft.metadata[0].key_val_data[j].val.TextContent;
-            };
+      for (var j = 0; j < spaceNft.metadata[0].key_val_data.length; j++) {
+        let fieldKey = spaceNft.metadata[0].key_val_data[j].key;
+        if (fieldKey === "protocolEntityId") {
+          return spaceNft.metadata[0].key_val_data[j].val.TextContent;
         };
+      };
     };
   };
 
@@ -1352,49 +1357,15 @@
   const loadSpaceNeighborsIn3D = async () => {
     // Load the Space's Neighbors from Bebb Protocol and display them in 3D in the scene
     const spaceEntityId = extractSpaceEntityId();
-    let spaceNeighborsResponse : EntityAttachedBridgesResult;
-    let retrievedNeighborEntities : Entity[] = [];
+    let retrievedNeighborEntities : BebbEntity[] = [];
     try {
-      try {
-          spaceNeighborsResponse = await $store.protocolActor.get_from_bridge_ids_by_entity_id(spaceEntityId);
-      } catch (error) {
-          console.error("Error Getting Bridges", error);
-          return null;                
-      };
-      // @ts-ignore
-      if (spaceNeighborsResponse && spaceNeighborsResponse.Ok && spaceNeighborsResponse.Ok.length > 0) {
-        // @ts-ignore
-        const bridgesRetrieved : EntityAttachedBridges = spaceNeighborsResponse.Ok;
-        const bridgeIds = [];
-        let getBridgeRequestPromises = [];
-        for (var i = 0; i < bridgesRetrieved.length; i++) {
-            if (bridgesRetrieved[i] && bridgesRetrieved[i].id && bridgesRetrieved[i].linkStatus.hasOwnProperty('CreatedOwner')) {
-                bridgeIds.push(bridgesRetrieved[i].id);
-                getBridgeRequestPromises.push($store.protocolActor.get_bridge(bridgesRetrieved[i].id)); // Send requests in parallel and then await all to speed up
-            };
-        };
-        const getBridgeResponses = await Promise.all(getBridgeRequestPromises);
-        let getConnectedEntityRequestPromises = [];
-        for (var j = 0; j < getBridgeResponses.length; j++) {
-            if (getBridgeResponses[j].Err) {
-                console.error("Error retrieving Bridge", getBridgeResponses[j].Err);
-            } else {
-                const bridge : Bridge = getBridgeResponses[j].Ok;
-                getConnectedEntityRequestPromises.push($store.protocolActor.get_entity(bridge.toEntityId)); // Send requests in parallel and then await all to speed up
-            };
-        };
-        const getConnectedEntityResponses = await Promise.all(getConnectedEntityRequestPromises);
-        for (var j = 0; j < getConnectedEntityResponses.length; j++) {
-            if (getConnectedEntityResponses[j].Err) {
-                console.error("Error retrieving connected Entity", getConnectedEntityResponses[j].Err);
-            } else {
-                const connectedEntity : Entity = getConnectedEntityResponses[j].Ok;
-                retrievedNeighborEntities.push(connectedEntity);
-            };
-        };
+      const getConnectedEntitiesResponse = await getConnectedEntitiesInBebb(spaceEntityId);
+      for (var j = 0; j < getConnectedEntitiesResponse.length; j++) {
+        const connectedEntity : BebbEntity = getConnectedEntitiesResponse[j];
+        retrievedNeighborEntities.push(connectedEntity);
       };
     } catch(err) {
-        console.error("Error getting SpaceNeighbors", err);
+      console.error("Error getting SpaceNeighbors ", err);
     };
 
     // Only load Neighbors if they haven't been loaded yet or reload if new Neighbors have been added

From ba2cc47d0d55e11277e08283cf1f12e1c106b9b6 Mon Sep 17 00:00:00 2001
From: patnorris <patrick@DESKTOP-TQ4V8LQ.localdomain>
Date: Wed, 11 Oct 2023 15:47:33 +0100
Subject: [PATCH 03/18] Clean code

---
 src/PersonalWebSpace_frontend/helpers/bebb_utils.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
index 08a1e9d..663ef45 100644
--- a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
+++ b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
@@ -79,9 +79,9 @@ export const getBebbBridgesBetweenEntities = async (bebbEntityId: string, connec
   if (connectedBebbEntityId && bebbEntityId) {
     let getBridgesResponse : BebbEntityAttachedBridgesResult;
     try {
-        getBridgesResponse = await appStore.protocolActor.get_from_bridge_ids_by_entity_id(bebbEntityId);
+      getBridgesResponse = await appStore.protocolActor.get_from_bridge_ids_by_entity_id(bebbEntityId);
     } catch (error) {
-        throw new Error("Error getting from Bridge ids from Bebb for Entity");    
+      throw new Error("Error getting from Bridge ids from Bebb for Entity");    
     };
     // @ts-ignore
     if (getBridgesResponse && getBridgesResponse.Ok && getBridgesResponse.Ok.length > 0) {
@@ -182,7 +182,7 @@ export async function getConnectedBridgesForEntityInBebb(bebbEntityId: string, b
   let bridges : BebbBridge[] = [];
   for (var j = 0; j < getBridgeResponses.length; j++) {
     if (getBridgeResponses[j].Err) {
-        console.error("Error retrieving Bridge", getBridgeResponses[j].Err);
+      console.error("Error retrieving Bridge", getBridgeResponses[j].Err);
     } else {
       const bridge : BebbBridge = getBridgeResponses[j].Ok;
       bridges.push(bridge);
@@ -214,7 +214,7 @@ export async function getConnectedEntitiesInBebb(bebbEntityId: string, bridgingD
     };
     return connectedEntities;
   } catch (error) {
-      console.error("Error Getting Connected Entities in Bebb ", error);
-      return null;                
+    console.error("Error Getting Connected Entities in Bebb ", error);
+    return null;                
   };
 };

From 68b055124a64a06cdb44555df1e66b5ea8119f4a Mon Sep 17 00:00:00 2001
From: patnorris <patrick@DESKTOP-TQ4V8LQ.localdomain>
Date: Thu, 12 Oct 2023 14:55:23 +0100
Subject: [PATCH 04/18] Finalize Bebb refactoring after testing

---
 src/PersonalWebSpace_frontend/helpers/bebb_utils.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
index 663ef45..74bf54c 100644
--- a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
+++ b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
@@ -72,16 +72,20 @@ export async function createBebbEntityAndBridge(entityInitiationObject: BebbEnti
 };
 
 // Helper function to find Bridge(s) between Space and a Neighbor
-export const getBebbBridgesBetweenEntities = async (bebbEntityId: string, connectedBebbEntityId: string, bothBridgingDirections = false, includePendingBridges = false) : Promise<BebbBridge[]> => {
+export const getBebbBridgesBetweenEntities = async (bebbEntityId: string, connectedBebbEntityId: string, bridgingDirection = "from") : Promise<BebbBridge[]> => {
   if (!appStore) {
     throw new Error("Error in getBebbBridgesBetweenEntities: store not initialized");
   };
   if (connectedBebbEntityId && bebbEntityId) {
     let getBridgesResponse : BebbEntityAttachedBridgesResult;
     try {
-      getBridgesResponse = await appStore.protocolActor.get_from_bridge_ids_by_entity_id(bebbEntityId);
+      if (bridgingDirection === "from") {
+        getBridgesResponse = await appStore.protocolActor.get_from_bridge_ids_by_entity_id(bebbEntityId);
+      } else {
+        getBridgesResponse = await appStore.protocolActor.get_to_bridge_ids_by_entity_id(bebbEntityId);
+      };
     } catch (error) {
-      throw new Error("Error getting from Bridge ids from Bebb for Entity");    
+      throw new Error("Error getting Bridge ids from Bebb for Entity");    
     };
     // @ts-ignore
     if (getBridgesResponse && getBridgesResponse.Ok && getBridgesResponse.Ok.length > 0) {
@@ -174,7 +178,7 @@ export async function getConnectedBridgesForEntityInBebb(bebbEntityId: string, b
   const bridgeIds = await getConnectedBridgeIdsForEntityInBebb(bebbEntityId, bridgingDirection);
   let getBridgeRequestPromises = [];
   for (var i = 0; i < bridgeIds.length; i++) {
-    if (bridgeIds[i]) { // TODO: filter like bridgesRetrieved[i].linkStatus.hasOwnProperty('CreatedOwner')
+    if (bridgeIds[i]) { // TODO: filters like bridgesRetrieved[i].linkStatus.hasOwnProperty('CreatedOwner')
       getBridgeRequestPromises.push(appStore.protocolActor.get_bridge(bridgeIds[i])); // Send requests in parallel and then await all to speed up
     };
   };

From db4484826f5e5c73b8fb7b0d6c1fdfe5079ee7b1 Mon Sep 17 00:00:00 2001
From: patnorris <patrick@DESKTOP-TQ4V8LQ.localdomain>
Date: Thu, 26 Oct 2023 15:15:47 +0100
Subject: [PATCH 05/18] Add layer 2 function and refactor code

---
 .../helpers/bebb_utils.ts                     | 183 ++++++++++--------
 1 file changed, 105 insertions(+), 78 deletions(-)

diff --git a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
index 74bf54c..c7392e7 100644
--- a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
+++ b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
@@ -5,6 +5,7 @@ import type {
   BridgeInitiationObject,
   EntityAttachedBridgesResult,
   EntityAttachedBridges,
+  EntityAttachedBridge,
   Bridge,
   Entity,
 } from "src/integrations/BebbProtocol/bebb.did";
@@ -14,7 +15,9 @@ export type BebbEntityInitiationObject = EntityInitiationObject;
 export type BebbBridgeInitiationObject = BridgeInitiationObject;
 export type BebbEntityAttachedBridgesResult = EntityAttachedBridgesResult;
 export type BebbEntityAttachedBridges = EntityAttachedBridges;
+export type BebbEntityAttachedBridge = EntityAttachedBridge;
 export type BebbBridge = Bridge;
+export type BebbEntityAndBridge = { entity: BebbEntity, bridge: BebbBridge };
 
 let appStore;
 store.subscribe((value) => appStore = value);
@@ -72,48 +75,30 @@ export async function createBebbEntityAndBridge(entityInitiationObject: BebbEnti
 };
 
 // Helper function to find Bridge(s) between Space and a Neighbor
-export const getBebbBridgesBetweenEntities = async (bebbEntityId: string, connectedBebbEntityId: string, bridgingDirection = "from") : Promise<BebbBridge[]> => {
+export const getBebbBridgesBetweenEntities = async (bebbEntityId: string, connectedBebbEntityId: string, bridgingDirection = "from"): Promise<BebbBridge[]> => {
   if (!appStore) {
     throw new Error("Error in getBebbBridgesBetweenEntities: store not initialized");
   };
-  if (connectedBebbEntityId && bebbEntityId) {
-    let getBridgesResponse : BebbEntityAttachedBridgesResult;
-    try {
+
+  if (!connectedBebbEntityId || !bebbEntityId) {
+    return null;
+  };
+
+  try {
+    const bridges = await getConnectedBridgesForEntityInBebb(bebbEntityId, bridgingDirection);
+
+    // Filter Bridges based on the connected Entity ID and the bridging direction
+    return bridges.filter(bridge => {
       if (bridgingDirection === "from") {
-        getBridgesResponse = await appStore.protocolActor.get_from_bridge_ids_by_entity_id(bebbEntityId);
-      } else {
-        getBridgesResponse = await appStore.protocolActor.get_to_bridge_ids_by_entity_id(bebbEntityId);
-      };
-    } catch (error) {
-      throw new Error("Error getting Bridge ids from Bebb for Entity");    
-    };
-    // @ts-ignore
-    if (getBridgesResponse && getBridgesResponse.Ok && getBridgesResponse.Ok.length > 0) {
-      // Filter for Bridges to Connected
-      // @ts-ignore
-      const bridgesRetrieved : BebbEntityAttachedBridges = getBridgesResponse.Ok;
-      let getBridgeRequestPromises = [];
-      for (var i = 0; i < bridgesRetrieved.length; i++) {
-        if (bridgesRetrieved[i] && bridgesRetrieved[i].id) {
-          getBridgeRequestPromises.push(appStore.protocolActor.get_bridge(bridgesRetrieved[i].id)); // Send requests in parallel and then await all to speed up
-        };
-      };
-      const getBridgeResponses = await Promise.all(getBridgeRequestPromises);
-      const bridgesBetweenEntities : BebbBridge[] = [];
-      for (var j = 0; j < getBridgeResponses.length; j++) {
-        if (getBridgeResponses[j].Err) {
-          console.error("Error retrieving Bridge", getBridgeResponses[j].Err);
-        } else {
-          const bridge : BebbBridge = getBridgeResponses[j].Ok;
-          if (bridge && bridge.id && bridge.toEntityId === connectedBebbEntityId) {
-            bridgesBetweenEntities.push(bridge);
-          };
-        };
-      };
-      return bridgesBetweenEntities;
-    };
+        return bridge.toEntityId === connectedBebbEntityId;
+      } else {  // If bridgingDirection is "to"
+        return bridge.fromEntityId === connectedBebbEntityId;
+      }
+    });
+  } catch (error) {
+    console.error("Error in getBebbBridgesBetweenEntities ", error);
+    return null;
   };
-  return null;
 };
 
 export async function deleteBebbBridgesByOwner(bebbBridges: BebbBridge[], ownerIdentifier: string) {
@@ -138,50 +123,48 @@ export async function deleteBebbBridgesByOwner(bebbBridges: BebbBridge[], ownerI
   return true;
 };
 
-export async function getConnectedBridgeIdsForEntityInBebb(bebbEntityId: string, bridgingDirection = "from") : Promise<string[]> {
+function extractBridgeIds(bridgesRetrieved: BebbEntityAttachedBridges): string[] {
+  return bridgesRetrieved
+    .filter(bridge => bridge && bridge.id)
+    .map(bridge => bridge.id);
+};
+
+export async function getConnectedBridgeIdsForEntityInBebb(bebbEntityId: string, bridgingDirection = "from"): Promise<string[]> {
   if (!appStore) {
     throw new Error("Error in getConnectedBridgeIdsForEntityInBebb: store not initialized");
   };
-  const bridgeIds : string[] = [];
+
+  let bridgeIdsResponse;
+  
   try {
     if (bridgingDirection === "from") {
-      const bridgeIdsResponse = await appStore.protocolActor.get_from_bridge_ids_by_entity_id(bebbEntityId);
-      if (bridgeIdsResponse && bridgeIdsResponse.Ok && bridgeIdsResponse.Ok.length > 0) {
-        const bridgesRetrieved : BebbEntityAttachedBridges = bridgeIdsResponse.Ok;
-        for (var i = 0; i < bridgesRetrieved.length; i++) {
-          if (bridgesRetrieved[i] && bridgesRetrieved[i].id) {
-            bridgeIds.push(bridgesRetrieved[i].id);
-          };
-        };
-      };
+      bridgeIdsResponse = await appStore.protocolActor.get_from_bridge_ids_by_entity_id(bebbEntityId);
     } else { // bridgingDirection === "to"
-      const bridgeIdsResponse = await appStore.protocolActor.get_to_bridge_ids_by_entity_id(bebbEntityId);
-      if (bridgeIdsResponse && bridgeIdsResponse.Ok && bridgeIdsResponse.Ok.length > 0) {
-        const bridgesRetrieved : BebbEntityAttachedBridges = bridgeIdsResponse.Ok;
-        for (var i = 0; i < bridgesRetrieved.length; i++) {
-          if (bridgesRetrieved[i] && bridgesRetrieved[i].id) {
-            bridgeIds.push(bridgesRetrieved[i].id);
-          };
-        };
-      };
+      bridgeIdsResponse = await appStore.protocolActor.get_to_bridge_ids_by_entity_id(bebbEntityId);
+    };
+
+    if (bridgeIdsResponse && bridgeIdsResponse.Ok && bridgeIdsResponse.Ok.length > 0) {
+      return extractBridgeIds(bridgeIdsResponse.Ok);
     };    
   } catch (error) {
-    console.error("Error in getConnectedBridgeIdsForEntityInBebb ", error);    
+    console.error("Error in getConnectedBridgeIdsForEntityInBebb ", error);
   };
-  return bridgeIds;
+  
+  return [];
 };
 
-export async function getConnectedBridgesForEntityInBebb(bebbEntityId: string, bridgingDirection = "from") : Promise<BebbBridge[]> {
+export async function getBebbBridges(bridgeIds: string[]): Promise<BebbBridge[]> {
   if (!appStore) {
-    throw new Error("Error in getConnectedBridgesForEntityInBebb: store not initialized");
+    throw new Error("Error in getBridges: store not initialized");
   };
-  const bridgeIds = await getConnectedBridgeIdsForEntityInBebb(bebbEntityId, bridgingDirection);
+
   let getBridgeRequestPromises = [];
   for (var i = 0; i < bridgeIds.length; i++) {
     if (bridgeIds[i]) { // TODO: filters like bridgesRetrieved[i].linkStatus.hasOwnProperty('CreatedOwner')
       getBridgeRequestPromises.push(appStore.protocolActor.get_bridge(bridgeIds[i])); // Send requests in parallel and then await all to speed up
-    };
+    }
   };
+
   const getBridgeResponses = await Promise.all(getBridgeRequestPromises);
   let bridges : BebbBridge[] = [];
   for (var j = 0; j < getBridgeResponses.length; j++) {
@@ -192,33 +175,77 @@ export async function getConnectedBridgesForEntityInBebb(bebbEntityId: string, b
       bridges.push(bridge);
     };
   };
+
   return bridges;
 };
 
+export async function getConnectedBridgesForEntityInBebb(bebbEntityId: string, bridgingDirection = "from"): Promise<BebbBridge[]> {
+  if (!appStore) {
+    throw new Error("Error in getConnectedBridgesForEntityInBebb: store not initialized");
+  };
+  
+  const bridgeIds = await getConnectedBridgeIdsForEntityInBebb(bebbEntityId, bridgingDirection);
+  return getBebbBridges(bridgeIds);
+};
+
+async function getBebbEntities(entityIds: string[]) : Promise<BebbEntity[]> {
+  const getEntityPromises = entityIds.map(id => appStore.protocolActor.get_entity(id));
+  const entityResponses = await Promise.all(getEntityPromises);
+
+  let entities = [];
+  for (let response of entityResponses) {
+    if (response.Err) {
+      console.error("Error retrieving connected Entity", response.Err);
+    } else {
+      const entity : BebbEntity = response.Ok;
+      entities.push(entity);
+    };
+  };
+  return entities;
+};
+
 export async function getConnectedEntitiesInBebb(bebbEntityId: string, bridgingDirection = "from") : Promise<BebbEntity[]> {
   if (!appStore) {
     throw new Error("Error in getConnectedEntitiesInBebb: store not initialized");
   };
+
   try {
     const getBridgesResponse = await getConnectedBridgesForEntityInBebb(bebbEntityId, bridgingDirection);
-    let getConnectedEntityRequestPromises = [];
-    for (var j = 0; j < getBridgesResponse.length; j++) {
-      const bridge : BebbBridge = getBridgesResponse[j];
-      getConnectedEntityRequestPromises.push(appStore.protocolActor.get_entity(bridge.toEntityId)); // Send requests in parallel and then await all to speed up
-    };
-    const getConnectedEntityResponses = await Promise.all(getConnectedEntityRequestPromises);
-    let connectedEntities = [];
-    for (var j = 0; j < getConnectedEntityResponses.length; j++) {
-      if (getConnectedEntityResponses[j].Err) {
-        console.error("Error retrieving connected Entity", getConnectedEntityResponses[j].Err);
-      } else {
-        const connectedEntity : BebbEntity = getConnectedEntityResponses[j].Ok;
-        connectedEntities.push(connectedEntity);
-      };
-    };
+    const entityIds = getBridgesResponse.map((bridge: BebbBridge) => bridgingDirection === "from" ? bridge.toEntityId : bridge.fromEntityId);
+    const connectedEntities = await getBebbEntities(entityIds);
     return connectedEntities;
   } catch (error) {
     console.error("Error Getting Connected Entities in Bebb ", error);
     return null;                
   };
 };
+
+export async function getConnectedEntitiesAndBridgesInBebb(bebbEntityId: string, bridgingDirection = "from") : Promise<BebbEntityAndBridge[]> {
+  if (!appStore) {
+    throw new Error("Error in getConnectedEntitiesInBebb: store not initialized");
+  };
+
+  try {
+    const getBridgesResponse = await getConnectedBridgesForEntityInBebb(bebbEntityId, bridgingDirection);
+    const entityIds = getBridgesResponse.map((bridge: BebbBridge) => bridgingDirection === "from" ? bridge.toEntityId : bridge.fromEntityId);
+    const connectedEntities = await getBebbEntities(entityIds);
+
+    const entitiesAndBridges: BebbEntityAndBridge[] = [];
+
+    for (let bridge of getBridgesResponse) {
+      const entityId = bridgingDirection === "from" ? bridge.toEntityId : bridge.fromEntityId;
+      const entity = connectedEntities.find(e => e.id === entityId);
+      if (entity) {
+        entitiesAndBridges.push({
+          entity: entity,
+          bridge: bridge
+        });
+      }
+    }
+
+    return entitiesAndBridges;
+  } catch (error) {
+    console.error("Error Getting Connected Entities and Bridges in Bebb ", error);
+    return null;                
+  };
+};

From 16e95acf206b7cb9975c673c88ebcb8d6fdead24 Mon Sep 17 00:00:00 2001
From: patnorris <patrick@DESKTOP-TQ4V8LQ.localdomain>
Date: Mon, 30 Oct 2023 20:03:14 +0000
Subject: [PATCH 06/18] Add initial layer 2 implementation

---
 .../assets/DownloadFileExample.html           |   2 +-
 .../assets/defaultRoom.html                   |   2 +-
 .../assets/defaultRoom_InternetIsland.html    |   2 +-
 .../assets/defaultRoom_NatureRetreat.html     |   2 +-
 .../assets/defaultRoom_Web3Cockpit.html       |   2 +-
 .../components/SpaceNeighbors.svelte          |  46 ++-
 .../components/UserSpace.svelte               |  28 +-
 .../helpers/bebb_utils.ts                     | 196 ++++++++-
 .../helpers/space_helpers.js                  |  14 +-
 .../pages/CreateSpace.svelte                  |  26 +-
 .../pages/DownloadFileExample.svelte          |   2 +-
 .../pages/Space.svelte                        |  99 ++++-
 src/integrations/BebbProtocol/bebb.did        | 384 +++++++++---------
 src/integrations/BebbProtocol/bebb.did.d.ts   | 291 ++++++-------
 src/integrations/BebbProtocol/bebb.did.js     | 346 ++++++++--------
 15 files changed, 887 insertions(+), 555 deletions(-)

diff --git a/src/PersonalWebSpace_frontend/assets/DownloadFileExample.html b/src/PersonalWebSpace_frontend/assets/DownloadFileExample.html
index a7cf5f5..db583e2 100644
--- a/src/PersonalWebSpace_frontend/assets/DownloadFileExample.html
+++ b/src/PersonalWebSpace_frontend/assets/DownloadFileExample.html
@@ -7,7 +7,7 @@
   <body>
 
 
-    <a-scene cursor="rayOrigin: mouse" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;" inspector="" keyboard-shortcuts="" screenshot="" vr-mode-ui="" device-orientation-permission-ui="" raycaster="direction: 0.9544506796854287 -0.10164039183312146 -0.2805229594810959; origin: -4.846717797159805 5.074580504821491 2.3289351396596443; useWorldCoordinates: true">
+    <a-scene cursor="rayOrigin: mouse" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;" inspector="" keyboard-shortcuts="" screenshot="width: 1920; height: 1080;" vr-mode-ui="" device-orientation-permission-ui="" raycaster="direction: 0.9544506796854287 -0.10164039183312146 -0.2805229594810959; origin: -4.846717797159805 5.074580504821491 2.3289351396596443; useWorldCoordinates: true">
       <a-assets>
         <img crossorigin="anonymous" id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
         <img crossorigin="anonymous" id="skyTexture" src="https://cdn.aframe.io/a-painter/images/sky.jpg">
diff --git a/src/PersonalWebSpace_frontend/assets/defaultRoom.html b/src/PersonalWebSpace_frontend/assets/defaultRoom.html
index a819c9a..2d66cc7 100644
--- a/src/PersonalWebSpace_frontend/assets/defaultRoom.html
+++ b/src/PersonalWebSpace_frontend/assets/defaultRoom.html
@@ -7,7 +7,7 @@
   <body>
 
 
-    <a-scene cursor="rayOrigin: mouse" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;" inspector="" keyboard-shortcuts="" screenshot="" vr-mode-ui="" device-orientation-permission-ui="" raycaster="direction: 0.9544506796854287 -0.10164039183312146 -0.2805229594810959; origin: -4.846717797159805 5.074580504821491 2.3289351396596443; useWorldCoordinates: true">
+    <a-scene cursor="rayOrigin: mouse" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;" inspector="" keyboard-shortcuts="" screenshot="width: 1920; height: 1080;" vr-mode-ui="" device-orientation-permission-ui="" raycaster="direction: 0.9544506796854287 -0.10164039183312146 -0.2805229594810959; origin: -4.846717797159805 5.074580504821491 2.3289351396596443; useWorldCoordinates: true">
       <a-assets>
         <img crossorigin="anonymous" id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
         <img crossorigin="anonymous" id="skyTexture" src="https://cdn.aframe.io/a-painter/images/sky.jpg">
diff --git a/src/PersonalWebSpace_frontend/assets/defaultRoom_InternetIsland.html b/src/PersonalWebSpace_frontend/assets/defaultRoom_InternetIsland.html
index e66a785..af0635f 100644
--- a/src/PersonalWebSpace_frontend/assets/defaultRoom_InternetIsland.html
+++ b/src/PersonalWebSpace_frontend/assets/defaultRoom_InternetIsland.html
@@ -6,7 +6,7 @@
   </head>
   <body>
 
-    <a-scene cursor="rayOrigin: mouse" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;" inspector="" keyboard-shortcuts="" screenshot="" vr-mode-ui="" device-orientation-permission-ui="" raycaster="direction: 0.9544506796854287 -0.10164039183312146 -0.2805229594810959; origin: -4.846717797159805 5.074580504821491 2.3289351396596443; useWorldCoordinates: true">
+    <a-scene cursor="rayOrigin: mouse" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;" inspector="" keyboard-shortcuts="" screenshot="width: 1920; height: 1080;" vr-mode-ui="" device-orientation-permission-ui="" raycaster="direction: 0.9544506796854287 -0.10164039183312146 -0.2805229594810959; origin: -4.846717797159805 5.074580504821491 2.3289351396596443; useWorldCoordinates: true">
       <a-assets>
         <a-asset-item id="island-glb" src="tropical_island_modified.glb"></a-asset-item> <!-- Credits: "Tropical Island" (https://skfb.ly/6THzW) by Elin is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/). -->
         <a-asset-item id="sunbed-glb" src="at_a_beach_modified.glb"></a-asset-item> <!-- Credits:"At a beach" (https://skfb.ly/6SUss) by barcin is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/). -->
diff --git a/src/PersonalWebSpace_frontend/assets/defaultRoom_NatureRetreat.html b/src/PersonalWebSpace_frontend/assets/defaultRoom_NatureRetreat.html
index 668f8e9..db37c08 100644
--- a/src/PersonalWebSpace_frontend/assets/defaultRoom_NatureRetreat.html
+++ b/src/PersonalWebSpace_frontend/assets/defaultRoom_NatureRetreat.html
@@ -6,7 +6,7 @@
   </head>
   <body>
 
-    <a-scene cursor="rayOrigin: mouse" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;" inspector="" keyboard-shortcuts="" screenshot="" vr-mode-ui="" device-orientation-permission-ui="" raycaster="direction: 0.9544506796854287 -0.10164039183312146 -0.2805229594810959; origin: -4.846717797159805 5.074580504821491 2.3289351396596443; useWorldCoordinates: true">
+    <a-scene cursor="rayOrigin: mouse" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;" inspector="" keyboard-shortcuts="" screenshot="width: 1920; height: 1080;" vr-mode-ui="" device-orientation-permission-ui="" raycaster="direction: 0.9544506796854287 -0.10164039183312146 -0.2805229594810959; origin: -4.846717797159805 5.074580504821491 2.3289351396596443; useWorldCoordinates: true">
       <a-assets>
         <a-asset-item id="ground-glb" src="ground.glb"></a-asset-item>
         <a-asset-item id="single_bed-glb" src="single_bed.glb"></a-asset-item>
diff --git a/src/PersonalWebSpace_frontend/assets/defaultRoom_Web3Cockpit.html b/src/PersonalWebSpace_frontend/assets/defaultRoom_Web3Cockpit.html
index 415615f..a611690 100644
--- a/src/PersonalWebSpace_frontend/assets/defaultRoom_Web3Cockpit.html
+++ b/src/PersonalWebSpace_frontend/assets/defaultRoom_Web3Cockpit.html
@@ -6,7 +6,7 @@
   </head>
   <body>
 
-    <a-scene cursor="rayOrigin: mouse" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;" inspector="" keyboard-shortcuts="" screenshot="" vr-mode-ui="" device-orientation-permission-ui="" raycaster="direction: 0.9544506796854287 -0.10164039183312146 -0.2805229594810959; origin: -4.846717797159805 5.074580504821491 2.3289351396596443; useWorldCoordinates: true" >
+    <a-scene cursor="rayOrigin: mouse" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;" inspector="" keyboard-shortcuts="" screenshot="width: 1920; height: 1080;" vr-mode-ui="" device-orientation-permission-ui="" raycaster="direction: 0.9544506796854287 -0.10164039183312146 -0.2805229594810959; origin: -4.846717797159805 5.074580504821491 2.3289351396596443; useWorldCoordinates: true" >
       <a-assets>
         <a-asset-item id="ground-glb" src="ground.glb"></a-asset-item>
         <a-asset-item id="spaceshuttle-glb" src="discovery_space_shuttle.glb"></a-asset-item> <!-- Credits: "Discovery Space Shuttle" (https://skfb.ly/6R6Iu) by rsatenza is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/). -->
diff --git a/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte b/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
index 9fffb08..5b1c5dc 100644
--- a/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
+++ b/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
@@ -3,15 +3,16 @@
         BebbBridge,
         BebbBridgeInitiationObject,
         BebbEntity,
-        BebbEntityAttachedBridges,
-        BebbEntityAttachedBridgesResult,
         BebbEntityInitiationObject,
+        BebbEntityPreview,
     } from "../helpers/bebb_utils";
     import {
         createBebbEntityAndBridge,
         getBebbBridgesBetweenEntities,
         deleteBebbBridgesByOwner,
         getConnectedEntitiesInBebb,
+        getBebbEntityUrlPreview,
+        getBebbEntityImagePreviewFromUrl,
     } from "../helpers/bebb_utils";
     import { onMount } from "svelte";
     import ProtocolEntity from "./ProtocolEntity.svelte";
@@ -82,22 +83,53 @@
         const spaceEntityId = extractSpaceEntityId();
         if (neighborUrlInputHandler(newNeighborUrl) && spaceEntityId) {
             // Create Neighbor connection as Bridge from Space in Bebb Protocol
-            const externalId : [string] = [newNeighborUrl];
-            const entityInitiationObject : BebbEntityInitiationObject= {
+            const spaceUrl = newNeighborUrl.replace(/\/+$/, ""); // strip any trailing slashes
+            const entitySpecificFields = {
+                externalId: spaceUrl,
+            };
+
+            const entityPreviews = [];        
+            try {
+                const urlSpacePreview : BebbEntityPreview = await getBebbEntityUrlPreview(spaceUrl);
+                entityPreviews.push(urlSpacePreview);
+            } catch (error) {
+                console.error("Error creating url preview for space: ", error);
+            };
+            try {
+                const imageSpacePreview : BebbEntityPreview = await getBebbEntityImagePreviewFromUrl(spaceUrl);
+                entityPreviews.push(imageSpacePreview);         
+            } catch (error) {
+                console.error("Error creating image preview for space: ", error);
+            };
+            
+            const entityInitiationObject : BebbEntityInitiationObject = {
                 settings: [],
                 entityType: { 'Resource' : { 'Web' : null } },
                 name: [],
                 description: [`Created as a Space Neighbor in the Open Internet Metaverse at https://${PersonalWebSpace_frontend_canister_id}${appDomain}/`] as [string],
                 keywords: [["Space Neighbor", "Open Internet Metaverse", "Virtual Neighborhood"]] as [Array<string>],
-                entitySpecificFields: externalId,
+                entitySpecificFields: [JSON.stringify(entitySpecificFields)],
+                previews: [entityPreviews],
             };
 
+            const bridgePresentationMetadata = {
+                framework: "A-Frame",
+                environment: "Open Internet Metaverse",
+                type: "Virtual Neighbor",
+                data: {
+                    width: 1.2,
+                    height: 2,
+                },
+            };
+            const bridgeSpecificFields = {
+                presentationMetadata: bridgePresentationMetadata,
+            };
             const bridgeEntityInitiationObject : BebbBridgeInitiationObject = {
                 settings: [],
                 name: [],
                 description: [`Created to connect two Spaces as Neighbors in the Open Internet Metaverse at https://${PersonalWebSpace_frontend_canister_id}${appDomain}/`] as [string],
                 keywords: [["Space Neighbors", "Open Internet Metaverse", "Virtual Neighborhood"]] as [Array<string>],
-                entitySpecificFields: [],
+                entitySpecificFields: [JSON.stringify(bridgeSpecificFields)],
                 bridgeType: { 'IsRelatedto' : null },
                 fromEntityId: spaceEntityId,
                 toEntityId: "",
@@ -193,7 +225,7 @@
         const spaceEntityId = extractSpaceEntityId();
         let retrievedNeighborEntities : BebbEntity[] = [];
         try {
-            const getConnectedEntitiesResponse = await getConnectedEntitiesInBebb(spaceEntityId);
+            const getConnectedEntitiesResponse = await getConnectedEntitiesInBebb(spaceEntityId, "from", {OwnerCreated: true});
             for (var j = 0; j < getConnectedEntitiesResponse.length; j++) {
                 const connectedEntity : BebbEntity = getConnectedEntitiesResponse[j];
                 retrievedNeighborEntities.push(connectedEntity);
diff --git a/src/PersonalWebSpace_frontend/components/UserSpace.svelte b/src/PersonalWebSpace_frontend/components/UserSpace.svelte
index 46ff203..bbf633d 100644
--- a/src/PersonalWebSpace_frontend/components/UserSpace.svelte
+++ b/src/PersonalWebSpace_frontend/components/UserSpace.svelte
@@ -50,24 +50,36 @@
     const spaceEntityId = extractSpaceEntityId();
     if (entityIdToLinkTo !== "" && spaceEntityId) {
       // Create link as Bridge from Space in Bebb Protocol
+      const bridgePresentationMetadata = {
+        framework: "A-Frame",
+        environment: "Open Internet Metaverse",
+        type: "Virtual Neighbor",
+        data: {
+          width: 1.2,
+          height: 2,
+        },
+      };
+      const entitySpecificFields = {
+        presentationMetadata: bridgePresentationMetadata,
+      };
       const bridgeEntityInitiationObject : BebbBridgeInitiationObject = {
         settings: [],
         name: [],
         description: [`Created to connect two Spaces as Neighbors in the Open Internet Metaverse at https://${PersonalWebSpace_frontend_canister_id}${appDomain}/`] as [string],
         keywords: [["Space Neighbors", "Open Internet Metaverse", "Virtual Neighborhood"]] as [Array<string>],
-        entitySpecificFields: [],
+        entitySpecificFields: [JSON.stringify(entitySpecificFields)],
         bridgeType: { 'IsRelatedto' : null },
         fromEntityId: spaceEntityId,
         toEntityId: entityIdToLinkTo,
       };
       try {
-          const createBridgeResponse = await createBebbBridge(bridgeEntityInitiationObject);
-          // @ts-ignore
-          if (createBridgeResponse) {
-            successfullyCreatedLink = true;
-          } else {
-            errorCreatingLink = true;
-          };
+        const createBridgeResponse = await createBebbBridge(bridgeEntityInitiationObject);
+        // @ts-ignore
+        if (createBridgeResponse) {
+          successfullyCreatedLink = true;
+        } else {
+          errorCreatingLink = true;
+        };
       } catch(err) {
         console.error("Link Space err", err);
         errorCreatingLink = true;
diff --git a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
index c7392e7..1c76a8f 100644
--- a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
+++ b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
@@ -1,3 +1,4 @@
+import html2canvas from "html2canvas";
 import { store } from "../store";
 
 import type {
@@ -8,6 +9,8 @@ import type {
   EntityAttachedBridge,
   Bridge,
   Entity,
+  EntityPreview,
+  EntityFilterCriterion,
 } from "src/integrations/BebbProtocol/bebb.did";
 
 export type BebbEntity = Entity;
@@ -18,6 +21,8 @@ export type BebbEntityAttachedBridges = EntityAttachedBridges;
 export type BebbEntityAttachedBridge = EntityAttachedBridge;
 export type BebbBridge = Bridge;
 export type BebbEntityAndBridge = { entity: BebbEntity, bridge: BebbBridge };
+export type BebbEntityPreview = EntityPreview;
+export type BebbEntityFilterCriterion = EntityFilterCriterion;
 
 let appStore;
 store.subscribe((value) => appStore = value);
@@ -48,11 +53,36 @@ export async function createBebbBridge(bridgeEntityInitiationObject: BebbBridgeI
   };
 };
 
+export async function createBebbEntityIfNonExistent(entityInitiationObject: BebbEntityInitiationObject) {
+  if (!appStore) {
+    throw new Error("Error in createBebbEntityIfNonExistent: store not initialized");
+  };
+  
+  // Check that Entity doesn't already exist in Bebb
+  const entitySpecificFields = JSON.parse(entityInitiationObject.entitySpecificFields[0]);
+  const filterCriteria: BebbEntityFilterCriterion[] = [{
+    criterionKey: "externalId",
+    criterionValue: entitySpecificFields.externalId,
+  }];
+  
+  const matchResult = await appStore.protocolActor.match_entities(filterCriteria);
+
+  // Check if any Entities matched the filter criteria
+  if (matchResult && matchResult.Ok && matchResult.Ok.length > 0) {
+    // Assuming the first matched Entity is the correct one (and there are no duplicates)
+    return matchResult.Ok[0].id;  // Return the id of the existing Entity
+  };
+
+  // Entity does not exist, so create it
+  return createBebbEntity(entityInitiationObject); 
+}
+
+
 export async function createBebbEntityAndBridge(entityInitiationObject: BebbEntityInitiationObject, bridgeEntityInitiationObject: BebbBridgeInitiationObject) {
   if (!appStore) {
     throw new Error("Error in createBebbEntityAndBridge: store not initialized");
   };
-  const createEntityResponse = await createBebbEntity(entityInitiationObject);
+  const createEntityResponse = await createBebbEntityIfNonExistent(entityInitiationObject);
   // @ts-ignore
   if (createEntityResponse) {
     // @ts-ignore
@@ -123,13 +153,16 @@ export async function deleteBebbBridgesByOwner(bebbBridges: BebbBridge[], ownerI
   return true;
 };
 
-function extractBridgeIds(bridgesRetrieved: BebbEntityAttachedBridges): string[] {
-  return bridgesRetrieved
-    .filter(bridge => bridge && bridge.id)
-    .map(bridge => bridge.id);
+function extractBridgeIds(bridgesRetrieved: BebbEntityAttachedBridges, filters = {}): string[] {
+  var filteredBridges = bridgesRetrieved.filter(bridge => bridge && bridge.id);
+  // @ts-ignore
+  if (filters && filters.OwnerCreated) {
+    filteredBridges = filteredBridges.filter((attachedBridge: BebbEntityAttachedBridge) => attachedBridge.linkStatus.hasOwnProperty('CreatedOwner'));
+  };
+  return filteredBridges.map(bridge => bridge.id);    
 };
 
-export async function getConnectedBridgeIdsForEntityInBebb(bebbEntityId: string, bridgingDirection = "from"): Promise<string[]> {
+export async function getConnectedBridgeIdsForEntityInBebb(bebbEntityId: string, bridgingDirection = "from", filters = {}): Promise<string[]> {
   if (!appStore) {
     throw new Error("Error in getConnectedBridgeIdsForEntityInBebb: store not initialized");
   };
@@ -144,7 +177,7 @@ export async function getConnectedBridgeIdsForEntityInBebb(bebbEntityId: string,
     };
 
     if (bridgeIdsResponse && bridgeIdsResponse.Ok && bridgeIdsResponse.Ok.length > 0) {
-      return extractBridgeIds(bridgeIdsResponse.Ok);
+      return extractBridgeIds(bridgeIdsResponse.Ok, filters);
     };    
   } catch (error) {
     console.error("Error in getConnectedBridgeIdsForEntityInBebb ", error);
@@ -162,7 +195,7 @@ export async function getBebbBridges(bridgeIds: string[]): Promise<BebbBridge[]>
   for (var i = 0; i < bridgeIds.length; i++) {
     if (bridgeIds[i]) { // TODO: filters like bridgesRetrieved[i].linkStatus.hasOwnProperty('CreatedOwner')
       getBridgeRequestPromises.push(appStore.protocolActor.get_bridge(bridgeIds[i])); // Send requests in parallel and then await all to speed up
-    }
+    };
   };
 
   const getBridgeResponses = await Promise.all(getBridgeRequestPromises);
@@ -179,12 +212,12 @@ export async function getBebbBridges(bridgeIds: string[]): Promise<BebbBridge[]>
   return bridges;
 };
 
-export async function getConnectedBridgesForEntityInBebb(bebbEntityId: string, bridgingDirection = "from"): Promise<BebbBridge[]> {
+export async function getConnectedBridgesForEntityInBebb(bebbEntityId: string, bridgingDirection = "from", filters = {}): Promise<BebbBridge[]> {
   if (!appStore) {
     throw new Error("Error in getConnectedBridgesForEntityInBebb: store not initialized");
   };
   
-  const bridgeIds = await getConnectedBridgeIdsForEntityInBebb(bebbEntityId, bridgingDirection);
+  const bridgeIds = await getConnectedBridgeIdsForEntityInBebb(bebbEntityId, bridgingDirection, filters);
   return getBebbBridges(bridgeIds);
 };
 
@@ -204,13 +237,13 @@ async function getBebbEntities(entityIds: string[]) : Promise<BebbEntity[]> {
   return entities;
 };
 
-export async function getConnectedEntitiesInBebb(bebbEntityId: string, bridgingDirection = "from") : Promise<BebbEntity[]> {
+export async function getConnectedEntitiesInBebb(bebbEntityId: string, bridgingDirection = "from", filters = {}) : Promise<BebbEntity[]> {
   if (!appStore) {
     throw new Error("Error in getConnectedEntitiesInBebb: store not initialized");
   };
 
   try {
-    const getBridgesResponse = await getConnectedBridgesForEntityInBebb(bebbEntityId, bridgingDirection);
+    const getBridgesResponse = await getConnectedBridgesForEntityInBebb(bebbEntityId, bridgingDirection, filters);
     const entityIds = getBridgesResponse.map((bridge: BebbBridge) => bridgingDirection === "from" ? bridge.toEntityId : bridge.fromEntityId);
     const connectedEntities = await getBebbEntities(entityIds);
     return connectedEntities;
@@ -220,13 +253,13 @@ export async function getConnectedEntitiesInBebb(bebbEntityId: string, bridgingD
   };
 };
 
-export async function getConnectedEntitiesAndBridgesInBebb(bebbEntityId: string, bridgingDirection = "from") : Promise<BebbEntityAndBridge[]> {
+export async function getConnectedEntitiesAndBridgesInBebb(bebbEntityId: string, bridgingDirection = "from", filters = {}) : Promise<BebbEntityAndBridge[]> {
   if (!appStore) {
-    throw new Error("Error in getConnectedEntitiesInBebb: store not initialized");
+    throw new Error("Error in getConnectedEntitiesAndBridgesInBebb: store not initialized");
   };
 
   try {
-    const getBridgesResponse = await getConnectedBridgesForEntityInBebb(bebbEntityId, bridgingDirection);
+    const getBridgesResponse = await getConnectedBridgesForEntityInBebb(bebbEntityId, bridgingDirection, filters);
     const entityIds = getBridgesResponse.map((bridge: BebbBridge) => bridgingDirection === "from" ? bridge.toEntityId : bridge.fromEntityId);
     const connectedEntities = await getBebbEntities(entityIds);
 
@@ -249,3 +282,136 @@ export async function getConnectedEntitiesAndBridgesInBebb(bebbEntityId: string,
     return null;                
   };
 };
+
+export async function getBebbEntityUrlPreview(url: string) : Promise<BebbEntityPreview> {
+  var enc = new TextEncoder(); // always utf-8
+  const urlSpacePreview : BebbEntityPreview = {
+    'previewData': enc.encode(url),
+    'previewType': { 'Other' : "URL" },
+  };
+  return urlSpacePreview;
+};
+
+async function captureAFrameScene(spaceHtml) {
+  return new Promise(async (resolve, reject) => {
+    // 1. Insert spaceHtml into the DOM
+    const container = document.createElement('div');
+    container.style.position = 'fixed';
+    container.style.top = '-10000px'; // Offscreen
+    container.innerHTML = spaceHtml;
+    document.body.appendChild(container);
+
+    const sceneEl = container.querySelector('a-scene');
+
+    // Ensure A-Frame scene has loaded
+    // @ts-ignore
+    if (!sceneEl.hasLoaded) {
+      await new Promise(resolve => sceneEl.addEventListener('loaded', resolve));
+    };
+
+    // 2. & 3. Capture the screenshot
+    sceneEl.addEventListener('screenshotready', function(evt) {
+      // @ts-ignore
+      const dataURI = evt.detail;
+      
+      // 4. Convert data URI to Uint8Array
+      const byteString = atob(dataURI.split(',')[1]);
+      const arrayBuffer = new ArrayBuffer(byteString.length);
+      const intArray = new Uint8Array(arrayBuffer);
+      for (let i = 0; i < byteString.length; i++) {
+        intArray[i] = byteString.charCodeAt(i);
+      };
+
+      // Clean up and resolve the promise
+      document.body.removeChild(container);
+      resolve(intArray);
+    });
+    // @ts-ignore
+    sceneEl.components.screenshot.capture('perspective');
+  });
+};
+
+export async function getBebbEntityImagePreviewFromAframeHtml(sceneHtml: string) : Promise<BebbEntityPreview> {
+  // @ts-ignore
+  const imageData : Uint8Array  = await captureAFrameScene(sceneHtml);
+  const imageSpacePreview : BebbEntityPreview = {
+    'previewData': imageData,
+    'previewType': { 'Jpg' : null },
+  };
+  return imageSpacePreview;
+};
+
+async function captureImageOfAFrameSceneFromUrl(url: string) : Promise<Uint8Array> {
+  return new Promise(async (resolve, reject) => {
+    let iframe = document.createElement('iframe');
+    iframe.src = url;
+    iframe.style.display = "none";
+    document.body.appendChild(iframe);
+
+    iframe.onload = async () => {
+      try {
+        // @ts-ignore
+        let canvas = iframe.contentDocument.querySelector('a-scene').components.screenshot.getCanvas('perspective');
+        // @ts-ignore
+        let blob : Blob = await canvasToBlob(canvas);
+        let arrayBuffer = await blob.arrayBuffer();
+        document.body.removeChild(iframe);
+        resolve(new Uint8Array(arrayBuffer));
+      } catch (err) {
+        console.error("Error capturing image from A-Frame scene: " + err);
+        reject("Error capturing image from A-Frame scene: " + err);
+      };
+    };
+  });
+};
+
+function canvasToBlob(canvas) {
+  return new Promise((resolve) => {
+    canvas.toBlob(resolve);
+  });
+};
+
+async function captureImageOfWebsiteFromUrl(url: string) : Promise<Uint8Array> {
+  return new Promise(async (resolve, reject) => {
+    let iframe = document.createElement('iframe');
+    iframe.src = url;
+    iframe.style.display = "none";
+    document.body.appendChild(iframe);
+
+    iframe.onload = async () => {
+      try {
+        const canvas = await html2canvas(iframe.contentDocument.body);
+        // @ts-ignore
+        let blob : Blob = await canvasToBlob(canvas);
+        let arrayBuffer = await blob.arrayBuffer();
+        document.body.removeChild(iframe);
+        resolve(new Uint8Array(arrayBuffer));
+      } catch (err) {
+        console.error("Error capturing image from website: " + err);
+        reject("Error capturing image from website: " + err);
+      };
+    };
+  });
+};
+
+export async function getBebbEntityImagePreviewFromUrl(url: string) : Promise<BebbEntityPreview> {
+  if (url.includes("/#/space/")) {
+    // OIM Space URL, i.e. A-Frame scene
+    // @ts-ignore
+    const imageData : Uint8Array  = await captureImageOfAFrameSceneFromUrl(url);
+    const imageSpacePreview : BebbEntityPreview = {
+      'previewData': imageData,
+      'previewType': { 'Jpg' : null },
+    };
+    return imageSpacePreview;
+  } else {
+    // External URL
+    // @ts-ignore
+    const imageData : Uint8Array  = await captureImageOfWebsiteFromUrl(url);
+    const imageSpacePreview : BebbEntityPreview = {
+      'previewData': imageData,
+      'previewType': { 'Jpg' : null },
+    };
+    return imageSpacePreview;
+  };
+};
diff --git a/src/PersonalWebSpace_frontend/helpers/space_helpers.js b/src/PersonalWebSpace_frontend/helpers/space_helpers.js
index d55b29d..c923037 100644
--- a/src/PersonalWebSpace_frontend/helpers/space_helpers.js
+++ b/src/PersonalWebSpace_frontend/helpers/space_helpers.js
@@ -71,7 +71,7 @@ export const getStringForSpaceWithEnvironment = (envToPreview) => {
       <script src="https://unpkg.com/aframe-environment-component@1.3.3/dist/aframe-environment-component.min.js"></script>
     </head>
     <body>
-      <a-scene cursor="rayOrigin: mouse" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;">
+      <a-scene cursor="rayOrigin: mouse" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;" screenshot="width: 1920; height: 1080;">
         <a-entity camera="active: true" look-controls wasd-controls="acceleration:65; fly:true" position="0 1.6 0"></a-entity>
         
         <a-light type="directional" intensity="0.9" position="-1 -2  2"></a-light>
@@ -89,7 +89,7 @@ export const getStringForSpaceFromModel = (modelUrl) => {
       <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
     </head>
     <body>
-      <a-scene cursor="rayOrigin: mouse" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;">
+      <a-scene cursor="rayOrigin: mouse" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;" screenshot="width: 1920; height: 1080;">
         <a-assets>
           <img crossorigin="anonymous" id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
           <img crossorigin="anonymous" id="skyTexture" src="https://cdn.aframe.io/a-painter/images/sky.jpg">
@@ -115,7 +115,7 @@ export const getStringForSpaceFromUserUploadedModel = () => {
       <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
     </head>
     <body>
-      <a-scene id="aSceneForModelPreview" cursor="rayOrigin: mouse" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;">
+      <a-scene id="aSceneForModelPreview" cursor="rayOrigin: mouse" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;" screenshot="width: 1920; height: 1080;">
         <a-assets>
           <img crossorigin="anonymous" id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
           <img crossorigin="anonymous" id="skyTexture" src="https://cdn.aframe.io/a-painter/images/sky.jpg">
@@ -139,7 +139,7 @@ export const getStringForSpaceFromVideoFile = (videoUrl) => {
       <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
     </head>
     <body>
-      <a-scene cursor="rayOrigin: mouse" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;">
+      <a-scene cursor="rayOrigin: mouse" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;" screenshot="width: 1920; height: 1080;">
         <a-assets>
           <img crossorigin="anonymous" id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
           <img crossorigin="anonymous" id="skyTexture" src="https://cdn.aframe.io/a-painter/images/sky.jpg">
@@ -166,7 +166,7 @@ export const getStringForSpaceFrom360VideoFile = (videoUrl) => {
       <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
     </head>
     <body>
-      <a-scene cursor="rayOrigin: mouse" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;">
+      <a-scene cursor="rayOrigin: mouse" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;" screenshot="width: 1920; height: 1080;">
         <a-assets>
           <video id="360videoToPreview" autoplay loop="true" src="${videoUrl}"></video>
         </a-assets>
@@ -188,7 +188,7 @@ export const getStringForSpaceFromImageFile = (imageUrl) => {
       <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
     </head>
     <body>
-      <a-scene cursor="rayOrigin: mouse" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;">
+      <a-scene cursor="rayOrigin: mouse" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;" screenshot="width: 1920; height: 1080;">
         <a-assets>
           <img crossorigin="anonymous" id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
           <img crossorigin="anonymous" id="skyTexture" src="https://cdn.aframe.io/a-painter/images/sky.jpg">
@@ -215,7 +215,7 @@ export const getStringForSpaceFrom360ImageFile = (imageUrl) => {
       <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
     </head>
     <body>
-      <a-scene cursor="rayOrigin: mouse" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;">
+      <a-scene cursor="rayOrigin: mouse" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;" screenshot="width: 1920; height: 1080;">
         <a-assets>
           <img crossorigin="anonymous" id="skyTexture" src="${imageUrl}">
         </a-assets>
diff --git a/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte b/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
index 6d98f28..e4a4e4a 100644
--- a/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
+++ b/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
@@ -13,9 +13,12 @@
   import { canisterId as PersonalWebSpace_frontend_canister_id } from "canisters/PersonalWebSpace_frontend";
   import type {
     BebbEntityInitiationObject,
+    BebbEntityPreview,
   } from "../helpers/bebb_utils";
   import {
     createBebbEntity,
+    getBebbEntityUrlPreview,
+    getBebbEntityImagePreviewFromAframeHtml,
   } from "../helpers/bebb_utils";
 
   let webHostedGlbModelUrl : string = "";
@@ -163,14 +166,33 @@
         const spaceId = spaceResponse.Ok.id;
         setSpaceWasCreated();
         // Protocol integration: create Space as Entity in Protocol
-        const externalId = `https://${PersonalWebSpace_frontend_canister_id}${appDomain}/#/space/${spaceId}`;
+        const spaceUrl = `https://${PersonalWebSpace_frontend_canister_id}${appDomain}/#/space/${spaceId}`;
+        const entitySpecificFields = {
+          externalId: spaceUrl,
+        };
+
+        const entityPreviews = [];        
+        try {
+          const urlSpacePreview : BebbEntityPreview = await getBebbEntityUrlPreview(spaceUrl);
+          entityPreviews.push(urlSpacePreview);
+        } catch (error) {
+          console.error("Error creating url preview for space: ", error);
+        };
+        try {
+          const imageSpacePreview : BebbEntityPreview = await getBebbEntityImagePreviewFromAframeHtml(spaceHtml);
+          entityPreviews.push(imageSpacePreview);         
+        } catch (error) {
+          console.error("Error creating image preview for space: ", error);
+        };
+        
         let entityInitiationObject : BebbEntityInitiationObject = {
           settings: [],
           entityType: { 'Resource' : { 'Web' : null } },
           name: ["Personal Web Space"],
           description: ["Flaming Hot Personal Web Space"],
           keywords: [["NFT", "Space", "Open Internet Metaverse", "heeyah"]] as [Array<string>],
-          entitySpecificFields: [externalId],
+          entitySpecificFields: [JSON.stringify(entitySpecificFields)],
+          previews: [entityPreviews],
         };
         const spaceEntityIdResponse = await createBebbEntity(entityInitiationObject);
         // @ts-ignore
diff --git a/src/PersonalWebSpace_frontend/pages/DownloadFileExample.svelte b/src/PersonalWebSpace_frontend/pages/DownloadFileExample.svelte
index 4996555..d9b806e 100644
--- a/src/PersonalWebSpace_frontend/pages/DownloadFileExample.svelte
+++ b/src/PersonalWebSpace_frontend/pages/DownloadFileExample.svelte
@@ -43,7 +43,7 @@
   onMount(addAFrameTestRoom);
 </script>
 
-<a-scene cursor="rayOrigin: mouse" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;" inspector="" keyboard-shortcuts="" screenshot="" vr-mode-ui="" device-orientation-permission-ui="" raycaster="direction: 0.9544506796854287 -0.10164039183312146 -0.2805229594810959; origin: -4.846717797159805 5.074580504821491 2.3289351396596443; useWorldCoordinates: true">
+<a-scene cursor="rayOrigin: mouse" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;" inspector="" keyboard-shortcuts="" screenshot="width: 1920; height: 1080;" vr-mode-ui="" device-orientation-permission-ui="" raycaster="direction: 0.9544506796854287 -0.10164039183312146 -0.2805229594810959; origin: -4.846717797159805 5.074580504821491 2.3289351396596443; useWorldCoordinates: true">
   <a-assets>
     <img crossorigin="anonymous" id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
     <img crossorigin="anonymous" id="skyTexture" src="https://cdn.aframe.io/a-painter/images/sky.jpg">
diff --git a/src/PersonalWebSpace_frontend/pages/Space.svelte b/src/PersonalWebSpace_frontend/pages/Space.svelte
index 83d93de..c689c15 100644
--- a/src/PersonalWebSpace_frontend/pages/Space.svelte
+++ b/src/PersonalWebSpace_frontend/pages/Space.svelte
@@ -27,9 +27,10 @@
   import { canisterId as backendCanisterId } from "canisters/PersonalWebSpace_backend";
   import type {
     BebbEntity,
+    BebbEntityAndBridge,
   } from "../helpers/bebb_utils";
   import {
-    getConnectedEntitiesInBebb,
+    getConnectedEntitiesAndBridgesInBebb,
   } from "../helpers/bebb_utils";
   
 
@@ -1300,7 +1301,7 @@
     };
   };
 
-  const entityHasValidUrl = (entity: Entity) => {
+  const entityHasValidUrl = (entity: BebbEntity) => {
     return isValidUrl(entity.entitySpecificFields);
   };
 
@@ -1334,22 +1335,84 @@
     };
   };
 
-  function loadNeighborsIn3D(spaceNeighbors: Entity[]) {
+  function loadNeighborsIn3D(spaceNeighbors: BebbEntityAndBridge[]) {
     // Create a new entity for each neighbor
     let neighborIndex = 0;
     for (const neighbor of spaceNeighbors) {
-      // Only display neighbors that have a valid URL
-      if (entityHasValidUrl(neighbor)) {
-        // Create a new entity for the neighbor
-        let neighborEntity = document.createElement('a-entity');
-        // Set properties on the new neighbor entity
-        neighborEntity.setAttribute('id', `OIM-VR-neighbor-${neighbor.id}`);
-        neighborEntity.setAttribute('web-portal', `url:${neighbor.entitySpecificFields}; text:${neighbor.name[0] || "Neighbor " + neighborIndex};`);
-        neighborEntity.setAttribute('position', `${-5 - neighborIndex*3} 1.25 -10`); // Position all Neighbors along one line
-        // Add the neighbor entity to the scene
-        let scene = document.querySelector('a-scene');
-        scene.appendChild(neighborEntity);
-        neighborIndex++;
+      var hasAdditionalPresentationMetadata = false;
+      var additionalPresentationMetadata;
+      if (neighbor.bridge.entitySpecificFields) {
+        try {
+          const entitySpecificFields = JSON.parse(neighbor.bridge.entitySpecificFields);
+          if (entitySpecificFields.presentationMetadata) {
+            additionalPresentationMetadata = entitySpecificFields.presentationMetadata;
+            hasAdditionalPresentationMetadata = true;
+          };
+        } catch(error) {
+          hasAdditionalPresentationMetadata = false;
+        };
+      };
+      if (hasAdditionalPresentationMetadata) {
+        var neighborUrl;
+        try {
+          if (neighbor.entity.previews && neighbor.entity.previews[0]) {
+            var urlPreview;
+            for (const preview of neighbor.entity.previews) {
+              // @ts-ignore
+              if (preview.previewType.hasOwnProperty('Other') && preview.previewType.Other === "URL") {
+                var enc = new TextDecoder("utf-8");
+                const url = enc.decode(preview.previewData);
+                if (isValidUrl(url)) {
+                  neighborUrl = url;
+                  urlPreview = preview;
+                };
+              };
+            };
+          } else {
+            if (neighbor.entity.entitySpecificFields) {
+              const entitySpecificFields = JSON.parse(neighbor.entity.entitySpecificFields);
+              if (entitySpecificFields.externalId && isValidUrl(entitySpecificFields.externalId)) {
+                neighborUrl = entitySpecificFields.externalId;
+              };
+            };
+          };
+        } catch(error) {
+          console.error("Neighbor doesn't have a valid url ", error);
+        };
+        if (neighborUrl) {
+          // Create a new entity for the neighbor
+          let neighborEntity = document.createElement('a-entity');
+          // Set properties on the new neighbor entity
+          neighborEntity.setAttribute('id', `OIM-VR-neighbor-${neighbor.entity.id}`);
+          if (additionalPresentationMetadata && additionalPresentationMetadata.data && additionalPresentationMetadata.data.width && additionalPresentationMetadata.data.height) {
+            neighborEntity.setAttribute('web-portal', `url:${neighborUrl}; text:${neighbor.entity.name[0] || "Neighbor " + neighborIndex}; width:${additionalPresentationMetadata.data.width}; height:${additionalPresentationMetadata.data.height}`);
+          } else {
+            neighborEntity.setAttribute('web-portal', `url:${neighborUrl}; text:${neighbor.entity.name[0] || "Neighbor " + neighborIndex};`);
+          };
+          if (additionalPresentationMetadata && additionalPresentationMetadata.data && additionalPresentationMetadata.data.position) {
+            neighborEntity.setAttribute('position', additionalPresentationMetadata.data.position);
+          } else {
+            neighborEntity.setAttribute('position', `${-5 - neighborIndex*3} 1.25 -10`); // Position all Neighbors along one line
+          };
+          // Add the neighbor entity to the scene
+          let scene = document.querySelector('a-scene');
+          scene.appendChild(neighborEntity);
+          neighborIndex++;
+        };
+      } else { // no additional presentation metadata
+        // Only display neighbors that have a valid URL
+        if (entityHasValidUrl(neighbor.entity)) {
+          // Create a new entity for the neighbor
+          let neighborEntity = document.createElement('a-entity');
+          // Set properties on the new neighbor entity
+          neighborEntity.setAttribute('id', `OIM-VR-neighbor-${neighbor.entity.id}`);
+          neighborEntity.setAttribute('web-portal', `url:${neighbor.entity.entitySpecificFields}; text:${neighbor.entity.name[0] || "Neighbor " + neighborIndex};`);
+          neighborEntity.setAttribute('position', `${-5 - neighborIndex*3} 1.25 -10`); // Position all Neighbors along one line
+          // Add the neighbor entity to the scene
+          let scene = document.querySelector('a-scene');
+          scene.appendChild(neighborEntity);
+          neighborIndex++;
+        };
       };
     };    
   };
@@ -1357,11 +1420,11 @@
   const loadSpaceNeighborsIn3D = async () => {
     // Load the Space's Neighbors from Bebb Protocol and display them in 3D in the scene
     const spaceEntityId = extractSpaceEntityId();
-    let retrievedNeighborEntities : BebbEntity[] = [];
+    let retrievedNeighborEntities : BebbEntityAndBridge[] = [];
     try {
-      const getConnectedEntitiesResponse = await getConnectedEntitiesInBebb(spaceEntityId);
+      const getConnectedEntitiesResponse = await getConnectedEntitiesAndBridgesInBebb(spaceEntityId, "from", {OwnerCreated: true});
       for (var j = 0; j < getConnectedEntitiesResponse.length; j++) {
-        const connectedEntity : BebbEntity = getConnectedEntitiesResponse[j];
+        const connectedEntity : BebbEntityAndBridge = getConnectedEntitiesResponse[j];
         retrievedNeighborEntities.push(connectedEntity);
       };
     } catch(err) {
diff --git a/src/integrations/BebbProtocol/bebb.did b/src/integrations/BebbProtocol/bebb.did
index 9f32987..bff4fb8 100644
--- a/src/integrations/BebbProtocol/bebb.did
+++ b/src/integrations/BebbProtocol/bebb.did
@@ -1,186 +1,198 @@
-type Time = int;
-type EntityUpdateObject = 
- record {
-   description: opt text;
-   id: text;
-   keywords: opt vec text;
-   name: opt text;
-   previews: opt vec EntityPreview;
-   settings: opt EntitySettings;
- };
-type EntityTypeResourceTypes = 
- variant {
-   Content;
-   DigitalAsset;
-   Web;
- };
-type EntityType = 
- variant {
-   Other: text;
-   Resource: EntityTypeResourceTypes;
- };
-type EntitySettings = record {};
-type EntityResult = 
- variant {
-   Err: EntityErrors;
-   Ok: Entity;
- };
-type EntityPreviewSupportedTypes = 
- variant {
-   Glb;
-   Gltf;
-   Jpg;
-   Other: text;
-   Png;
- };
-type EntityPreview = 
- record {
-   previewData: blob;
-   previewType: EntityPreviewSupportedTypes;
- };
-type EntityInitiationObject = 
- record {
-   description: opt text;
-   entitySpecificFields: opt text;
-   entityType: EntityType;
-   keywords: opt vec text;
-   name: opt text;
-   settings: opt EntitySettings;
- };
-type EntityIdResult = 
- variant {
-   Err: EntityIdErrors;
-   Ok: text;
- };
-type EntityIdErrors = 
- variant {
-   EntityNotFound;
-   Error;
-   PreviewTooLarge: int;
-   TooManyPreviews;
-   Unauthorized;
- };
-type EntityErrors = 
- variant {
-   EntityNotFound;
-   Error;
-   Unauthorized: text;
- };
-type EntityAttachedBridgesResult = 
- variant {
-   Err: EntityAttachedBridgesErrors;
-   Ok: EntityAttachedBridges;
- };
-type EntityAttachedBridgesErrors = 
- variant {
-   EntityNotFound;
-   Error;
- };
-type EntityAttachedBridges = vec EntityAttachedBridge;
-type EntityAttachedBridge = 
- record {
-   bridgeType: BridgeType;
-   creationTime: Time;
-   id: text;
-   linkStatus: BridgeLinkStatus;
- };
-type Entity = 
- record {
-   creationTimestamp: nat64;
-   creator: principal;
-   description: text;
-   entitySpecificFields: text;
-   entityType: EntityType;
-   fromIds: EntityAttachedBridges;
-   id: text;
-   keywords: vec text;
-   listOfEntitySpecificFieldKeys: vec text;
-   name: text;
-   owner: principal;
-   previews: vec EntityPreview;
-   settings: EntitySettings;
-   toIds: EntityAttachedBridges;
- };
-type BridgeUpdateObject = 
- record {
-   description: opt text;
-   id: text;
-   keywords: opt vec text;
-   name: opt text;
-   settings: opt BridgeSettings;
- };
-type BridgeType = 
- variant {
-   IsAttachedto;
-   IsPartOf;
-   IsRelatedto;
- };
-type BridgeSettings = record {};
-type BridgeResult = 
- variant {
-   Err: BridgeErrors;
-   Ok: Bridge;
- };
-type BridgeLinkStatus = 
- variant {
-   CreatedOther;
-   CreatedOwner;
- };
-type BridgeInitiationObject = 
- record {
-   bridgeType: BridgeType;
-   description: opt text;
-   entitySpecificFields: opt text;
-   fromEntityId: text;
-   keywords: opt vec text;
-   name: opt text;
-   settings: opt BridgeSettings;
-   toEntityId: text;
- };
-type BridgeIdResult = 
- variant {
-   Err: BridgeIdErrors;
-   Ok: text;
- };
-type BridgeIdErrors = 
- variant {
-   BridgeNotFound;
-   Error;
-   Unauthorized;
- };
-type BridgeErrors = 
- variant {
-   BridgeNotFound;
-   Error;
-   Unauthorized: text;
- };
-type Bridge = 
- record {
-   bridgeType: BridgeType;
-   creationTimestamp: nat64;
-   creator: principal;
-   description: text;
-   entitySpecificFields: text;
-   fromEntityId: text;
-   id: text;
-   keywords: vec text;
-   listOfEntitySpecificFieldKeys: vec text;
-   name: text;
-   owner: principal;
-   settings: BridgeSettings;
-   toEntityId: text;
- };
-service : {
-  create_bridge: (BridgeInitiationObject) -> (BridgeIdResult);
-  create_entity: (EntityInitiationObject) -> (EntityIdResult);
-  delete_bridge: (text) -> (BridgeIdResult);
-  delete_entity: (text) -> (EntityIdResult);
-  get_bridge: (text) -> (BridgeResult) query;
-  get_entity: (text) -> (EntityResult) query;
-  get_from_bridge_ids_by_entity_id: (text) ->
-   (EntityAttachedBridgesResult) query;
-  get_to_bridge_ids_by_entity_id: (text) ->
-   (EntityAttachedBridgesResult) query;
-  update_bridge: (BridgeUpdateObject) -> (BridgeIdResult);
-  update_entity: (EntityUpdateObject) -> (EntityIdResult);
-}
+type Time = int;
+type EntityUpdateObject = 
+ record {
+   description: opt text;
+   id: text;
+   keywords: opt vec text;
+   name: opt text;
+   previews: opt vec EntityPreview;
+   settings: opt EntitySettings;
+ };
+type EntityTypeResourceTypes = 
+ variant {
+   Content;
+   DigitalAsset;
+   Web;
+ };
+type EntityType = 
+ variant {
+   Other: text;
+   Resource: EntityTypeResourceTypes;
+ };
+type EntitySettings = record {};
+type EntityResult = 
+ variant {
+   Err: EntityErrors;
+   Ok: Entity;
+ };
+type EntityPreviewSupportedTypes = 
+ variant {
+   Glb;
+   Gltf;
+   Jpg;
+   Other: text;
+   Png;
+ };
+type EntityPreview = 
+ record {
+   previewData: blob;
+   previewType: EntityPreviewSupportedTypes;
+ };
+type EntityInitiationObject = 
+ record {
+   description: opt text;
+   entitySpecificFields: opt text;
+   entityType: EntityType;
+   keywords: opt vec text;
+   name: opt text;
+   previews: opt vec EntityPreview;
+   settings: opt EntitySettings;
+ };
+type EntityIdResult = 
+ variant {
+   Err: EntityIdErrors;
+   Ok: text;
+ };
+type EntityIdErrors = 
+ variant {
+   EntityNotFound;
+   Error;
+   PreviewTooLarge: int;
+   TooManyPreviews;
+   Unauthorized;
+ };
+type EntityFilterCriterion = 
+ record {
+   criterionKey: text;
+   criterionValue: text;
+ };
+type EntityErrors = 
+ variant {
+   EntityNotFound;
+   Error;
+   Unauthorized: text;
+ };
+type EntityAttachedBridgesResult = 
+ variant {
+   Err: EntityAttachedBridgesErrors;
+   Ok: EntityAttachedBridges;
+ };
+type EntityAttachedBridgesErrors = 
+ variant {
+   EntityNotFound;
+   Error;
+ };
+type EntityAttachedBridges = vec EntityAttachedBridge;
+type EntityAttachedBridge = 
+ record {
+   bridgeType: BridgeType;
+   creationTime: Time;
+   id: text;
+   linkStatus: BridgeLinkStatus;
+ };
+type Entity = 
+ record {
+   creationTimestamp: nat64;
+   creator: principal;
+   description: text;
+   entitySpecificFields: text;
+   entityType: EntityType;
+   fromIds: EntityAttachedBridges;
+   id: text;
+   keywords: vec text;
+   listOfEntitySpecificFieldKeys: vec text;
+   name: text;
+   owner: principal;
+   previews: vec EntityPreview;
+   settings: EntitySettings;
+   toIds: EntityAttachedBridges;
+ };
+type EntitiesResult = 
+ variant {
+   Err: EntityErrors;
+   Ok: vec Entity;
+ };
+type BridgeUpdateObject = 
+ record {
+   description: opt text;
+   id: text;
+   keywords: opt vec text;
+   name: opt text;
+   settings: opt BridgeSettings;
+ };
+type BridgeType = 
+ variant {
+   IsAttachedto;
+   IsPartOf;
+   IsRelatedto;
+ };
+type BridgeSettings = record {};
+type BridgeResult = 
+ variant {
+   Err: BridgeErrors;
+   Ok: Bridge;
+ };
+type BridgeLinkStatus = 
+ variant {
+   CreatedOther;
+   CreatedOwner;
+ };
+type BridgeInitiationObject = 
+ record {
+   bridgeType: BridgeType;
+   description: opt text;
+   entitySpecificFields: opt text;
+   fromEntityId: text;
+   keywords: opt vec text;
+   name: opt text;
+   settings: opt BridgeSettings;
+   toEntityId: text;
+ };
+type BridgeIdResult = 
+ variant {
+   Err: BridgeIdErrors;
+   Ok: text;
+ };
+type BridgeIdErrors = 
+ variant {
+   BridgeNotFound;
+   Error;
+   Unauthorized;
+ };
+type BridgeErrors = 
+ variant {
+   BridgeNotFound;
+   Error;
+   Unauthorized: text;
+ };
+type Bridge = 
+ record {
+   bridgeType: BridgeType;
+   creationTimestamp: nat64;
+   creator: principal;
+   description: text;
+   entitySpecificFields: text;
+   fromEntityId: text;
+   id: text;
+   keywords: vec text;
+   listOfEntitySpecificFieldKeys: vec text;
+   name: text;
+   owner: principal;
+   settings: BridgeSettings;
+   toEntityId: text;
+ };
+service : {
+  create_bridge: (BridgeInitiationObject) -> (BridgeIdResult);
+  create_entity: (EntityInitiationObject) -> (EntityIdResult);
+  delete_bridge: (text) -> (BridgeIdResult);
+  delete_entity: (text) -> (EntityIdResult);
+  get_bridge: (text) -> (BridgeResult) query;
+  get_entity: (text) -> (EntityResult) query;
+  get_from_bridge_ids_by_entity_id: (text) ->
+   (EntityAttachedBridgesResult) query;
+  get_to_bridge_ids_by_entity_id: (text) ->
+   (EntityAttachedBridgesResult) query;
+  match_entities: (vec EntityFilterCriterion) -> (EntitiesResult) query;
+  update_bridge: (BridgeUpdateObject) -> (BridgeIdResult);
+  update_entity: (EntityUpdateObject) -> (EntityIdResult);
+}
diff --git a/src/integrations/BebbProtocol/bebb.did.d.ts b/src/integrations/BebbProtocol/bebb.did.d.ts
index 8e4f1cb..2a09fb0 100644
--- a/src/integrations/BebbProtocol/bebb.did.d.ts
+++ b/src/integrations/BebbProtocol/bebb.did.d.ts
@@ -1,140 +1,151 @@
-import type { Principal } from '@dfinity/principal';
-import type { ActorMethod } from '@dfinity/agent';
-
-export interface Bridge {
-  'id' : string,
-  'toEntityId' : string,
-  'creator' : Principal,
-  'fromEntityId' : string,
-  'owner' : Principal,
-  'creationTimestamp' : bigint,
-  'name' : string,
-  'description' : string,
-  'keywords' : Array<string>,
-  'settings' : BridgeSettings,
-  'listOfEntitySpecificFieldKeys' : Array<string>,
-  'bridgeType' : BridgeType,
-  'entitySpecificFields' : string,
-}
-export type BridgeErrors = { 'Error' : null } |
-  { 'Unauthorized' : string } |
-  { 'BridgeNotFound' : null };
-export type BridgeIdErrors = { 'Error' : null } |
-  { 'Unauthorized' : null } |
-  { 'BridgeNotFound' : null };
-export type BridgeIdResult = { 'Ok' : string } |
-  { 'Err' : BridgeIdErrors };
-export interface BridgeInitiationObject {
-  'toEntityId' : string,
-  'fromEntityId' : string,
-  'name' : [] | [string],
-  'description' : [] | [string],
-  'keywords' : [] | [Array<string>],
-  'settings' : [] | [BridgeSettings],
-  'bridgeType' : BridgeType,
-  'entitySpecificFields' : [] | [string],
-}
-export type BridgeLinkStatus = { 'CreatedOther' : null } |
-  { 'CreatedOwner' : null };
-export type BridgeResult = { 'Ok' : Bridge } |
-  { 'Err' : BridgeErrors };
-export type BridgeSettings = {};
-export type BridgeType = { 'IsPartOf' : null } |
-  { 'IsAttachedto' : null } |
-  { 'IsRelatedto' : null };
-export interface BridgeUpdateObject {
-  'id' : string,
-  'name' : [] | [string],
-  'description' : [] | [string],
-  'keywords' : [] | [Array<string>],
-  'settings' : [] | [BridgeSettings],
-}
-export interface Entity {
-  'id' : string,
-  'creator' : Principal,
-  'toIds' : EntityAttachedBridges,
-  'previews' : Array<EntityPreview>,
-  'owner' : Principal,
-  'creationTimestamp' : bigint,
-  'name' : string,
-  'fromIds' : EntityAttachedBridges,
-  'description' : string,
-  'keywords' : Array<string>,
-  'settings' : EntitySettings,
-  'listOfEntitySpecificFieldKeys' : Array<string>,
-  'entityType' : EntityType,
-  'entitySpecificFields' : string,
-}
-export interface EntityAttachedBridge {
-  'id' : string,
-  'creationTime' : Time,
-  'bridgeType' : BridgeType,
-  'linkStatus' : BridgeLinkStatus,
-}
-export type EntityAttachedBridges = Array<EntityAttachedBridge>;
-export type EntityAttachedBridgesErrors = { 'Error' : null } |
-  { 'EntityNotFound' : null };
-export type EntityAttachedBridgesResult = { 'Ok' : EntityAttachedBridges } |
-  { 'Err' : EntityAttachedBridgesErrors };
-export type EntityErrors = { 'Error' : null } |
-  { 'EntityNotFound' : null } |
-  { 'Unauthorized' : string };
-export type EntityIdErrors = { 'Error' : null } |
-  { 'PreviewTooLarge' : bigint } |
-  { 'EntityNotFound' : null } |
-  { 'TooManyPreviews' : null } |
-  { 'Unauthorized' : null };
-export type EntityIdResult = { 'Ok' : string } |
-  { 'Err' : EntityIdErrors };
-export interface EntityInitiationObject {
-  'name' : [] | [string],
-  'description' : [] | [string],
-  'keywords' : [] | [Array<string>],
-  'settings' : [] | [EntitySettings],
-  'entityType' : EntityType,
-  'entitySpecificFields' : [] | [string],
-}
-export interface EntityPreview {
-  'previewData' : Uint8Array | number[],
-  'previewType' : EntityPreviewSupportedTypes,
-}
-export type EntityPreviewSupportedTypes = { 'Glb' : null } |
-  { 'Jpg' : null } |
-  { 'Png' : null } |
-  { 'Gltf' : null } |
-  { 'Other' : string };
-export type EntityResult = { 'Ok' : Entity } |
-  { 'Err' : EntityErrors };
-export type EntitySettings = {};
-export type EntityType = { 'Other' : string } |
-  { 'Resource' : EntityTypeResourceTypes };
-export type EntityTypeResourceTypes = { 'Web' : null } |
-  { 'DigitalAsset' : null } |
-  { 'Content' : null };
-export interface EntityUpdateObject {
-  'id' : string,
-  'previews' : [] | [Array<EntityPreview>],
-  'name' : [] | [string],
-  'description' : [] | [string],
-  'keywords' : [] | [Array<string>],
-  'settings' : [] | [EntitySettings],
-}
-export type Time = bigint;
-export interface _SERVICE {
-  'create_bridge' : ActorMethod<[BridgeInitiationObject], BridgeIdResult>,
-  'create_entity' : ActorMethod<[EntityInitiationObject], EntityIdResult>,
-  'delete_bridge' : ActorMethod<[string], BridgeIdResult>,
-  'delete_entity' : ActorMethod<[string], EntityIdResult>,
-  'get_bridge' : ActorMethod<[string], BridgeResult>,
-  'get_entity' : ActorMethod<[string], EntityResult>,
-  'get_from_bridge_ids_by_entity_id' : ActorMethod<
-    [string],
-    EntityAttachedBridgesResult
-  >,
-  'get_to_bridge_ids_by_entity_id' : ActorMethod<
-    [string],
-    EntityAttachedBridgesResult
-  >,
-  'update_bridge' : ActorMethod<[BridgeUpdateObject], BridgeIdResult>,
-  'update_entity' : ActorMethod<[EntityUpdateObject], EntityIdResult>,
-}
+import type { Principal } from '@dfinity/principal';
+import type { ActorMethod } from '@dfinity/agent';
+
+export interface Bridge {
+  'id' : string,
+  'toEntityId' : string,
+  'creator' : Principal,
+  'fromEntityId' : string,
+  'owner' : Principal,
+  'creationTimestamp' : bigint,
+  'name' : string,
+  'description' : string,
+  'keywords' : Array<string>,
+  'settings' : BridgeSettings,
+  'listOfEntitySpecificFieldKeys' : Array<string>,
+  'bridgeType' : BridgeType,
+  'entitySpecificFields' : string,
+}
+export type BridgeErrors = { 'Error' : null } |
+  { 'Unauthorized' : string } |
+  { 'BridgeNotFound' : null };
+export type BridgeIdErrors = { 'Error' : null } |
+  { 'Unauthorized' : null } |
+  { 'BridgeNotFound' : null };
+export type BridgeIdResult = { 'Ok' : string } |
+  { 'Err' : BridgeIdErrors };
+export interface BridgeInitiationObject {
+  'toEntityId' : string,
+  'fromEntityId' : string,
+  'name' : [] | [string],
+  'description' : [] | [string],
+  'keywords' : [] | [Array<string>],
+  'settings' : [] | [BridgeSettings],
+  'bridgeType' : BridgeType,
+  'entitySpecificFields' : [] | [string],
+}
+export type BridgeLinkStatus = { 'CreatedOther' : null } |
+  { 'CreatedOwner' : null };
+export type BridgeResult = { 'Ok' : Bridge } |
+  { 'Err' : BridgeErrors };
+export type BridgeSettings = {};
+export type BridgeType = { 'IsPartOf' : null } |
+  { 'IsAttachedto' : null } |
+  { 'IsRelatedto' : null };
+export interface BridgeUpdateObject {
+  'id' : string,
+  'name' : [] | [string],
+  'description' : [] | [string],
+  'keywords' : [] | [Array<string>],
+  'settings' : [] | [BridgeSettings],
+}
+export type EntitiesResult = { 'Ok' : Array<Entity> } |
+  { 'Err' : EntityErrors };
+export interface Entity {
+  'id' : string,
+  'creator' : Principal,
+  'toIds' : EntityAttachedBridges,
+  'previews' : Array<EntityPreview>,
+  'owner' : Principal,
+  'creationTimestamp' : bigint,
+  'name' : string,
+  'fromIds' : EntityAttachedBridges,
+  'description' : string,
+  'keywords' : Array<string>,
+  'settings' : EntitySettings,
+  'listOfEntitySpecificFieldKeys' : Array<string>,
+  'entityType' : EntityType,
+  'entitySpecificFields' : string,
+}
+export interface EntityAttachedBridge {
+  'id' : string,
+  'creationTime' : Time,
+  'bridgeType' : BridgeType,
+  'linkStatus' : BridgeLinkStatus,
+}
+export type EntityAttachedBridges = Array<EntityAttachedBridge>;
+export type EntityAttachedBridgesErrors = { 'Error' : null } |
+  { 'EntityNotFound' : null };
+export type EntityAttachedBridgesResult = { 'Ok' : EntityAttachedBridges } |
+  { 'Err' : EntityAttachedBridgesErrors };
+export type EntityErrors = { 'Error' : null } |
+  { 'EntityNotFound' : null } |
+  { 'Unauthorized' : string };
+export interface EntityFilterCriterion {
+  'criterionKey' : string,
+  'criterionValue' : string,
+}
+export type EntityIdErrors = { 'Error' : null } |
+  { 'PreviewTooLarge' : bigint } |
+  { 'EntityNotFound' : null } |
+  { 'TooManyPreviews' : null } |
+  { 'Unauthorized' : null };
+export type EntityIdResult = { 'Ok' : string } |
+  { 'Err' : EntityIdErrors };
+export interface EntityInitiationObject {
+  'previews' : [] | [Array<EntityPreview>],
+  'name' : [] | [string],
+  'description' : [] | [string],
+  'keywords' : [] | [Array<string>],
+  'settings' : [] | [EntitySettings],
+  'entityType' : EntityType,
+  'entitySpecificFields' : [] | [string],
+}
+export interface EntityPreview {
+  'previewData' : Uint8Array | number[],
+  'previewType' : EntityPreviewSupportedTypes,
+}
+export type EntityPreviewSupportedTypes = { 'Glb' : null } |
+  { 'Jpg' : null } |
+  { 'Png' : null } |
+  { 'Gltf' : null } |
+  { 'Other' : string };
+export type EntityResult = { 'Ok' : Entity } |
+  { 'Err' : EntityErrors };
+export type EntitySettings = {};
+export type EntityType = { 'Other' : string } |
+  { 'Resource' : EntityTypeResourceTypes };
+export type EntityTypeResourceTypes = { 'Web' : null } |
+  { 'DigitalAsset' : null } |
+  { 'Content' : null };
+export interface EntityUpdateObject {
+  'id' : string,
+  'previews' : [] | [Array<EntityPreview>],
+  'name' : [] | [string],
+  'description' : [] | [string],
+  'keywords' : [] | [Array<string>],
+  'settings' : [] | [EntitySettings],
+}
+export type Time = bigint;
+export interface _SERVICE {
+  'create_bridge' : ActorMethod<[BridgeInitiationObject], BridgeIdResult>,
+  'create_entity' : ActorMethod<[EntityInitiationObject], EntityIdResult>,
+  'delete_bridge' : ActorMethod<[string], BridgeIdResult>,
+  'delete_entity' : ActorMethod<[string], EntityIdResult>,
+  'get_bridge' : ActorMethod<[string], BridgeResult>,
+  'get_entity' : ActorMethod<[string], EntityResult>,
+  'get_from_bridge_ids_by_entity_id' : ActorMethod<
+    [string],
+    EntityAttachedBridgesResult
+  >,
+  'get_to_bridge_ids_by_entity_id' : ActorMethod<
+    [string],
+    EntityAttachedBridgesResult
+  >,
+  'match_entities' : ActorMethod<
+    [Array<EntityFilterCriterion>],
+    EntitiesResult
+  >,
+  'update_bridge' : ActorMethod<[BridgeUpdateObject], BridgeIdResult>,
+  'update_entity' : ActorMethod<[EntityUpdateObject], EntityIdResult>,
+}
diff --git a/src/integrations/BebbProtocol/bebb.did.js b/src/integrations/BebbProtocol/bebb.did.js
index 356f3f0..ebfcff7 100644
--- a/src/integrations/BebbProtocol/bebb.did.js
+++ b/src/integrations/BebbProtocol/bebb.did.js
@@ -1,166 +1,180 @@
-export const idlFactory = ({ IDL }) => {
-  const BridgeSettings = IDL.Record({});
-  const BridgeType = IDL.Variant({
-    'IsPartOf' : IDL.Null,
-    'IsAttachedto' : IDL.Null,
-    'IsRelatedto' : IDL.Null,
-  });
-  const BridgeInitiationObject = IDL.Record({
-    'toEntityId' : IDL.Text,
-    'fromEntityId' : IDL.Text,
-    'name' : IDL.Opt(IDL.Text),
-    'description' : IDL.Opt(IDL.Text),
-    'keywords' : IDL.Opt(IDL.Vec(IDL.Text)),
-    'settings' : IDL.Opt(BridgeSettings),
-    'bridgeType' : BridgeType,
-    'entitySpecificFields' : IDL.Opt(IDL.Text),
-  });
-  const BridgeIdErrors = IDL.Variant({
-    'Error' : IDL.Null,
-    'Unauthorized' : IDL.Null,
-    'BridgeNotFound' : IDL.Null,
-  });
-  const BridgeIdResult = IDL.Variant({
-    'Ok' : IDL.Text,
-    'Err' : BridgeIdErrors,
-  });
-  const EntitySettings = IDL.Record({});
-  const EntityTypeResourceTypes = IDL.Variant({
-    'Web' : IDL.Null,
-    'DigitalAsset' : IDL.Null,
-    'Content' : IDL.Null,
-  });
-  const EntityType = IDL.Variant({
-    'Other' : IDL.Text,
-    'Resource' : EntityTypeResourceTypes,
-  });
-  const EntityInitiationObject = IDL.Record({
-    'name' : IDL.Opt(IDL.Text),
-    'description' : IDL.Opt(IDL.Text),
-    'keywords' : IDL.Opt(IDL.Vec(IDL.Text)),
-    'settings' : IDL.Opt(EntitySettings),
-    'entityType' : EntityType,
-    'entitySpecificFields' : IDL.Opt(IDL.Text),
-  });
-  const EntityIdErrors = IDL.Variant({
-    'Error' : IDL.Null,
-    'PreviewTooLarge' : IDL.Int,
-    'EntityNotFound' : IDL.Null,
-    'TooManyPreviews' : IDL.Null,
-    'Unauthorized' : IDL.Null,
-  });
-  const EntityIdResult = IDL.Variant({
-    'Ok' : IDL.Text,
-    'Err' : EntityIdErrors,
-  });
-  const Bridge = IDL.Record({
-    'id' : IDL.Text,
-    'toEntityId' : IDL.Text,
-    'creator' : IDL.Principal,
-    'fromEntityId' : IDL.Text,
-    'owner' : IDL.Principal,
-    'creationTimestamp' : IDL.Nat64,
-    'name' : IDL.Text,
-    'description' : IDL.Text,
-    'keywords' : IDL.Vec(IDL.Text),
-    'settings' : BridgeSettings,
-    'listOfEntitySpecificFieldKeys' : IDL.Vec(IDL.Text),
-    'bridgeType' : BridgeType,
-    'entitySpecificFields' : IDL.Text,
-  });
-  const BridgeErrors = IDL.Variant({
-    'Error' : IDL.Null,
-    'Unauthorized' : IDL.Text,
-    'BridgeNotFound' : IDL.Null,
-  });
-  const BridgeResult = IDL.Variant({ 'Ok' : Bridge, 'Err' : BridgeErrors });
-  const Time = IDL.Int;
-  const BridgeLinkStatus = IDL.Variant({
-    'CreatedOther' : IDL.Null,
-    'CreatedOwner' : IDL.Null,
-  });
-  const EntityAttachedBridge = IDL.Record({
-    'id' : IDL.Text,
-    'creationTime' : Time,
-    'bridgeType' : BridgeType,
-    'linkStatus' : BridgeLinkStatus,
-  });
-  const EntityAttachedBridges = IDL.Vec(EntityAttachedBridge);
-  const EntityPreviewSupportedTypes = IDL.Variant({
-    'Glb' : IDL.Null,
-    'Jpg' : IDL.Null,
-    'Png' : IDL.Null,
-    'Gltf' : IDL.Null,
-    'Other' : IDL.Text,
-  });
-  const EntityPreview = IDL.Record({
-    'previewData' : IDL.Vec(IDL.Nat8),
-    'previewType' : EntityPreviewSupportedTypes,
-  });
-  const Entity = IDL.Record({
-    'id' : IDL.Text,
-    'creator' : IDL.Principal,
-    'toIds' : EntityAttachedBridges,
-    'previews' : IDL.Vec(EntityPreview),
-    'owner' : IDL.Principal,
-    'creationTimestamp' : IDL.Nat64,
-    'name' : IDL.Text,
-    'fromIds' : EntityAttachedBridges,
-    'description' : IDL.Text,
-    'keywords' : IDL.Vec(IDL.Text),
-    'settings' : EntitySettings,
-    'listOfEntitySpecificFieldKeys' : IDL.Vec(IDL.Text),
-    'entityType' : EntityType,
-    'entitySpecificFields' : IDL.Text,
-  });
-  const EntityErrors = IDL.Variant({
-    'Error' : IDL.Null,
-    'EntityNotFound' : IDL.Null,
-    'Unauthorized' : IDL.Text,
-  });
-  const EntityResult = IDL.Variant({ 'Ok' : Entity, 'Err' : EntityErrors });
-  const EntityAttachedBridgesErrors = IDL.Variant({
-    'Error' : IDL.Null,
-    'EntityNotFound' : IDL.Null,
-  });
-  const EntityAttachedBridgesResult = IDL.Variant({
-    'Ok' : EntityAttachedBridges,
-    'Err' : EntityAttachedBridgesErrors,
-  });
-  const BridgeUpdateObject = IDL.Record({
-    'id' : IDL.Text,
-    'name' : IDL.Opt(IDL.Text),
-    'description' : IDL.Opt(IDL.Text),
-    'keywords' : IDL.Opt(IDL.Vec(IDL.Text)),
-    'settings' : IDL.Opt(BridgeSettings),
-  });
-  const EntityUpdateObject = IDL.Record({
-    'id' : IDL.Text,
-    'previews' : IDL.Opt(IDL.Vec(EntityPreview)),
-    'name' : IDL.Opt(IDL.Text),
-    'description' : IDL.Opt(IDL.Text),
-    'keywords' : IDL.Opt(IDL.Vec(IDL.Text)),
-    'settings' : IDL.Opt(EntitySettings),
-  });
-  return IDL.Service({
-    'create_bridge' : IDL.Func([BridgeInitiationObject], [BridgeIdResult], []),
-    'create_entity' : IDL.Func([EntityInitiationObject], [EntityIdResult], []),
-    'delete_bridge' : IDL.Func([IDL.Text], [BridgeIdResult], []),
-    'delete_entity' : IDL.Func([IDL.Text], [EntityIdResult], []),
-    'get_bridge' : IDL.Func([IDL.Text], [BridgeResult], ['query']),
-    'get_entity' : IDL.Func([IDL.Text], [EntityResult], ['query']),
-    'get_from_bridge_ids_by_entity_id' : IDL.Func(
-        [IDL.Text],
-        [EntityAttachedBridgesResult],
-        ['query'],
-      ),
-    'get_to_bridge_ids_by_entity_id' : IDL.Func(
-        [IDL.Text],
-        [EntityAttachedBridgesResult],
-        ['query'],
-      ),
-    'update_bridge' : IDL.Func([BridgeUpdateObject], [BridgeIdResult], []),
-    'update_entity' : IDL.Func([EntityUpdateObject], [EntityIdResult], []),
-  });
-};
-export const init = ({ IDL }) => { return []; };
+export const idlFactory = ({ IDL }) => {
+  const BridgeSettings = IDL.Record({});
+  const BridgeType = IDL.Variant({
+    'IsPartOf' : IDL.Null,
+    'IsAttachedto' : IDL.Null,
+    'IsRelatedto' : IDL.Null,
+  });
+  const BridgeInitiationObject = IDL.Record({
+    'toEntityId' : IDL.Text,
+    'fromEntityId' : IDL.Text,
+    'name' : IDL.Opt(IDL.Text),
+    'description' : IDL.Opt(IDL.Text),
+    'keywords' : IDL.Opt(IDL.Vec(IDL.Text)),
+    'settings' : IDL.Opt(BridgeSettings),
+    'bridgeType' : BridgeType,
+    'entitySpecificFields' : IDL.Opt(IDL.Text),
+  });
+  const BridgeIdErrors = IDL.Variant({
+    'Error' : IDL.Null,
+    'Unauthorized' : IDL.Null,
+    'BridgeNotFound' : IDL.Null,
+  });
+  const BridgeIdResult = IDL.Variant({
+    'Ok' : IDL.Text,
+    'Err' : BridgeIdErrors,
+  });
+  const EntityPreviewSupportedTypes = IDL.Variant({
+    'Glb' : IDL.Null,
+    'Jpg' : IDL.Null,
+    'Png' : IDL.Null,
+    'Gltf' : IDL.Null,
+    'Other' : IDL.Text,
+  });
+  const EntityPreview = IDL.Record({
+    'previewData' : IDL.Vec(IDL.Nat8),
+    'previewType' : EntityPreviewSupportedTypes,
+  });
+  const EntitySettings = IDL.Record({});
+  const EntityTypeResourceTypes = IDL.Variant({
+    'Web' : IDL.Null,
+    'DigitalAsset' : IDL.Null,
+    'Content' : IDL.Null,
+  });
+  const EntityType = IDL.Variant({
+    'Other' : IDL.Text,
+    'Resource' : EntityTypeResourceTypes,
+  });
+  const EntityInitiationObject = IDL.Record({
+    'previews' : IDL.Opt(IDL.Vec(EntityPreview)),
+    'name' : IDL.Opt(IDL.Text),
+    'description' : IDL.Opt(IDL.Text),
+    'keywords' : IDL.Opt(IDL.Vec(IDL.Text)),
+    'settings' : IDL.Opt(EntitySettings),
+    'entityType' : EntityType,
+    'entitySpecificFields' : IDL.Opt(IDL.Text),
+  });
+  const EntityIdErrors = IDL.Variant({
+    'Error' : IDL.Null,
+    'PreviewTooLarge' : IDL.Int,
+    'EntityNotFound' : IDL.Null,
+    'TooManyPreviews' : IDL.Null,
+    'Unauthorized' : IDL.Null,
+  });
+  const EntityIdResult = IDL.Variant({
+    'Ok' : IDL.Text,
+    'Err' : EntityIdErrors,
+  });
+  const Bridge = IDL.Record({
+    'id' : IDL.Text,
+    'toEntityId' : IDL.Text,
+    'creator' : IDL.Principal,
+    'fromEntityId' : IDL.Text,
+    'owner' : IDL.Principal,
+    'creationTimestamp' : IDL.Nat64,
+    'name' : IDL.Text,
+    'description' : IDL.Text,
+    'keywords' : IDL.Vec(IDL.Text),
+    'settings' : BridgeSettings,
+    'listOfEntitySpecificFieldKeys' : IDL.Vec(IDL.Text),
+    'bridgeType' : BridgeType,
+    'entitySpecificFields' : IDL.Text,
+  });
+  const BridgeErrors = IDL.Variant({
+    'Error' : IDL.Null,
+    'Unauthorized' : IDL.Text,
+    'BridgeNotFound' : IDL.Null,
+  });
+  const BridgeResult = IDL.Variant({ 'Ok' : Bridge, 'Err' : BridgeErrors });
+  const Time = IDL.Int;
+  const BridgeLinkStatus = IDL.Variant({
+    'CreatedOther' : IDL.Null,
+    'CreatedOwner' : IDL.Null,
+  });
+  const EntityAttachedBridge = IDL.Record({
+    'id' : IDL.Text,
+    'creationTime' : Time,
+    'bridgeType' : BridgeType,
+    'linkStatus' : BridgeLinkStatus,
+  });
+  const EntityAttachedBridges = IDL.Vec(EntityAttachedBridge);
+  const Entity = IDL.Record({
+    'id' : IDL.Text,
+    'creator' : IDL.Principal,
+    'toIds' : EntityAttachedBridges,
+    'previews' : IDL.Vec(EntityPreview),
+    'owner' : IDL.Principal,
+    'creationTimestamp' : IDL.Nat64,
+    'name' : IDL.Text,
+    'fromIds' : EntityAttachedBridges,
+    'description' : IDL.Text,
+    'keywords' : IDL.Vec(IDL.Text),
+    'settings' : EntitySettings,
+    'listOfEntitySpecificFieldKeys' : IDL.Vec(IDL.Text),
+    'entityType' : EntityType,
+    'entitySpecificFields' : IDL.Text,
+  });
+  const EntityErrors = IDL.Variant({
+    'Error' : IDL.Null,
+    'EntityNotFound' : IDL.Null,
+    'Unauthorized' : IDL.Text,
+  });
+  const EntityResult = IDL.Variant({ 'Ok' : Entity, 'Err' : EntityErrors });
+  const EntityAttachedBridgesErrors = IDL.Variant({
+    'Error' : IDL.Null,
+    'EntityNotFound' : IDL.Null,
+  });
+  const EntityAttachedBridgesResult = IDL.Variant({
+    'Ok' : EntityAttachedBridges,
+    'Err' : EntityAttachedBridgesErrors,
+  });
+  const EntityFilterCriterion = IDL.Record({
+    'criterionKey' : IDL.Text,
+    'criterionValue' : IDL.Text,
+  });
+  const EntitiesResult = IDL.Variant({
+    'Ok' : IDL.Vec(Entity),
+    'Err' : EntityErrors,
+  });
+  const BridgeUpdateObject = IDL.Record({
+    'id' : IDL.Text,
+    'name' : IDL.Opt(IDL.Text),
+    'description' : IDL.Opt(IDL.Text),
+    'keywords' : IDL.Opt(IDL.Vec(IDL.Text)),
+    'settings' : IDL.Opt(BridgeSettings),
+  });
+  const EntityUpdateObject = IDL.Record({
+    'id' : IDL.Text,
+    'previews' : IDL.Opt(IDL.Vec(EntityPreview)),
+    'name' : IDL.Opt(IDL.Text),
+    'description' : IDL.Opt(IDL.Text),
+    'keywords' : IDL.Opt(IDL.Vec(IDL.Text)),
+    'settings' : IDL.Opt(EntitySettings),
+  });
+  return IDL.Service({
+    'create_bridge' : IDL.Func([BridgeInitiationObject], [BridgeIdResult], []),
+    'create_entity' : IDL.Func([EntityInitiationObject], [EntityIdResult], []),
+    'delete_bridge' : IDL.Func([IDL.Text], [BridgeIdResult], []),
+    'delete_entity' : IDL.Func([IDL.Text], [EntityIdResult], []),
+    'get_bridge' : IDL.Func([IDL.Text], [BridgeResult], ['query']),
+    'get_entity' : IDL.Func([IDL.Text], [EntityResult], ['query']),
+    'get_from_bridge_ids_by_entity_id' : IDL.Func(
+        [IDL.Text],
+        [EntityAttachedBridgesResult],
+        ['query'],
+      ),
+    'get_to_bridge_ids_by_entity_id' : IDL.Func(
+        [IDL.Text],
+        [EntityAttachedBridgesResult],
+        ['query'],
+      ),
+    'match_entities' : IDL.Func(
+        [IDL.Vec(EntityFilterCriterion)],
+        [EntitiesResult],
+        ['query'],
+      ),
+    'update_bridge' : IDL.Func([BridgeUpdateObject], [BridgeIdResult], []),
+    'update_entity' : IDL.Func([EntityUpdateObject], [EntityIdResult], []),
+  });
+};
+export const init = ({ IDL }) => { return []; };

From 594133bf320aa1dfb4b3db221d69a81558c0dcf3 Mon Sep 17 00:00:00 2001
From: patnorris <patrick@DESKTOP-TQ4V8LQ.localdomain>
Date: Mon, 30 Oct 2023 21:01:20 +0000
Subject: [PATCH 07/18] Debugging Entity preview generation

---
 .../components/SpaceNeighbors.svelte          |  8 +++++
 .../helpers/bebb_utils.ts                     | 30 +++++++++++++++----
 .../pages/CreateSpace.svelte                  | 10 ++++++-
 3 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte b/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
index 5b1c5dc..8476346 100644
--- a/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
+++ b/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
@@ -79,11 +79,17 @@
 
 // Owner submitted form to create a new space neighbor
     const submitAddNeighborForm = async () => {
+        // TODO: clicking button has no effect
+        console.log("Debug submitAddNeighborForm");
         neighborCreationInProgress = true;
         const spaceEntityId = extractSpaceEntityId();
+        console.log("Debug submitAddNeighborForm spaceEntityId ", spaceEntityId);
+        console.log("Debug submitAddNeighborForm newNeighborUrl ", newNeighborUrl);
+        console.log("Debug submitAddNeighborForm neighborUrlInputHandler(newNeighborUrl) ", neighborUrlInputHandler(newNeighborUrl));
         if (neighborUrlInputHandler(newNeighborUrl) && spaceEntityId) {
             // Create Neighbor connection as Bridge from Space in Bebb Protocol
             const spaceUrl = newNeighborUrl.replace(/\/+$/, ""); // strip any trailing slashes
+        console.log("Debug submitAddNeighborForm spaceUrl ", spaceUrl);
             const entitySpecificFields = {
                 externalId: spaceUrl,
             };
@@ -101,6 +107,7 @@
             } catch (error) {
                 console.error("Error creating image preview for space: ", error);
             };
+            console.log("Debug submitAddNeighborForm entityPreviews ", entityPreviews);
             
             const entityInitiationObject : BebbEntityInitiationObject = {
                 settings: [],
@@ -136,6 +143,7 @@
             };
             try {
                 const createBebbEntityAndBridgeResponse = await createBebbEntityAndBridge(entityInitiationObject, bridgeEntityInitiationObject);
+                console.log("Debug submitAddNeighborForm createBebbEntityAndBridgeResponse ", createBebbEntityAndBridgeResponse);
                 if (createBebbEntityAndBridgeResponse) {
                     successfullyAddedNeighbor = true;
                 } else {
diff --git a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
index 1c76a8f..35339a5 100644
--- a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
+++ b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
@@ -284,35 +284,45 @@ export async function getConnectedEntitiesAndBridgesInBebb(bebbEntityId: string,
 };
 
 export async function getBebbEntityUrlPreview(url: string) : Promise<BebbEntityPreview> {
+  console.log("Debug getBebbEntityUrlPreview url ", url);
   var enc = new TextEncoder(); // always utf-8
   const urlSpacePreview : BebbEntityPreview = {
     'previewData': enc.encode(url),
     'previewType': { 'Other' : "URL" },
   };
+  console.log("Debug getBebbEntityUrlPreview urlSpacePreview ", urlSpacePreview);
   return urlSpacePreview;
 };
 
 async function captureAFrameScene(spaceHtml) {
+  console.log("Debug captureAFrameScene spaceHtml ", spaceHtml);
   return new Promise(async (resolve, reject) => {
     // 1. Insert spaceHtml into the DOM
+    // TODO: disturbing UI
     const container = document.createElement('div');
-    container.style.position = 'fixed';
-    container.style.top = '-10000px'; // Offscreen
+    container.setAttribute("hidden", "hidden");
+    //container.style.position = 'fixed';
+    //container.style.top = '-10000px'; // Offscreen
     container.innerHTML = spaceHtml;
+    console.log("Debug captureAFrameScene container ", container);
     document.body.appendChild(container);
 
     const sceneEl = container.querySelector('a-scene');
+    console.log("Debug captureAFrameScene sceneEl ", sceneEl);
 
     // Ensure A-Frame scene has loaded
     // @ts-ignore
     if (!sceneEl.hasLoaded) {
       await new Promise(resolve => sceneEl.addEventListener('loaded', resolve));
     };
-
+    console.log("Debug captureAFrameScene sceneEl.hasLoaded ", sceneEl.hasLoaded);
     // 2. & 3. Capture the screenshot
     sceneEl.addEventListener('screenshotready', function(evt) {
+      // TODO: not triggered
+      console.log("Debug captureAFrameScene screenshotready");
       // @ts-ignore
       const dataURI = evt.detail;
+      console.log("Debug captureAFrameScene screenshotready dataURI ", dataURI);
       
       // 4. Convert data URI to Uint8Array
       const byteString = atob(dataURI.split(',')[1]);
@@ -324,20 +334,30 @@ async function captureAFrameScene(spaceHtml) {
 
       // Clean up and resolve the promise
       document.body.removeChild(container);
+      console.log("Debug captureAFrameScene screenshotready intArray ", intArray);
       resolve(intArray);
     });
-    // @ts-ignore
-    sceneEl.components.screenshot.capture('perspective');
+    // Wait until assets have loaded
+    let assetsEl = sceneEl.querySelector('a-assets');
+    console.log("Debug captureAFrameScene assetsEl ", assetsEl);
+    setTimeout(() => {
+      console.log("Debug captureAFrameScene setTimeout");
+      // @ts-ignore
+      sceneEl.components.screenshot.capture('perspective'); // TODO: downloads image to device
+    }, 3000);
   });
 };
 
 export async function getBebbEntityImagePreviewFromAframeHtml(sceneHtml: string) : Promise<BebbEntityPreview> {
+  console.log("Debug getBebbEntityImagePreviewFromAframeHtml sceneHtml ", sceneHtml);
   // @ts-ignore
   const imageData : Uint8Array  = await captureAFrameScene(sceneHtml);
+  console.log("Debug getBebbEntityImagePreviewFromAframeHtml imageData ", imageData);
   const imageSpacePreview : BebbEntityPreview = {
     'previewData': imageData,
     'previewType': { 'Jpg' : null },
   };
+  console.log("Debug getBebbEntityImagePreviewFromAframeHtml imageSpacePreview ", imageSpacePreview);
   return imageSpacePreview;
 };
 
diff --git a/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte b/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
index e4a4e4a..55b7319 100644
--- a/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
+++ b/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
@@ -158,8 +158,10 @@
   };
 
   const createSpace = async (spaceHtml) => {
+        console.log("Debug createSpace spaceHtml ", spaceHtml);
     try {
       const spaceResponse = await $store.backendActor.createSpace(spaceHtml);
+        console.log("Debug createSpace spaceResponse ", spaceResponse);
       // @ts-ignore
       if (spaceResponse && spaceResponse.Ok) {
         // @ts-ignore
@@ -167,23 +169,27 @@
         setSpaceWasCreated();
         // Protocol integration: create Space as Entity in Protocol
         const spaceUrl = `https://${PersonalWebSpace_frontend_canister_id}${appDomain}/#/space/${spaceId}`;
+        console.log("Debug createSpace spaceUrl ", spaceUrl);
         const entitySpecificFields = {
           externalId: spaceUrl,
         };
 
-        const entityPreviews = [];        
+        const entityPreviews = [];
+        // TODO: decouple preview generation from main creation path (add to end and update Entity)      
         try {
           const urlSpacePreview : BebbEntityPreview = await getBebbEntityUrlPreview(spaceUrl);
           entityPreviews.push(urlSpacePreview);
         } catch (error) {
           console.error("Error creating url preview for space: ", error);
         };
+        console.log("Debug createSpace entityPreviews after getBebbEntityUrlPreview ", entityPreviews);
         try {
           const imageSpacePreview : BebbEntityPreview = await getBebbEntityImagePreviewFromAframeHtml(spaceHtml);
           entityPreviews.push(imageSpacePreview);         
         } catch (error) {
           console.error("Error creating image preview for space: ", error);
         };
+        console.log("Debug createSpace entityPreviews ", entityPreviews);
         
         let entityInitiationObject : BebbEntityInitiationObject = {
           settings: [],
@@ -195,10 +201,12 @@
           previews: [entityPreviews],
         };
         const spaceEntityIdResponse = await createBebbEntity(entityInitiationObject);
+        console.log("Debug createSpace spaceEntityIdResponse ", spaceEntityIdResponse);
         // @ts-ignore
         if (spaceEntityIdResponse) {
           // @ts-ignore
           const spaceEntityIdUpdateResponse = await $store.backendActor.updateSpaceEntityId(spaceId, spaceEntityIdResponse);
+        console.log("Debug createSpace spaceEntityIdUpdateResponse ", spaceEntityIdUpdateResponse);
           // @ts-ignore
           if (!spaceEntityIdUpdateResponse || !spaceEntityIdUpdateResponse.Ok) {
             console.error("Update Space Error:", spaceEntityIdUpdateResponse);

From 9ff2b41d7ac27f692f35a81870e998dc243ca4e1 Mon Sep 17 00:00:00 2001
From: patnorris <patrick@DESKTOP-TQ4V8LQ.localdomain>
Date: Tue, 31 Oct 2023 16:03:05 +0000
Subject: [PATCH 08/18] Debug new Entity creation with previews

---
 .../components/SpaceNeighbors.svelte          |  7 +++--
 .../pages/CreateSpace.svelte                  | 28 ++++++++++---------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte b/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
index 8476346..5af28e0 100644
--- a/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
+++ b/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
@@ -94,7 +94,7 @@
                 externalId: spaceUrl,
             };
 
-            const entityPreviews = [];        
+            const entityPreviews : Array<BebbEntityPreview> = []; // TODO: decouple preview generation from main creation path (add to end and update Entity)     
             try {
                 const urlSpacePreview : BebbEntityPreview = await getBebbEntityUrlPreview(spaceUrl);
                 entityPreviews.push(urlSpacePreview);
@@ -115,8 +115,9 @@
                 name: [],
                 description: [`Created as a Space Neighbor in the Open Internet Metaverse at https://${PersonalWebSpace_frontend_canister_id}${appDomain}/`] as [string],
                 keywords: [["Space Neighbor", "Open Internet Metaverse", "Virtual Neighborhood"]] as [Array<string>],
-                entitySpecificFields: [JSON.stringify(entitySpecificFields)],
-                previews: [entityPreviews],
+                entitySpecificFields: [JSON.stringify(entitySpecificFields)] as [string],
+                //previews: [entityPreviews] as [Array<BebbEntityPreview>], // TODO: causes error in createBebbEntity call (invalid record)
+                previews: [],
             };
 
             const bridgePresentationMetadata = {
diff --git a/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte b/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
index 55b7319..8fc4d5b 100644
--- a/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
+++ b/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
@@ -174,7 +174,7 @@
           externalId: spaceUrl,
         };
 
-        const entityPreviews = [];
+        const entityPreviews : Array<BebbEntityPreview> = [];
         // TODO: decouple preview generation from main creation path (add to end and update Entity)      
         try {
           const urlSpacePreview : BebbEntityPreview = await getBebbEntityUrlPreview(spaceUrl);
@@ -182,23 +182,16 @@
         } catch (error) {
           console.error("Error creating url preview for space: ", error);
         };
-        console.log("Debug createSpace entityPreviews after getBebbEntityUrlPreview ", entityPreviews);
-        try {
-          const imageSpacePreview : BebbEntityPreview = await getBebbEntityImagePreviewFromAframeHtml(spaceHtml);
-          entityPreviews.push(imageSpacePreview);         
-        } catch (error) {
-          console.error("Error creating image preview for space: ", error);
-        };
-        console.log("Debug createSpace entityPreviews ", entityPreviews);
-        
+        console.log("Debug createSpace entityPreviews after getBebbEntityUrlPreview ", entityPreviews);        
         let entityInitiationObject : BebbEntityInitiationObject = {
           settings: [],
           entityType: { 'Resource' : { 'Web' : null } },
           name: ["Personal Web Space"],
           description: ["Flaming Hot Personal Web Space"],
           keywords: [["NFT", "Space", "Open Internet Metaverse", "heeyah"]] as [Array<string>],
-          entitySpecificFields: [JSON.stringify(entitySpecificFields)],
-          previews: [entityPreviews],
+          entitySpecificFields: [JSON.stringify(entitySpecificFields)] as [string],
+          //previews: [entityPreviews] as [Array<BebbEntityPreview>], // TODO: causes error in createBebbEntity call (invalid record)
+          previews: [],
         };
         const spaceEntityIdResponse = await createBebbEntity(entityInitiationObject);
         console.log("Debug createSpace spaceEntityIdResponse ", spaceEntityIdResponse);
@@ -208,7 +201,16 @@
           const spaceEntityIdUpdateResponse = await $store.backendActor.updateSpaceEntityId(spaceId, spaceEntityIdResponse);
         console.log("Debug createSpace spaceEntityIdUpdateResponse ", spaceEntityIdUpdateResponse);
           // @ts-ignore
-          if (!spaceEntityIdUpdateResponse || !spaceEntityIdUpdateResponse.Ok) {
+          if (spaceEntityIdUpdateResponse && spaceEntityIdUpdateResponse.Ok) {
+            /* try {
+              const imageSpacePreview : BebbEntityPreview = await getBebbEntityImagePreviewFromAframeHtml(spaceHtml);
+              entityPreviews.push(imageSpacePreview);
+              // TODO: update Entity previews
+            } catch (error) {
+              console.error("Error creating image preview for space: ", error);
+            };
+            console.log("Debug createSpace entityPreviews ", entityPreviews); */
+          } else {
             console.error("Update Space Error:", spaceEntityIdUpdateResponse);
           };
         } else {

From bde22d74435416828d25be05df54fae0b3c384ee Mon Sep 17 00:00:00 2001
From: patnorris <patrick@DESKTOP-TQ4V8LQ.localdomain>
Date: Fri, 3 Nov 2023 22:59:11 +0100
Subject: [PATCH 09/18] Separate update call for previews

---
 .../components/SpaceNeighbors.svelte          | 27 ++++++++++----
 .../helpers/bebb_utils.ts                     | 35 ++++++++++++++++---
 .../pages/CreateSpace.svelte                  |  2 +-
 3 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte b/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
index 5af28e0..3cbb235 100644
--- a/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
+++ b/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
@@ -5,6 +5,7 @@
         BebbEntity,
         BebbEntityInitiationObject,
         BebbEntityPreview,
+        BebbEntityUpdateObject,
     } from "../helpers/bebb_utils";
     import {
         createBebbEntityAndBridge,
@@ -13,6 +14,7 @@
         getConnectedEntitiesInBebb,
         getBebbEntityUrlPreview,
         getBebbEntityImagePreviewFromUrl,
+        updateBebbEntity,
     } from "../helpers/bebb_utils";
     import { onMount } from "svelte";
     import ProtocolEntity from "./ProtocolEntity.svelte";
@@ -101,12 +103,6 @@
             } catch (error) {
                 console.error("Error creating url preview for space: ", error);
             };
-            try {
-                const imageSpacePreview : BebbEntityPreview = await getBebbEntityImagePreviewFromUrl(spaceUrl);
-                entityPreviews.push(imageSpacePreview);         
-            } catch (error) {
-                console.error("Error creating image preview for space: ", error);
-            };
             console.log("Debug submitAddNeighborForm entityPreviews ", entityPreviews);
             
             const entityInitiationObject : BebbEntityInitiationObject = {
@@ -147,6 +143,25 @@
                 console.log("Debug submitAddNeighborForm createBebbEntityAndBridgeResponse ", createBebbEntityAndBridgeResponse);
                 if (createBebbEntityAndBridgeResponse) {
                     successfullyAddedNeighbor = true;
+                    if (createBebbEntityAndBridgeResponse.newEntityCreated) { // The Entity did not exist already and it's thus fine to update the previews
+                        // Add image preview to Entity (if a new Entity was created)
+                        try {
+                            const imageSpacePreview : BebbEntityPreview = await getBebbEntityImagePreviewFromUrl(spaceUrl);
+                            entityPreviews.push(imageSpacePreview);
+                            const bebbEntityUpdateObject : BebbEntityUpdateObject = {
+                                'id' : createBebbEntityAndBridgeResponse.entityId,
+                                'previews' : [entityPreviews] as [Array<BebbEntityPreview>],
+                                // don't update other fields (thus leave empty)
+                                'name' : [],
+                                'description' : [],
+                                'keywords' : [],
+                                'settings' : [],
+                            };
+                            const updateBebbEntityResponse = await updateBebbEntity(bebbEntityUpdateObject);   
+                        } catch (error) {
+                            console.error("Error creating image preview for space: ", error);
+                        };
+                    };
                 } else {
                     errorAddingNeighbor = true;
                 };
diff --git a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
index 35339a5..2fef8bc 100644
--- a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
+++ b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
@@ -11,6 +11,7 @@ import type {
   Entity,
   EntityPreview,
   EntityFilterCriterion,
+  EntityUpdateObject,
 } from "src/integrations/BebbProtocol/bebb.did";
 
 export type BebbEntity = Entity;
@@ -23,6 +24,7 @@ export type BebbBridge = Bridge;
 export type BebbEntityAndBridge = { entity: BebbEntity, bridge: BebbBridge };
 export type BebbEntityPreview = EntityPreview;
 export type BebbEntityFilterCriterion = EntityFilterCriterion;
+export type BebbEntityUpdateObject = EntityUpdateObject;
 
 let appStore;
 store.subscribe((value) => appStore = value);
@@ -40,6 +42,19 @@ export async function createBebbEntity(entityInitiationObject: BebbEntityInitiat
   };
 };
 
+export async function updateBebbEntity(entityUpdateObject: BebbEntityUpdateObject) {
+  if (!appStore) {
+    throw new Error("Error in updateBebbEntity: store not initialized");
+  };
+  const updateEntityResponse = await appStore.protocolActor.update_entity(entityUpdateObject);
+  // @ts-ignore
+  if (updateEntityResponse && updateEntityResponse.Ok) {
+    return updateEntityResponse.Ok;
+  } else {
+    throw new Error("Error updating Entity");   
+  };
+};
+
 export async function createBebbBridge(bridgeEntityInitiationObject: BebbBridgeInitiationObject) {
   if (!appStore) {
     throw new Error("Error in createBebbBridge: store not initialized");
@@ -53,6 +68,8 @@ export async function createBebbBridge(bridgeEntityInitiationObject: BebbBridgeI
   };
 };
 
+// TODO: updateBebbBridge
+
 export async function createBebbEntityIfNonExistent(entityInitiationObject: BebbEntityInitiationObject) {
   if (!appStore) {
     throw new Error("Error in createBebbEntityIfNonExistent: store not initialized");
@@ -70,11 +87,17 @@ export async function createBebbEntityIfNonExistent(entityInitiationObject: Bebb
   // Check if any Entities matched the filter criteria
   if (matchResult && matchResult.Ok && matchResult.Ok.length > 0) {
     // Assuming the first matched Entity is the correct one (and there are no duplicates)
-    return matchResult.Ok[0].id;  // Return the id of the existing Entity
+    return {
+      entityId: matchResult.Ok[0].id, // Return the id of the existing Entity
+      newEntityCreated: false,
+    };
   };
 
   // Entity does not exist, so create it
-  return createBebbEntity(entityInitiationObject); 
+  return {
+    entityId: await createBebbEntity(entityInitiationObject),
+    newEntityCreated: true,
+  };
 }
 
 
@@ -86,7 +109,7 @@ export async function createBebbEntityAndBridge(entityInitiationObject: BebbEnti
   // @ts-ignore
   if (createEntityResponse) {
     // @ts-ignore
-    const newNeighborEntityId = createEntityResponse;
+    const newNeighborEntityId = createEntityResponse.entityId;
     if (!bridgeEntityInitiationObject.toEntityId || bridgeEntityInitiationObject.toEntityId === "") {
       bridgeEntityInitiationObject.toEntityId = newNeighborEntityId;
     } else {
@@ -95,7 +118,11 @@ export async function createBebbEntityAndBridge(entityInitiationObject: BebbEnti
     const createBridgeResponse = await createBebbBridge(bridgeEntityInitiationObject);
     // @ts-ignore
     if (createBridgeResponse) {
-      return true;
+      return {
+        entityId: newNeighborEntityId,
+        bridgeId: createBridgeResponse,
+        newEntityCreated: createEntityResponse.newEntityCreated,
+      };
     } else {
       throw new Error("Error creating new Bridge");
     };
diff --git a/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte b/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
index 8fc4d5b..e1c8c17 100644
--- a/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
+++ b/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
@@ -205,7 +205,7 @@
             /* try {
               const imageSpacePreview : BebbEntityPreview = await getBebbEntityImagePreviewFromAframeHtml(spaceHtml);
               entityPreviews.push(imageSpacePreview);
-              // TODO: update Entity previews
+              // TODO: update Entity with previews
             } catch (error) {
               console.error("Error creating image preview for space: ", error);
             };

From 320612346b4723a4132ca35d7b23fcbc9be57df8 Mon Sep 17 00:00:00 2001
From: patnorris <patrick@DESKTOP-TQ4V8LQ>
Date: Tue, 7 Nov 2023 16:02:48 +0100
Subject: [PATCH 10/18] Update Entity preview

---
 .../components/SpaceNeighbors.svelte          |  2 +-
 .../pages/CreateSpace.svelte                  | 26 +++++++++++++------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte b/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
index 3cbb235..8ffa04c 100644
--- a/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
+++ b/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
@@ -96,7 +96,7 @@
                 externalId: spaceUrl,
             };
 
-            const entityPreviews : Array<BebbEntityPreview> = []; // TODO: decouple preview generation from main creation path (add to end and update Entity)     
+            const entityPreviews : Array<BebbEntityPreview> = [];    
             try {
                 const urlSpacePreview : BebbEntityPreview = await getBebbEntityUrlPreview(spaceUrl);
                 entityPreviews.push(urlSpacePreview);
diff --git a/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte b/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
index e1c8c17..ade0b3b 100644
--- a/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
+++ b/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
@@ -14,11 +14,13 @@
   import type {
     BebbEntityInitiationObject,
     BebbEntityPreview,
+    BebbEntityUpdateObject,
   } from "../helpers/bebb_utils";
   import {
     createBebbEntity,
     getBebbEntityUrlPreview,
     getBebbEntityImagePreviewFromAframeHtml,
+    updateBebbEntity,
   } from "../helpers/bebb_utils";
 
   let webHostedGlbModelUrl : string = "";
@@ -174,8 +176,7 @@
           externalId: spaceUrl,
         };
 
-        const entityPreviews : Array<BebbEntityPreview> = [];
-        // TODO: decouple preview generation from main creation path (add to end and update Entity)      
+        const entityPreviews : Array<BebbEntityPreview> = [];    
         try {
           const urlSpacePreview : BebbEntityPreview = await getBebbEntityUrlPreview(spaceUrl);
           entityPreviews.push(urlSpacePreview);
@@ -202,25 +203,34 @@
         console.log("Debug createSpace spaceEntityIdUpdateResponse ", spaceEntityIdUpdateResponse);
           // @ts-ignore
           if (spaceEntityIdUpdateResponse && spaceEntityIdUpdateResponse.Ok) {
-            /* try {
+            // Add image preview to Entity (if a new Entity was created)
+            try {
               const imageSpacePreview : BebbEntityPreview = await getBebbEntityImagePreviewFromAframeHtml(spaceHtml);
               entityPreviews.push(imageSpacePreview);
-              // TODO: update Entity with previews
+              const bebbEntityUpdateObject : BebbEntityUpdateObject = {
+                'id' : spaceEntityIdResponse,
+                'previews' : [entityPreviews] as [Array<BebbEntityPreview>],
+                // don't update other fields (thus leave empty)
+                'name' : [],
+                'description' : [],
+                'keywords' : [],
+                'settings' : [],
+              };
+              const updateBebbEntityResponse = await updateBebbEntity(bebbEntityUpdateObject);   
             } catch (error) {
               console.error("Error creating image preview for space: ", error);
             };
-            console.log("Debug createSpace entityPreviews ", entityPreviews); */
           } else {
-            console.error("Update Space Error:", spaceEntityIdUpdateResponse);
+            console.error("Update Space Error: ", spaceEntityIdUpdateResponse);
           };
         } else {
-          console.error("Create Entity Error:", spaceEntityIdResponse);
+          console.error("Create Entity Error: ", spaceEntityIdResponse);
         };
       } else {
         console.error("Create Space Error:", spaceResponse);
       };
     } catch (error) {
-      console.error("Create Space Error:", error);
+      console.error("Create Space Error: ", error);
     };
   };
 

From de9c6c482d2094785e21e9edc616dbae222d5de3 Mon Sep 17 00:00:00 2001
From: patnorris <patrick@DESKTOP-TQ4V8LQ>
Date: Wed, 8 Nov 2023 20:01:11 +0100
Subject: [PATCH 11/18] Capture and store image preview

---
 .../helpers/bebb_utils.ts                     | 100 ++++++++++++------
 .../pages/CreateSpace.svelte                  |   2 +-
 2 files changed, 68 insertions(+), 34 deletions(-)

diff --git a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
index 2fef8bc..914c864 100644
--- a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
+++ b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
@@ -43,10 +43,12 @@ export async function createBebbEntity(entityInitiationObject: BebbEntityInitiat
 };
 
 export async function updateBebbEntity(entityUpdateObject: BebbEntityUpdateObject) {
+  console.log("Debug updateBebbEntity entityUpdateObject ", entityUpdateObject);
   if (!appStore) {
     throw new Error("Error in updateBebbEntity: store not initialized");
   };
   const updateEntityResponse = await appStore.protocolActor.update_entity(entityUpdateObject);
+  console.log("Debug updateBebbEntity updateEntityResponse ", updateEntityResponse);
   // @ts-ignore
   if (updateEntityResponse && updateEntityResponse.Ok) {
     return updateEntityResponse.Ok;
@@ -311,20 +313,64 @@ export async function getConnectedEntitiesAndBridgesInBebb(bebbEntityId: string,
 };
 
 export async function getBebbEntityUrlPreview(url: string) : Promise<BebbEntityPreview> {
-  console.log("Debug getBebbEntityUrlPreview url ", url);
   var enc = new TextEncoder(); // always utf-8
   const urlSpacePreview : BebbEntityPreview = {
     'previewData': enc.encode(url),
     'previewType': { 'Other' : "URL" },
   };
-  console.log("Debug getBebbEntityUrlPreview urlSpacePreview ", urlSpacePreview);
   return urlSpacePreview;
 };
 
+// Convert the Blob to an ArrayBuffer
+const blobToArrayBuffer = (blob) => {
+  return blob.arrayBuffer();
+};
+
+// Convert the ArrayBuffer to a Uint8Array
+const arrayBufferToUint8Array = (buffer) => {
+  return new Uint8Array(buffer);
+};
+
+// Putting it all together
+const getUint8ArrayFromCanvas = async (canvas) => {
+  try {
+    const blob = await canvasToBlob(canvas);
+    const buffer = await blobToArrayBuffer(blob);
+    const uint8Array = arrayBufferToUint8Array(buffer);
+    return uint8Array; // This is the Uint8Array representation of your canvas
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+};
+
+function displayImageInPopup(screenshotArray) {
+  // Create a Blob from the Uint8Array
+  const blob = new Blob([screenshotArray], { type: 'image/jpeg' });
+
+  // Create an Object URL for the blob
+  const imageUrl = URL.createObjectURL(blob);
+  console.log("Debug captureAFrameScene imageUrl ", imageUrl);
+
+  // Open a new popup window
+  const popup = window.open('', 'Image Preview', 'width=600,height=400');
+
+  // Check if the popup was successfully opened
+  if (popup) {
+    console.log("Debug captureAFrameScene popup");
+    // Write the HTML content for the new window
+    popup.document.write(`<html><head><title>Image Preview</title></head><body><img src="${imageUrl}" onload="window.URL.revokeObjectURL('${imageUrl}')" style="max-width:100%;"></body></html>`);
+    
+    // Close the document to apply the content
+    popup.document.close();
+  } else {
+    console.log('Popup blocked or failed to open.');
+  };
+};
+
 async function captureAFrameScene(spaceHtml) {
-  console.log("Debug captureAFrameScene spaceHtml ", spaceHtml);
+  console.log("Debug captureAFrameScene");
   return new Promise(async (resolve, reject) => {
-    // 1. Insert spaceHtml into the DOM
     // TODO: disturbing UI
     const container = document.createElement('div');
     container.setAttribute("hidden", "hidden");
@@ -335,7 +381,6 @@ async function captureAFrameScene(spaceHtml) {
     document.body.appendChild(container);
 
     const sceneEl = container.querySelector('a-scene');
-    console.log("Debug captureAFrameScene sceneEl ", sceneEl);
 
     // Ensure A-Frame scene has loaded
     // @ts-ignore
@@ -343,42 +388,31 @@ async function captureAFrameScene(spaceHtml) {
       await new Promise(resolve => sceneEl.addEventListener('loaded', resolve));
     };
     console.log("Debug captureAFrameScene sceneEl.hasLoaded ", sceneEl.hasLoaded);
-    // 2. & 3. Capture the screenshot
-    sceneEl.addEventListener('screenshotready', function(evt) {
-      // TODO: not triggered
-      console.log("Debug captureAFrameScene screenshotready");
-      // @ts-ignore
-      const dataURI = evt.detail;
-      console.log("Debug captureAFrameScene screenshotready dataURI ", dataURI);
-      
-      // 4. Convert data URI to Uint8Array
-      const byteString = atob(dataURI.split(',')[1]);
-      const arrayBuffer = new ArrayBuffer(byteString.length);
-      const intArray = new Uint8Array(arrayBuffer);
-      for (let i = 0; i < byteString.length; i++) {
-        intArray[i] = byteString.charCodeAt(i);
-      };
-
-      // Clean up and resolve the promise
-      document.body.removeChild(container);
-      console.log("Debug captureAFrameScene screenshotready intArray ", intArray);
-      resolve(intArray);
-    });
     // Wait until assets have loaded
     let assetsEl = sceneEl.querySelector('a-assets');
     console.log("Debug captureAFrameScene assetsEl ", assetsEl);
-    setTimeout(() => {
-      console.log("Debug captureAFrameScene setTimeout");
-      // @ts-ignore
-      sceneEl.components.screenshot.capture('perspective'); // TODO: downloads image to device
-    }, 3000);
+    await new Promise(resolve =>
+      setTimeout(() => {
+        console.log("Debug captureAFrameScene setTimeout");
+        resolve("");
+      }, 3000)
+    );
+    // @ts-ignore
+    const screenshotCanvas = sceneEl.components.screenshot.getCanvas('perspective');
+    console.log("Debug captureAFrameScene screenshotCanvas ", screenshotCanvas);
+    const screenshotArray = await getUint8ArrayFromCanvas(screenshotCanvas);
+    console.log("Debug captureAFrameScene screenshotArray ", screenshotArray);
+
+    document.body.removeChild(container);
+
+    resolve(screenshotArray);
   });
 };
 
 export async function getBebbEntityImagePreviewFromAframeHtml(sceneHtml: string) : Promise<BebbEntityPreview> {
-  console.log("Debug getBebbEntityImagePreviewFromAframeHtml sceneHtml ", sceneHtml);
+  console.log("Debug getBebbEntityImagePreviewFromAframeHtml");
   // @ts-ignore
-  const imageData : Uint8Array  = await captureAFrameScene(sceneHtml);
+  const imageData : Uint8Array = await captureAFrameScene(sceneHtml);
   console.log("Debug getBebbEntityImagePreviewFromAframeHtml imageData ", imageData);
   const imageSpacePreview : BebbEntityPreview = {
     'previewData': imageData,
diff --git a/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte b/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
index ade0b3b..6ef0cc3 100644
--- a/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
+++ b/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
@@ -160,7 +160,6 @@
   };
 
   const createSpace = async (spaceHtml) => {
-        console.log("Debug createSpace spaceHtml ", spaceHtml);
     try {
       const spaceResponse = await $store.backendActor.createSpace(spaceHtml);
         console.log("Debug createSpace spaceResponse ", spaceResponse);
@@ -206,6 +205,7 @@
             // Add image preview to Entity (if a new Entity was created)
             try {
               const imageSpacePreview : BebbEntityPreview = await getBebbEntityImagePreviewFromAframeHtml(spaceHtml);
+              console.log("Debug createSpace imageSpacePreview ", imageSpacePreview);
               entityPreviews.push(imageSpacePreview);
               const bebbEntityUpdateObject : BebbEntityUpdateObject = {
                 'id' : spaceEntityIdResponse,

From b74c675c72b4dd7ee622a40f20eaa0d52304717e Mon Sep 17 00:00:00 2001
From: patnorris <patrick@DESKTOP-TQ4V8LQ>
Date: Mon, 13 Nov 2023 22:44:25 +0100
Subject: [PATCH 12/18] Debug image preview UI disruption

---
 .../helpers/bebb_utils.ts                          | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
index 914c864..e52a1eb 100644
--- a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
+++ b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
@@ -371,9 +371,18 @@ function displayImageInPopup(screenshotArray) {
 async function captureAFrameScene(spaceHtml) {
   console.log("Debug captureAFrameScene");
   return new Promise(async (resolve, reject) => {
+    // Store the original overflow value
+const originalOverflow = document.body.style.overflow;
+
+// Set overflow to auto
+document.body.style.overflow = 'auto';
     // TODO: disturbing UI
     const container = document.createElement('div');
-    container.setAttribute("hidden", "hidden");
+    //container.setAttribute("hidden", "hidden");
+    //container.style.display = 'none'; // Hide the container
+    container.style.visibility = "hidden";
+    container.style.width = '10%';
+    container.style.height = '10%';
     //container.style.position = 'fixed';
     //container.style.top = '-10000px'; // Offscreen
     container.innerHTML = spaceHtml;
@@ -402,8 +411,11 @@ async function captureAFrameScene(spaceHtml) {
     console.log("Debug captureAFrameScene screenshotCanvas ", screenshotCanvas);
     const screenshotArray = await getUint8ArrayFromCanvas(screenshotCanvas);
     console.log("Debug captureAFrameScene screenshotArray ", screenshotArray);
+    displayImageInPopup(screenshotArray);
 
     document.body.removeChild(container);
+    // Restore the original overflow value
+document.body.style.overflow = originalOverflow;
 
     resolve(screenshotArray);
   });

From f0191d715e85a3fd0c701fdf653121e448287daa Mon Sep 17 00:00:00 2001
From: patnorris <patrick@DESKTOP-TQ4V8LQ>
Date: Wed, 15 Nov 2023 17:48:03 +0100
Subject: [PATCH 13/18] Add working image preview functionality

---
 .../components/GlbModelPreview.svelte         |  2 +-
 .../components/MediaContentPreview.svelte     |  2 +-
 .../helpers/bebb_utils.ts                     | 73 +++++++++++++++----
 .../pages/CreateSpace.svelte                  | 68 ++++++++++-------
 4 files changed, 104 insertions(+), 41 deletions(-)

diff --git a/src/PersonalWebSpace_frontend/components/GlbModelPreview.svelte b/src/PersonalWebSpace_frontend/components/GlbModelPreview.svelte
index 9d0d555..b1a2656 100644
--- a/src/PersonalWebSpace_frontend/components/GlbModelPreview.svelte
+++ b/src/PersonalWebSpace_frontend/components/GlbModelPreview.svelte
@@ -11,7 +11,7 @@
     : getStringForSpaceFromUserUploadedModel();
 </script>
 <div class="glb-model-space-preview space-y-1">
-  <iframe srcdoc={glbModelPreviewString} title="Preview of the Glb Model" width="100%" height="auto" class="py-2"></iframe>
+  <iframe id={modelUrl} srcdoc={glbModelPreviewString} title="Preview of the Glb Model" width="100%" height="auto" class="py-2"></iframe>
 </div>
 
 <style>
diff --git a/src/PersonalWebSpace_frontend/components/MediaContentPreview.svelte b/src/PersonalWebSpace_frontend/components/MediaContentPreview.svelte
index c284ccb..c85352a 100644
--- a/src/PersonalWebSpace_frontend/components/MediaContentPreview.svelte
+++ b/src/PersonalWebSpace_frontend/components/MediaContentPreview.svelte
@@ -36,7 +36,7 @@
 
 </script>
 <div class="media-content-space-preview space-y-1">
-  <iframe srcdoc={mediaContentPreviewString} title="Preview of the File's Content" width="100%" height="auto" class="py-2"></iframe>
+  <iframe id={contentUrl} srcdoc={mediaContentPreviewString} title="Preview of the File's Content" width="100%" height="auto" class="py-2"></iframe>
 </div>
 
 <style>
diff --git a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
index e52a1eb..720f1ea 100644
--- a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
+++ b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
@@ -372,19 +372,18 @@ async function captureAFrameScene(spaceHtml) {
   console.log("Debug captureAFrameScene");
   return new Promise(async (resolve, reject) => {
     // Store the original overflow value
-const originalOverflow = document.body.style.overflow;
-
-// Set overflow to auto
-document.body.style.overflow = 'auto';
-    // TODO: disturbing UI
+    const originalOverflow = document.body.style.overflow;
+    // Set overflow to auto
+    document.body.style.overflow = 'auto';
+    // This is disturbing the UI (while it captures the screenshot correctly, adding the element lets the scrollbar disappear, likely due to the errors while loading the A-Frame scene; loading it within a new iframe ensured that there weren't any UI issues but the screenshot wasn't captured correctly)
     const container = document.createElement('div');
-    //container.setAttribute("hidden", "hidden");
-    //container.style.display = 'none'; // Hide the container
-    container.style.visibility = "hidden";
-    container.style.width = '10%';
-    container.style.height = '10%';
-    //container.style.position = 'fixed';
-    //container.style.top = '-10000px'; // Offscreen
+    container.style.visibility = 'hidden';
+    //container.style.position = 'absolute';
+    container.style.top = '-9999px'; // Move off-screen
+    container.style.left = '-9999px';
+    container.style.zIndex = '-9999';
+    container.style.width = '1px';  // Minimize size
+    container.style.height = '1px';
     container.innerHTML = spaceHtml;
     console.log("Debug captureAFrameScene container ", container);
     document.body.appendChild(container);
@@ -415,7 +414,7 @@ document.body.style.overflow = 'auto';
 
     document.body.removeChild(container);
     // Restore the original overflow value
-document.body.style.overflow = originalOverflow;
+    document.body.style.overflow = originalOverflow;
 
     resolve(screenshotArray);
   });
@@ -434,6 +433,54 @@ export async function getBebbEntityImagePreviewFromAframeHtml(sceneHtml: string)
   return imageSpacePreview;
 };
 
+async function captureAFrameSceneFromIframe(iframe) {
+  return new Promise(async (resolve, reject) => {
+    try {
+      // Ensure the iframe's content is fully loaded
+      if (!iframe.contentWindow || !iframe.contentWindow.document) {
+        return reject('Iframe content is not accessible or not fully loaded.');
+      };
+
+      const sceneEl = iframe.contentWindow.document.querySelector('a-scene');
+      // Ensure the A-Frame scene has loaded
+      if (!sceneEl) {
+        return reject('A-Frame scene is not loaded in the iframe.');
+      };
+      // @ts-ignore
+      if (!sceneEl.hasLoaded) {
+        await new Promise(resolve => sceneEl.addEventListener('loaded', resolve));
+      };
+
+      // Use the screenshot component or a similar method to capture the scene
+      // @ts-ignore
+      const screenshotCanvas = sceneEl.components.screenshot.getCanvas('perspective');
+      const screenshotArray = await getUint8ArrayFromCanvas(screenshotCanvas);
+
+      displayImageInPopup(screenshotArray); // TODO: remove
+
+      resolve(screenshotArray);
+    } catch (error) {
+      console.error("Error capturing A-Frame scene from iframe: ", error);
+      reject(error);
+    }
+  });
+};
+
+export async function getBebbEntityImagePreviewFromIframe(iframe) : Promise<BebbEntityPreview> {
+  console.log("Debug getBebbEntityImagePreviewFromIframe");
+  // @ts-ignore
+  const imageData : Uint8Array = await captureAFrameSceneFromIframe(iframe);
+  console.log("Debug getBebbEntityImagePreviewFromIframe imageData ", imageData);
+
+  const imageSpacePreview : BebbEntityPreview = {
+    'previewData': imageData,
+    'previewType': { 'Jpg' : null },
+  };
+
+  console.log("Debug getBebbEntityImagePreviewFromIframe imageSpacePreview ", imageSpacePreview);
+  return imageSpacePreview;
+};
+
 async function captureImageOfAFrameSceneFromUrl(url: string) : Promise<Uint8Array> {
   return new Promise(async (resolve, reject) => {
     let iframe = document.createElement('iframe');
diff --git a/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte b/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
index 6ef0cc3..fa41e07 100644
--- a/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
+++ b/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
@@ -19,7 +19,7 @@
   import {
     createBebbEntity,
     getBebbEntityUrlPreview,
-    getBebbEntityImagePreviewFromAframeHtml,
+    getBebbEntityImagePreviewFromIframe,
     updateBebbEntity,
   } from "../helpers/bebb_utils";
 
@@ -50,18 +50,24 @@
 
   const createNewDefaultUserSpace = async (defaultSpace) => {
     setCreationInProgress(defaultSpace);
+    const iframeSrc = `#/${defaultSpace}`;
+    const iframeSelector = `iframe[src='${iframeSrc}']`;
+
     if (defaultSpace === "defaultspace/0") {
       const resp = await fetch("defaultRoom_Web3Cockpit.html"); // Fetches default space 0
       const defaultSpaceHtml = await resp.text();
-      await createSpace(defaultSpaceHtml);
+      const iframeElement = document.querySelector(iframeSelector);
+      await createSpace(defaultSpaceHtml, iframeElement);
     } else if (defaultSpace === "defaultspace/1") {
       const resp = await fetch("defaultRoom_NatureRetreat.html"); // Fetches default space 1
       const defaultSpaceHtml = await resp.text();
-      await createSpace(defaultSpaceHtml);
+      const iframeElement = document.querySelector(iframeSelector);
+      await createSpace(defaultSpaceHtml, iframeElement);
     } else if (defaultSpace === "defaultspace/2") {
       const resp = await fetch("defaultRoom_InternetIsland.html"); // Fetches default space 2
       const defaultSpaceHtml = await resp.text();
-      await createSpace(defaultSpaceHtml);
+      const iframeElement = document.querySelector(iframeSelector);
+      await createSpace(defaultSpaceHtml, iframeElement);
     };
     setSpaceWasCreated();
   };
@@ -159,7 +165,7 @@
     }
   };
 
-  const createSpace = async (spaceHtml) => {
+  const createSpace = async (spaceHtml, iframeElement=null) => {
     try {
       const spaceResponse = await $store.backendActor.createSpace(spaceHtml);
         console.log("Debug createSpace spaceResponse ", spaceResponse);
@@ -202,23 +208,25 @@
         console.log("Debug createSpace spaceEntityIdUpdateResponse ", spaceEntityIdUpdateResponse);
           // @ts-ignore
           if (spaceEntityIdUpdateResponse && spaceEntityIdUpdateResponse.Ok) {
-            // Add image preview to Entity (if a new Entity was created)
-            try {
-              const imageSpacePreview : BebbEntityPreview = await getBebbEntityImagePreviewFromAframeHtml(spaceHtml);
-              console.log("Debug createSpace imageSpacePreview ", imageSpacePreview);
-              entityPreviews.push(imageSpacePreview);
-              const bebbEntityUpdateObject : BebbEntityUpdateObject = {
-                'id' : spaceEntityIdResponse,
-                'previews' : [entityPreviews] as [Array<BebbEntityPreview>],
-                // don't update other fields (thus leave empty)
-                'name' : [],
-                'description' : [],
-                'keywords' : [],
-                'settings' : [],
+            if (iframeElement) {
+              // Add image preview to Entity (if a new Entity was created)
+              try {
+                const imageSpacePreview : BebbEntityPreview = await getBebbEntityImagePreviewFromIframe(iframeElement);
+                console.log("Debug createSpace imageSpacePreview ", imageSpacePreview);
+                entityPreviews.push(imageSpacePreview);
+                const bebbEntityUpdateObject : BebbEntityUpdateObject = {
+                  'id' : spaceEntityIdResponse,
+                  'previews' : [entityPreviews] as [Array<BebbEntityPreview>],
+                  // don't update other fields (thus leave empty)
+                  'name' : [],
+                  'description' : [],
+                  'keywords' : [],
+                  'settings' : [],
+                };
+                const updateBebbEntityResponse = await updateBebbEntity(bebbEntityUpdateObject);   
+              } catch (error) {
+                console.error("Error creating image preview for space: ", error);
               };
-              const updateBebbEntityResponse = await updateBebbEntity(bebbEntityUpdateObject);   
-            } catch (error) {
-              console.error("Error creating image preview for space: ", error);
             };
           } else {
             console.error("Update Space Error: ", spaceEntityIdUpdateResponse);
@@ -238,7 +246,10 @@
     if (modelType === "WebHostedGlbModel" && urlInputHandler(webHostedGlbModelUrl)) {
       setCreationInProgress(modelType);
       const spaceHtml = getStringForSpaceFromModel(webHostedGlbModelUrl);
-      await createSpace(spaceHtml);
+      const iframeId = webHostedGlbModelUrl;
+      const iframeSelector = `iframe[id='${iframeId}']`;
+      const iframeElement = document.querySelector(iframeSelector);
+      await createSpace(spaceHtml, iframeElement);
     };
     // Upload the user's file to the backend canister and create a new space for the user including the uploaded model
     if (modelType === "UserUploadedGlbModel" && userFileInputHandler(files, true) && (fileSizeToUpload <= fileSizeUploadLimit)) {
@@ -257,7 +268,10 @@
           ? `http://127.0.0.1:4943/file/fileId=${fileUploadResult.Ok.FileId}?canisterId=${backendCanisterId}` // e.g. http://127.0.0.1:4943/file/fileId=888?canisterId=bkyz2-fmaaa-aaaaa-qaaaq-cai
           : `https://${backendCanisterId}.raw${appDomain}/file/fileId=${fileUploadResult.Ok.FileId}`; // e.g. https://vee64-zyaaa-aaaai-acpta-cai.raw.ic0.app/file/fileId=777
         const spaceHtml = getStringForSpaceFromModel(url);
-        await createSpace(spaceHtml);
+        const iframeId = userUploadedFileURL;
+        const iframeSelector = `iframe[id='${iframeId}']`;
+        const iframeElement = document.querySelector(iframeSelector);
+        await createSpace(spaceHtml, iframeElement);
       } else {
         console.error("File Upload Error:", fileUploadResult);
       };
@@ -267,7 +281,7 @@
   const createNewUserSpaceFromFile = async () => {
     setCreationInProgress("UserUploadedFile");
     if (fileType === "glbModel") {
-      await createNewUserSpaceFromModel("UserUploadedGlbModel")
+      await createNewUserSpaceFromModel("UserUploadedGlbModel");
     };
     // Upload the user's file to the backend canister and create a new space for the user including the uploaded file
     if (fileType === "mediaContent" && userFileInputHandler(files, true) && (fileSizeToUpload <= fileSizeUploadLimit)) {
@@ -286,7 +300,10 @@
           ? `http://127.0.0.1:4943/file/fileId=${fileUploadResult.Ok.FileId}?canisterId=${backendCanisterId}` // e.g. http://127.0.0.1:4943/file/fileId=888?canisterId=bkyz2-fmaaa-aaaaa-qaaaq-cai
           : `https://${backendCanisterId}.raw${appDomain}/file/fileId=${fileUploadResult.Ok.FileId}`; // e.g. https://vee64-zyaaa-aaaai-acpta-cai.raw.ic0.app/file/fileId=777
         const spaceHtml = getStringForSpaceFromMediaFile(url, files[0].name, is360Degree);
-        await createSpace(spaceHtml);
+        const iframeId = userUploadedFileURL;
+        const iframeSelector = `iframe[id='${iframeId}']`;
+        const iframeElement = document.querySelector(iframeSelector);
+        await createSpace(spaceHtml, iframeElement);
       } else {
         console.error("File Upload Error:", fileUploadResult);
       };
@@ -614,7 +631,6 @@
     </div>
   </div>
 
-
 </section>
 
 <div class='clearfix'></div>

From 343a57143e24a1ab74856cb068f6e3653dddda25 Mon Sep 17 00:00:00 2001
From: patnorris <patrick@DESKTOP-TQ4V8LQ>
Date: Wed, 15 Nov 2023 17:50:05 +0100
Subject: [PATCH 14/18] Clean code

---
 src/PersonalWebSpace_frontend/pages/CreateSpace.svelte | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte b/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
index fa41e07..7319dc8 100644
--- a/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
+++ b/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
@@ -168,7 +168,6 @@
   const createSpace = async (spaceHtml, iframeElement=null) => {
     try {
       const spaceResponse = await $store.backendActor.createSpace(spaceHtml);
-        console.log("Debug createSpace spaceResponse ", spaceResponse);
       // @ts-ignore
       if (spaceResponse && spaceResponse.Ok) {
         // @ts-ignore
@@ -176,7 +175,6 @@
         setSpaceWasCreated();
         // Protocol integration: create Space as Entity in Protocol
         const spaceUrl = `https://${PersonalWebSpace_frontend_canister_id}${appDomain}/#/space/${spaceId}`;
-        console.log("Debug createSpace spaceUrl ", spaceUrl);
         const entitySpecificFields = {
           externalId: spaceUrl,
         };
@@ -188,7 +186,6 @@
         } catch (error) {
           console.error("Error creating url preview for space: ", error);
         };
-        console.log("Debug createSpace entityPreviews after getBebbEntityUrlPreview ", entityPreviews);        
         let entityInitiationObject : BebbEntityInitiationObject = {
           settings: [],
           entityType: { 'Resource' : { 'Web' : null } },
@@ -200,19 +197,16 @@
           previews: [],
         };
         const spaceEntityIdResponse = await createBebbEntity(entityInitiationObject);
-        console.log("Debug createSpace spaceEntityIdResponse ", spaceEntityIdResponse);
         // @ts-ignore
         if (spaceEntityIdResponse) {
           // @ts-ignore
           const spaceEntityIdUpdateResponse = await $store.backendActor.updateSpaceEntityId(spaceId, spaceEntityIdResponse);
-        console.log("Debug createSpace spaceEntityIdUpdateResponse ", spaceEntityIdUpdateResponse);
           // @ts-ignore
           if (spaceEntityIdUpdateResponse && spaceEntityIdUpdateResponse.Ok) {
             if (iframeElement) {
               // Add image preview to Entity (if a new Entity was created)
               try {
                 const imageSpacePreview : BebbEntityPreview = await getBebbEntityImagePreviewFromIframe(iframeElement);
-                console.log("Debug createSpace imageSpacePreview ", imageSpacePreview);
                 entityPreviews.push(imageSpacePreview);
                 const bebbEntityUpdateObject : BebbEntityUpdateObject = {
                   'id' : spaceEntityIdResponse,

From 52ee888a7b7110c48dbebd7507404298d49c5b31 Mon Sep 17 00:00:00 2001
From: patnorris <patrick@DESKTOP-TQ4V8LQ>
Date: Mon, 20 Nov 2023 16:05:05 +0100
Subject: [PATCH 15/18] Add initial layer 2 approach for neighbors

---
 .../components/ProtocolEntity.svelte          | 27 +++++++++++--
 .../components/SpaceNeighbors.svelte          | 39 +++++++++++--------
 .../helpers/bebb_utils.ts                     | 34 +++++++++++-----
 3 files changed, 71 insertions(+), 29 deletions(-)

diff --git a/src/PersonalWebSpace_frontend/components/ProtocolEntity.svelte b/src/PersonalWebSpace_frontend/components/ProtocolEntity.svelte
index d0bf31b..6baee14 100644
--- a/src/PersonalWebSpace_frontend/components/ProtocolEntity.svelte
+++ b/src/PersonalWebSpace_frontend/components/ProtocolEntity.svelte
@@ -6,8 +6,29 @@
   export let deleteSpaceNeighborFunction; // Function passed to delete the link between the Space and the Neighbor
 
 // Helper functions to check whether the Entity has got a valid URL that can be displayed
+  let extractedEntityUrl;
+  const extractUrlFromEntity = (entity) => {
+    try {
+      // Parse the entitySpecificFields as JSON
+      const fields = JSON.parse(entity.entitySpecificFields);
+      // Extract the externalId which contains the URL
+      const url = fields.externalId;
+      return url;
+    } catch (error) {
+      console.error("Error extracting URL: ", error);
+      return null; // or handle the error as needed
+    }
+  };
+
   const entityHasValidUrl = () => {
-    return isValidUrl(entity.entitySpecificFields);
+    console.log("Debug entityHasValidUrl entity ", entity);
+    extractedEntityUrl = extractUrlFromEntity(entity);
+    console.log("Debug entityHasValidUrl extractedEntityUrl ", extractedEntityUrl);
+    if (extractedEntityUrl) {
+      return isValidUrl(extractedEntityUrl);
+    } else {
+      return false;
+    };
   };
 
   const isValidUrl = (url) => {
@@ -47,7 +68,7 @@
 {#if entityHasValidUrl()}
   <div class="space-neighbor-preview space-y-1">
     <a target="_blank" rel="noreferrer" href={entity.entitySpecificFields} >
-      <iframe src={entity.entitySpecificFields} title="Entity Preview" width="100%" height="auto" referrerpolicy="no-referrer" sandbox="allow-scripts allow-same-origin"></iframe>
+      <iframe src={extractedEntityUrl} title="Entity Preview" width="100%" height="auto" referrerpolicy="no-referrer" sandbox="allow-scripts allow-same-origin"></iframe>
     </a>
     <button on:click={() => window.open(entity.entitySpecificFields,'_blank')} class="active-app-button bg-slate-500 text-white py-2 px-4 rounded font-semibold">Visit Neighbor</button>
     {#if viewerIsSpaceOwner}
@@ -66,7 +87,7 @@
     {/if}
     <button type="button" class="space-details-collapsible bg-slate-500 text-white py-2 px-4 rounded font-semibold">See Details</button>
     <div class="space-details-content">
-      <p>Address: {entity.entitySpecificFields}</p>
+      <p>Address: {extractedEntityUrl}</p>
       <p>Owner: {entity.owner}</p>
     </div>
   </div>
diff --git a/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte b/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
index 8ffa04c..c8cca0e 100644
--- a/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
+++ b/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
@@ -13,7 +13,7 @@
         deleteBebbBridgesByOwner,
         getConnectedEntitiesInBebb,
         getBebbEntityUrlPreview,
-        getBebbEntityImagePreviewFromUrl,
+        getBebbEntityImagePreviewFromIframe,
         updateBebbEntity,
     } from "../helpers/bebb_utils";
     import { onMount } from "svelte";
@@ -142,26 +142,32 @@
                 const createBebbEntityAndBridgeResponse = await createBebbEntityAndBridge(entityInitiationObject, bridgeEntityInitiationObject);
                 console.log("Debug submitAddNeighborForm createBebbEntityAndBridgeResponse ", createBebbEntityAndBridgeResponse);
                 if (createBebbEntityAndBridgeResponse) {
-                    successfullyAddedNeighbor = true;
                     if (createBebbEntityAndBridgeResponse.newEntityCreated) { // The Entity did not exist already and it's thus fine to update the previews
                         // Add image preview to Entity (if a new Entity was created)
-                        try {
-                            const imageSpacePreview : BebbEntityPreview = await getBebbEntityImagePreviewFromUrl(spaceUrl);
-                            entityPreviews.push(imageSpacePreview);
-                            const bebbEntityUpdateObject : BebbEntityUpdateObject = {
-                                'id' : createBebbEntityAndBridgeResponse.entityId,
-                                'previews' : [entityPreviews] as [Array<BebbEntityPreview>],
-                                // don't update other fields (thus leave empty)
-                                'name' : [],
-                                'description' : [],
-                                'keywords' : [],
-                                'settings' : [],
+                        // TODO: this doesn't work for external Web resources but only iframes that contain A-Frame scenes (i.e. other spaces)
+                        if (newNeighborUrl) {
+                            try {
+                                const iframeSrc = newNeighborUrl;
+                                const iframeSelector = `iframe[src='${iframeSrc}']`;
+                                const iframeElement = document.querySelector(iframeSelector);
+                                const imageSpacePreview : BebbEntityPreview = await getBebbEntityImagePreviewFromIframe(iframeElement);
+                                entityPreviews.push(imageSpacePreview);
+                                const bebbEntityUpdateObject : BebbEntityUpdateObject = {
+                                    'id' : createBebbEntityAndBridgeResponse.entityId,
+                                    'previews' : [entityPreviews] as [Array<BebbEntityPreview>],
+                                    // don't update other fields (thus leave empty)
+                                    'name' : [],
+                                    'description' : [],
+                                    'keywords' : [],
+                                    'settings' : [],
+                                };
+                                const updateBebbEntityResponse = await updateBebbEntity(bebbEntityUpdateObject); 
+                            } catch (error) {
+                                console.error("Error creating image preview for space: ", error);
                             };
-                            const updateBebbEntityResponse = await updateBebbEntity(bebbEntityUpdateObject);   
-                        } catch (error) {
-                            console.error("Error creating image preview for space: ", error);
                         };
                     };
+                    successfullyAddedNeighbor = true;
                 } else {
                     errorAddingNeighbor = true;
                 };
@@ -250,6 +256,7 @@
         let retrievedNeighborEntities : BebbEntity[] = [];
         try {
             const getConnectedEntitiesResponse = await getConnectedEntitiesInBebb(spaceEntityId, "from", {OwnerCreated: true});
+            console.log("Debug loadSpaceNeighbors getConnectedEntitiesResponse ", getConnectedEntitiesResponse);
             for (var j = 0; j < getConnectedEntitiesResponse.length; j++) {
                 const connectedEntity : BebbEntity = getConnectedEntitiesResponse[j];
                 retrievedNeighborEntities.push(connectedEntity);
diff --git a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
index 720f1ea..7e384ea 100644
--- a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
+++ b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
@@ -83,6 +83,8 @@ export async function createBebbEntityIfNonExistent(entityInitiationObject: Bebb
     criterionKey: "externalId",
     criterionValue: entitySpecificFields.externalId,
   }];
+
+  console.log("Debug createBebbEntityIfNonExistent filterCriteria ", filterCriteria);
   
   const matchResult = await appStore.protocolActor.match_entities(filterCriteria);
 
@@ -183,15 +185,19 @@ export async function deleteBebbBridgesByOwner(bebbBridges: BebbBridge[], ownerI
 };
 
 function extractBridgeIds(bridgesRetrieved: BebbEntityAttachedBridges, filters = {}): string[] {
+  console.log("Debug extractBridgeIds bridgesRetrieved ", bridgesRetrieved);
   var filteredBridges = bridgesRetrieved.filter(bridge => bridge && bridge.id);
+  console.log("Debug extractBridgeIds filteredBridges ", filteredBridges);
   // @ts-ignore
   if (filters && filters.OwnerCreated) {
     filteredBridges = filteredBridges.filter((attachedBridge: BebbEntityAttachedBridge) => attachedBridge.linkStatus.hasOwnProperty('CreatedOwner'));
   };
+  console.log("Debug extractBridgeIds filteredBridges OwnerCreated ", filteredBridges);
   return filteredBridges.map(bridge => bridge.id);    
 };
 
 export async function getConnectedBridgeIdsForEntityInBebb(bebbEntityId: string, bridgingDirection = "from", filters = {}): Promise<string[]> {
+  console.log("Debug getConnectedBridgeIdsForEntityInBebb bebbEntityId ", bebbEntityId);
   if (!appStore) {
     throw new Error("Error in getConnectedBridgeIdsForEntityInBebb: store not initialized");
   };
@@ -204,6 +210,7 @@ export async function getConnectedBridgeIdsForEntityInBebb(bebbEntityId: string,
     } else { // bridgingDirection === "to"
       bridgeIdsResponse = await appStore.protocolActor.get_to_bridge_ids_by_entity_id(bebbEntityId);
     };
+    console.log("Debug getConnectedBridgeIdsForEntityInBebb bridgeIdsResponse ", bridgeIdsResponse);
 
     if (bridgeIdsResponse && bridgeIdsResponse.Ok && bridgeIdsResponse.Ok.length > 0) {
       return extractBridgeIds(bridgeIdsResponse.Ok, filters);
@@ -222,7 +229,7 @@ export async function getBebbBridges(bridgeIds: string[]): Promise<BebbBridge[]>
 
   let getBridgeRequestPromises = [];
   for (var i = 0; i < bridgeIds.length; i++) {
-    if (bridgeIds[i]) { // TODO: filters like bridgesRetrieved[i].linkStatus.hasOwnProperty('CreatedOwner')
+    if (bridgeIds[i]) {
       getBridgeRequestPromises.push(appStore.protocolActor.get_bridge(bridgeIds[i])); // Send requests in parallel and then await all to speed up
     };
   };
@@ -242,11 +249,13 @@ export async function getBebbBridges(bridgeIds: string[]): Promise<BebbBridge[]>
 };
 
 export async function getConnectedBridgesForEntityInBebb(bebbEntityId: string, bridgingDirection = "from", filters = {}): Promise<BebbBridge[]> {
+  console.log("Debug getConnectedBridgesForEntityInBebb bebbEntityId ", bebbEntityId);
   if (!appStore) {
     throw new Error("Error in getConnectedBridgesForEntityInBebb: store not initialized");
   };
   
   const bridgeIds = await getConnectedBridgeIdsForEntityInBebb(bebbEntityId, bridgingDirection, filters);
+  console.log("Debug getConnectedBridgesForEntityInBebb bridgeIds ", bridgeIds);
   return getBebbBridges(bridgeIds);
 };
 
@@ -267,14 +276,18 @@ async function getBebbEntities(entityIds: string[]) : Promise<BebbEntity[]> {
 };
 
 export async function getConnectedEntitiesInBebb(bebbEntityId: string, bridgingDirection = "from", filters = {}) : Promise<BebbEntity[]> {
+  console.log("Debug getConnectedEntitiesInBebb bebbEntityId ", bebbEntityId);
   if (!appStore) {
     throw new Error("Error in getConnectedEntitiesInBebb: store not initialized");
   };
 
   try {
     const getBridgesResponse = await getConnectedBridgesForEntityInBebb(bebbEntityId, bridgingDirection, filters);
+    console.log("Debug getConnectedEntitiesInBebb getBridgesResponse ", getBridgesResponse);
     const entityIds = getBridgesResponse.map((bridge: BebbBridge) => bridgingDirection === "from" ? bridge.toEntityId : bridge.fromEntityId);
+    console.log("Debug getConnectedEntitiesInBebb entityIds ", entityIds);
     const connectedEntities = await getBebbEntities(entityIds);
+    console.log("Debug getConnectedEntitiesInBebb connectedEntities ", connectedEntities);
     return connectedEntities;
   } catch (error) {
     console.error("Error Getting Connected Entities in Bebb ", error);
@@ -368,7 +381,7 @@ function displayImageInPopup(screenshotArray) {
   };
 };
 
-async function captureAFrameScene(spaceHtml) {
+async function captureAFrameScene(spaceHtml) : Promise<Uint8Array> {
   console.log("Debug captureAFrameScene");
   return new Promise(async (resolve, reject) => {
     // Store the original overflow value
@@ -433,7 +446,7 @@ export async function getBebbEntityImagePreviewFromAframeHtml(sceneHtml: string)
   return imageSpacePreview;
 };
 
-async function captureAFrameSceneFromIframe(iframe) {
+async function captureAFrameSceneFromIframe(iframe) : Promise<Uint8Array> {
   return new Promise(async (resolve, reject) => {
     try {
       // Ensure the iframe's content is fully loaded
@@ -456,8 +469,6 @@ async function captureAFrameSceneFromIframe(iframe) {
       const screenshotCanvas = sceneEl.components.screenshot.getCanvas('perspective');
       const screenshotArray = await getUint8ArrayFromCanvas(screenshotCanvas);
 
-      displayImageInPopup(screenshotArray); // TODO: remove
-
       resolve(screenshotArray);
     } catch (error) {
       console.error("Error capturing A-Frame scene from iframe: ", error);
@@ -482,21 +493,24 @@ export async function getBebbEntityImagePreviewFromIframe(iframe) : Promise<Bebb
 };
 
 async function captureImageOfAFrameSceneFromUrl(url: string) : Promise<Uint8Array> {
+  // Currently doesn't work properly as the url has to point to an A-Frame scene and we don't await until the scene is loaded in the iframe
+  console.log("Debug captureImageOfAFrameSceneFromUrl url ", url);
   return new Promise(async (resolve, reject) => {
     let iframe = document.createElement('iframe');
     iframe.src = url;
     iframe.style.display = "none";
     document.body.appendChild(iframe);
+    console.log("Debug captureImageOfAFrameSceneFromUrl iframe ", iframe);
 
     iframe.onload = async () => {
+      console.log("Debug captureImageOfAFrameSceneFromUrl onload ");
       try {
         // @ts-ignore
         let canvas = iframe.contentDocument.querySelector('a-scene').components.screenshot.getCanvas('perspective');
-        // @ts-ignore
-        let blob : Blob = await canvasToBlob(canvas);
-        let arrayBuffer = await blob.arrayBuffer();
-        document.body.removeChild(iframe);
-        resolve(new Uint8Array(arrayBuffer));
+        console.log("Debug captureImageOfAFrameSceneFromUrl canvas ", canvas);
+        const screenshotArray = await getUint8ArrayFromCanvas(canvas);
+        displayImageInPopup(screenshotArray); // TODO: remove
+        resolve(screenshotArray);
       } catch (err) {
         console.error("Error capturing image from A-Frame scene: " + err);
         reject("Error capturing image from A-Frame scene: " + err);

From f5672e76800805f30a6981635a912438ae283995 Mon Sep 17 00:00:00 2001
From: patnorris <patrick@DESKTOP-TQ4V8LQ>
Date: Mon, 20 Nov 2023 16:29:38 +0100
Subject: [PATCH 16/18] Fix Neighbor URL

---
 .../components/ProtocolEntity.svelte                          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/PersonalWebSpace_frontend/components/ProtocolEntity.svelte b/src/PersonalWebSpace_frontend/components/ProtocolEntity.svelte
index 6baee14..da501fb 100644
--- a/src/PersonalWebSpace_frontend/components/ProtocolEntity.svelte
+++ b/src/PersonalWebSpace_frontend/components/ProtocolEntity.svelte
@@ -67,10 +67,10 @@
 
 {#if entityHasValidUrl()}
   <div class="space-neighbor-preview space-y-1">
-    <a target="_blank" rel="noreferrer" href={entity.entitySpecificFields} >
+    <a target="_blank" rel="noreferrer" href={extractedEntityUrl} >
       <iframe src={extractedEntityUrl} title="Entity Preview" width="100%" height="auto" referrerpolicy="no-referrer" sandbox="allow-scripts allow-same-origin"></iframe>
     </a>
-    <button on:click={() => window.open(entity.entitySpecificFields,'_blank')} class="active-app-button bg-slate-500 text-white py-2 px-4 rounded font-semibold">Visit Neighbor</button>
+    <button on:click={() => window.open(extractedEntityUrl,'_blank')} class="active-app-button bg-slate-500 text-white py-2 px-4 rounded font-semibold">Visit Neighbor</button>
     {#if viewerIsSpaceOwner}
       {#if linkDeletionInProgress}
         <button disabled class="bg-slate-500 text-white py-2 px-4 rounded font-bold opacity-50 cursor-not-allowed">Deleting...</button>

From bfb95bd3335d7b881cc6c32c74d9ce57930f72d3 Mon Sep 17 00:00:00 2001
From: patnorris <patrick@DESKTOP-TQ4V8LQ>
Date: Mon, 20 Nov 2023 16:36:47 +0100
Subject: [PATCH 17/18] Clean code

---
 .../components/ProtocolEntity.svelte          |  2 -
 .../components/SpaceNeighbors.svelte          |  9 -----
 .../helpers/bebb_utils.ts                     | 37 +------------------
 3 files changed, 1 insertion(+), 47 deletions(-)

diff --git a/src/PersonalWebSpace_frontend/components/ProtocolEntity.svelte b/src/PersonalWebSpace_frontend/components/ProtocolEntity.svelte
index da501fb..0e22737 100644
--- a/src/PersonalWebSpace_frontend/components/ProtocolEntity.svelte
+++ b/src/PersonalWebSpace_frontend/components/ProtocolEntity.svelte
@@ -21,9 +21,7 @@
   };
 
   const entityHasValidUrl = () => {
-    console.log("Debug entityHasValidUrl entity ", entity);
     extractedEntityUrl = extractUrlFromEntity(entity);
-    console.log("Debug entityHasValidUrl extractedEntityUrl ", extractedEntityUrl);
     if (extractedEntityUrl) {
       return isValidUrl(extractedEntityUrl);
     } else {
diff --git a/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte b/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
index c8cca0e..9dd5839 100644
--- a/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
+++ b/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
@@ -81,17 +81,11 @@
 
 // Owner submitted form to create a new space neighbor
     const submitAddNeighborForm = async () => {
-        // TODO: clicking button has no effect
-        console.log("Debug submitAddNeighborForm");
         neighborCreationInProgress = true;
         const spaceEntityId = extractSpaceEntityId();
-        console.log("Debug submitAddNeighborForm spaceEntityId ", spaceEntityId);
-        console.log("Debug submitAddNeighborForm newNeighborUrl ", newNeighborUrl);
-        console.log("Debug submitAddNeighborForm neighborUrlInputHandler(newNeighborUrl) ", neighborUrlInputHandler(newNeighborUrl));
         if (neighborUrlInputHandler(newNeighborUrl) && spaceEntityId) {
             // Create Neighbor connection as Bridge from Space in Bebb Protocol
             const spaceUrl = newNeighborUrl.replace(/\/+$/, ""); // strip any trailing slashes
-        console.log("Debug submitAddNeighborForm spaceUrl ", spaceUrl);
             const entitySpecificFields = {
                 externalId: spaceUrl,
             };
@@ -103,7 +97,6 @@
             } catch (error) {
                 console.error("Error creating url preview for space: ", error);
             };
-            console.log("Debug submitAddNeighborForm entityPreviews ", entityPreviews);
             
             const entityInitiationObject : BebbEntityInitiationObject = {
                 settings: [],
@@ -140,7 +133,6 @@
             };
             try {
                 const createBebbEntityAndBridgeResponse = await createBebbEntityAndBridge(entityInitiationObject, bridgeEntityInitiationObject);
-                console.log("Debug submitAddNeighborForm createBebbEntityAndBridgeResponse ", createBebbEntityAndBridgeResponse);
                 if (createBebbEntityAndBridgeResponse) {
                     if (createBebbEntityAndBridgeResponse.newEntityCreated) { // The Entity did not exist already and it's thus fine to update the previews
                         // Add image preview to Entity (if a new Entity was created)
@@ -256,7 +248,6 @@
         let retrievedNeighborEntities : BebbEntity[] = [];
         try {
             const getConnectedEntitiesResponse = await getConnectedEntitiesInBebb(spaceEntityId, "from", {OwnerCreated: true});
-            console.log("Debug loadSpaceNeighbors getConnectedEntitiesResponse ", getConnectedEntitiesResponse);
             for (var j = 0; j < getConnectedEntitiesResponse.length; j++) {
                 const connectedEntity : BebbEntity = getConnectedEntitiesResponse[j];
                 retrievedNeighborEntities.push(connectedEntity);
diff --git a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
index 7e384ea..ffbb6d0 100644
--- a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
+++ b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
@@ -43,12 +43,10 @@ export async function createBebbEntity(entityInitiationObject: BebbEntityInitiat
 };
 
 export async function updateBebbEntity(entityUpdateObject: BebbEntityUpdateObject) {
-  console.log("Debug updateBebbEntity entityUpdateObject ", entityUpdateObject);
   if (!appStore) {
     throw new Error("Error in updateBebbEntity: store not initialized");
   };
   const updateEntityResponse = await appStore.protocolActor.update_entity(entityUpdateObject);
-  console.log("Debug updateBebbEntity updateEntityResponse ", updateEntityResponse);
   // @ts-ignore
   if (updateEntityResponse && updateEntityResponse.Ok) {
     return updateEntityResponse.Ok;
@@ -83,8 +81,6 @@ export async function createBebbEntityIfNonExistent(entityInitiationObject: Bebb
     criterionKey: "externalId",
     criterionValue: entitySpecificFields.externalId,
   }];
-
-  console.log("Debug createBebbEntityIfNonExistent filterCriteria ", filterCriteria);
   
   const matchResult = await appStore.protocolActor.match_entities(filterCriteria);
 
@@ -185,19 +181,15 @@ export async function deleteBebbBridgesByOwner(bebbBridges: BebbBridge[], ownerI
 };
 
 function extractBridgeIds(bridgesRetrieved: BebbEntityAttachedBridges, filters = {}): string[] {
-  console.log("Debug extractBridgeIds bridgesRetrieved ", bridgesRetrieved);
   var filteredBridges = bridgesRetrieved.filter(bridge => bridge && bridge.id);
-  console.log("Debug extractBridgeIds filteredBridges ", filteredBridges);
   // @ts-ignore
   if (filters && filters.OwnerCreated) {
     filteredBridges = filteredBridges.filter((attachedBridge: BebbEntityAttachedBridge) => attachedBridge.linkStatus.hasOwnProperty('CreatedOwner'));
   };
-  console.log("Debug extractBridgeIds filteredBridges OwnerCreated ", filteredBridges);
   return filteredBridges.map(bridge => bridge.id);    
 };
 
 export async function getConnectedBridgeIdsForEntityInBebb(bebbEntityId: string, bridgingDirection = "from", filters = {}): Promise<string[]> {
-  console.log("Debug getConnectedBridgeIdsForEntityInBebb bebbEntityId ", bebbEntityId);
   if (!appStore) {
     throw new Error("Error in getConnectedBridgeIdsForEntityInBebb: store not initialized");
   };
@@ -210,7 +202,6 @@ export async function getConnectedBridgeIdsForEntityInBebb(bebbEntityId: string,
     } else { // bridgingDirection === "to"
       bridgeIdsResponse = await appStore.protocolActor.get_to_bridge_ids_by_entity_id(bebbEntityId);
     };
-    console.log("Debug getConnectedBridgeIdsForEntityInBebb bridgeIdsResponse ", bridgeIdsResponse);
 
     if (bridgeIdsResponse && bridgeIdsResponse.Ok && bridgeIdsResponse.Ok.length > 0) {
       return extractBridgeIds(bridgeIdsResponse.Ok, filters);
@@ -249,13 +240,11 @@ export async function getBebbBridges(bridgeIds: string[]): Promise<BebbBridge[]>
 };
 
 export async function getConnectedBridgesForEntityInBebb(bebbEntityId: string, bridgingDirection = "from", filters = {}): Promise<BebbBridge[]> {
-  console.log("Debug getConnectedBridgesForEntityInBebb bebbEntityId ", bebbEntityId);
   if (!appStore) {
     throw new Error("Error in getConnectedBridgesForEntityInBebb: store not initialized");
   };
   
   const bridgeIds = await getConnectedBridgeIdsForEntityInBebb(bebbEntityId, bridgingDirection, filters);
-  console.log("Debug getConnectedBridgesForEntityInBebb bridgeIds ", bridgeIds);
   return getBebbBridges(bridgeIds);
 };
 
@@ -276,18 +265,14 @@ async function getBebbEntities(entityIds: string[]) : Promise<BebbEntity[]> {
 };
 
 export async function getConnectedEntitiesInBebb(bebbEntityId: string, bridgingDirection = "from", filters = {}) : Promise<BebbEntity[]> {
-  console.log("Debug getConnectedEntitiesInBebb bebbEntityId ", bebbEntityId);
   if (!appStore) {
     throw new Error("Error in getConnectedEntitiesInBebb: store not initialized");
   };
 
   try {
     const getBridgesResponse = await getConnectedBridgesForEntityInBebb(bebbEntityId, bridgingDirection, filters);
-    console.log("Debug getConnectedEntitiesInBebb getBridgesResponse ", getBridgesResponse);
     const entityIds = getBridgesResponse.map((bridge: BebbBridge) => bridgingDirection === "from" ? bridge.toEntityId : bridge.fromEntityId);
-    console.log("Debug getConnectedEntitiesInBebb entityIds ", entityIds);
     const connectedEntities = await getBebbEntities(entityIds);
-    console.log("Debug getConnectedEntitiesInBebb connectedEntities ", connectedEntities);
     return connectedEntities;
   } catch (error) {
     console.error("Error Getting Connected Entities in Bebb ", error);
@@ -363,14 +348,12 @@ function displayImageInPopup(screenshotArray) {
 
   // Create an Object URL for the blob
   const imageUrl = URL.createObjectURL(blob);
-  console.log("Debug captureAFrameScene imageUrl ", imageUrl);
 
   // Open a new popup window
   const popup = window.open('', 'Image Preview', 'width=600,height=400');
 
   // Check if the popup was successfully opened
   if (popup) {
-    console.log("Debug captureAFrameScene popup");
     // Write the HTML content for the new window
     popup.document.write(`<html><head><title>Image Preview</title></head><body><img src="${imageUrl}" onload="window.URL.revokeObjectURL('${imageUrl}')" style="max-width:100%;"></body></html>`);
     
@@ -382,7 +365,6 @@ function displayImageInPopup(screenshotArray) {
 };
 
 async function captureAFrameScene(spaceHtml) : Promise<Uint8Array> {
-  console.log("Debug captureAFrameScene");
   return new Promise(async (resolve, reject) => {
     // Store the original overflow value
     const originalOverflow = document.body.style.overflow;
@@ -398,7 +380,6 @@ async function captureAFrameScene(spaceHtml) : Promise<Uint8Array> {
     container.style.width = '1px';  // Minimize size
     container.style.height = '1px';
     container.innerHTML = spaceHtml;
-    console.log("Debug captureAFrameScene container ", container);
     document.body.appendChild(container);
 
     const sceneEl = container.querySelector('a-scene');
@@ -408,21 +389,16 @@ async function captureAFrameScene(spaceHtml) : Promise<Uint8Array> {
     if (!sceneEl.hasLoaded) {
       await new Promise(resolve => sceneEl.addEventListener('loaded', resolve));
     };
-    console.log("Debug captureAFrameScene sceneEl.hasLoaded ", sceneEl.hasLoaded);
     // Wait until assets have loaded
     let assetsEl = sceneEl.querySelector('a-assets');
-    console.log("Debug captureAFrameScene assetsEl ", assetsEl);
     await new Promise(resolve =>
       setTimeout(() => {
-        console.log("Debug captureAFrameScene setTimeout");
         resolve("");
       }, 3000)
     );
     // @ts-ignore
     const screenshotCanvas = sceneEl.components.screenshot.getCanvas('perspective');
-    console.log("Debug captureAFrameScene screenshotCanvas ", screenshotCanvas);
     const screenshotArray = await getUint8ArrayFromCanvas(screenshotCanvas);
-    console.log("Debug captureAFrameScene screenshotArray ", screenshotArray);
     displayImageInPopup(screenshotArray);
 
     document.body.removeChild(container);
@@ -434,15 +410,12 @@ async function captureAFrameScene(spaceHtml) : Promise<Uint8Array> {
 };
 
 export async function getBebbEntityImagePreviewFromAframeHtml(sceneHtml: string) : Promise<BebbEntityPreview> {
-  console.log("Debug getBebbEntityImagePreviewFromAframeHtml");
   // @ts-ignore
   const imageData : Uint8Array = await captureAFrameScene(sceneHtml);
-  console.log("Debug getBebbEntityImagePreviewFromAframeHtml imageData ", imageData);
   const imageSpacePreview : BebbEntityPreview = {
     'previewData': imageData,
     'previewType': { 'Jpg' : null },
   };
-  console.log("Debug getBebbEntityImagePreviewFromAframeHtml imageSpacePreview ", imageSpacePreview);
   return imageSpacePreview;
 };
 
@@ -478,38 +451,30 @@ async function captureAFrameSceneFromIframe(iframe) : Promise<Uint8Array> {
 };
 
 export async function getBebbEntityImagePreviewFromIframe(iframe) : Promise<BebbEntityPreview> {
-  console.log("Debug getBebbEntityImagePreviewFromIframe");
   // @ts-ignore
   const imageData : Uint8Array = await captureAFrameSceneFromIframe(iframe);
-  console.log("Debug getBebbEntityImagePreviewFromIframe imageData ", imageData);
 
   const imageSpacePreview : BebbEntityPreview = {
     'previewData': imageData,
     'previewType': { 'Jpg' : null },
   };
-
-  console.log("Debug getBebbEntityImagePreviewFromIframe imageSpacePreview ", imageSpacePreview);
   return imageSpacePreview;
 };
 
 async function captureImageOfAFrameSceneFromUrl(url: string) : Promise<Uint8Array> {
   // Currently doesn't work properly as the url has to point to an A-Frame scene and we don't await until the scene is loaded in the iframe
-  console.log("Debug captureImageOfAFrameSceneFromUrl url ", url);
   return new Promise(async (resolve, reject) => {
     let iframe = document.createElement('iframe');
     iframe.src = url;
     iframe.style.display = "none";
     document.body.appendChild(iframe);
-    console.log("Debug captureImageOfAFrameSceneFromUrl iframe ", iframe);
 
     iframe.onload = async () => {
-      console.log("Debug captureImageOfAFrameSceneFromUrl onload ");
       try {
         // @ts-ignore
         let canvas = iframe.contentDocument.querySelector('a-scene').components.screenshot.getCanvas('perspective');
-        console.log("Debug captureImageOfAFrameSceneFromUrl canvas ", canvas);
         const screenshotArray = await getUint8ArrayFromCanvas(canvas);
-        displayImageInPopup(screenshotArray); // TODO: remove
+        //displayImageInPopup(screenshotArray);
         resolve(screenshotArray);
       } catch (err) {
         console.error("Error capturing image from A-Frame scene: " + err);

From 3aa7e2765a7101be9efb537b8231802f08d57a7f Mon Sep 17 00:00:00 2001
From: patnorris <patrick@DESKTOP-TQ4V8LQ>
Date: Wed, 22 Nov 2023 17:39:10 +0100
Subject: [PATCH 18/18] Finalize first Layer 2 version

---
 .../components/SpaceNeighbors.svelte                        | 6 ++----
 src/PersonalWebSpace_frontend/helpers/bebb_utils.ts         | 2 +-
 src/PersonalWebSpace_frontend/pages/CreateSpace.svelte      | 3 +--
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte b/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
index 9dd5839..af3c478 100644
--- a/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
+++ b/src/PersonalWebSpace_frontend/components/SpaceNeighbors.svelte
@@ -97,7 +97,6 @@
             } catch (error) {
                 console.error("Error creating url preview for space: ", error);
             };
-            
             const entityInitiationObject : BebbEntityInitiationObject = {
                 settings: [],
                 entityType: { 'Resource' : { 'Web' : null } },
@@ -105,8 +104,7 @@
                 description: [`Created as a Space Neighbor in the Open Internet Metaverse at https://${PersonalWebSpace_frontend_canister_id}${appDomain}/`] as [string],
                 keywords: [["Space Neighbor", "Open Internet Metaverse", "Virtual Neighborhood"]] as [Array<string>],
                 entitySpecificFields: [JSON.stringify(entitySpecificFields)] as [string],
-                //previews: [entityPreviews] as [Array<BebbEntityPreview>], // TODO: causes error in createBebbEntity call (invalid record)
-                previews: [],
+                previews: [entityPreviews] as [Array<BebbEntityPreview>],
             };
 
             const bridgePresentationMetadata = {
@@ -248,7 +246,7 @@
         let retrievedNeighborEntities : BebbEntity[] = [];
         try {
             const getConnectedEntitiesResponse = await getConnectedEntitiesInBebb(spaceEntityId, "from", {OwnerCreated: true});
-            for (var j = 0; j < getConnectedEntitiesResponse.length; j++) {
+        for (var j = 0; j < getConnectedEntitiesResponse.length; j++) {
                 const connectedEntity : BebbEntity = getConnectedEntitiesResponse[j];
                 retrievedNeighborEntities.push(connectedEntity);
             };
diff --git a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
index ffbb6d0..bbdf781 100644
--- a/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
+++ b/src/PersonalWebSpace_frontend/helpers/bebb_utils.ts
@@ -77,7 +77,7 @@ export async function createBebbEntityIfNonExistent(entityInitiationObject: Bebb
   
   // Check that Entity doesn't already exist in Bebb
   const entitySpecificFields = JSON.parse(entityInitiationObject.entitySpecificFields[0]);
-  const filterCriteria: BebbEntityFilterCriterion[] = [{
+  const filterCriteria : BebbEntityFilterCriterion[] = [{
     criterionKey: "externalId",
     criterionValue: entitySpecificFields.externalId,
   }];
diff --git a/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte b/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
index 7319dc8..7cfe66a 100644
--- a/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
+++ b/src/PersonalWebSpace_frontend/pages/CreateSpace.svelte
@@ -193,8 +193,7 @@
           description: ["Flaming Hot Personal Web Space"],
           keywords: [["NFT", "Space", "Open Internet Metaverse", "heeyah"]] as [Array<string>],
           entitySpecificFields: [JSON.stringify(entitySpecificFields)] as [string],
-          //previews: [entityPreviews] as [Array<BebbEntityPreview>], // TODO: causes error in createBebbEntity call (invalid record)
-          previews: [],
+          previews: [entityPreviews] as [Array<BebbEntityPreview>],
         };
         const spaceEntityIdResponse = await createBebbEntity(entityInitiationObject);
         // @ts-ignore