add TerminusDB

fission.yaml

@@ -1,3 +1,3 @@
 ignore: []
-url: webnative-template.fission.app
-build: ./build
+url: thick-nylon-eagle.fission.app
+build: ./build

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "webnative-app-template",
+  "name": "myseelia",
   "version": "0.1.0",
   "scripts": {
     "dev": "vite dev",
@@ -12,6 +12,7 @@
     "format": "prettier --write --plugin-search-dir=. ."
   },
   "devDependencies": {
+    "@terminusdb/terminusdb-client": "^10.0.25",
     "@sveltejs/adapter-static": "1.0.0-next.43",
     "@sveltejs/kit": "1.0.0-next.489",
     "@tailwindcss/typography": "^0.5.2",

src/components/home/Authed.svelte

@@ -8,12 +8,10 @@
   <h1 class="text-xl">Welcome, {$sessionStore.username}!</h1>
 
   <div class="flex flex-col items-start justify-center gap-5">
-    <h2 class="text-lg">Photo Gallery Demo</h2>
     <p>
-      Webnative makes it easy to implement private, encrypted, user-owned
-      storage in your app. See it in action with our photo gallery demo.
+      Myseelia is a decentralized knowledge graph for collective intelligence.
     </p>
-    <a class="btn btn-primary" href="/gallery">Try the Photo Gallery Demo</a>
+    <a class="btn btn-primary" href="/gallery">Try the Myseelia App</a>
   </div>
 
   <div class="flex flex-col items-start justify-center gap-5">

src/components/nav/SidebarNav.svelte

@@ -17,7 +17,7 @@
       icon: Home
     },
     {
-      label: 'Photo Gallery Demo',
+      label: 'Myseelia',
       href: '/gallery/',
       icon: PhotoGallery
     },

src/lib/app-info.ts

@@ -1,5 +1,5 @@
-export const appName = 'Webnative SDK Demo'
-export const appDescription = 'This is another awesome Webnative app.'
+export const appName = 'Myseelia'
+export const appDescription = 'Knowledge Network for Collective Intelligence.'
 export const appURL = 'https://webnative.netlify.app'
 export const appImageURL = `${appURL}/preview.png`
 export const ipfsGatewayUrl = 'runfission.com'

src/routes/gallery/+page.svelte

@@ -6,6 +6,7 @@
   import { AREAS, galleryStore } from '$routes/gallery/stores'
   import Dropzone from '$routes/gallery/components/upload/Dropzone.svelte'
   import ImageGallery from '$routes/gallery/components/imageGallery/ImageGallery.svelte'
+  import MyseeliaPublic from '$routes/gallery/components/imageGallery/MyseeliaPublic.svelte'
 
   /**
    * Tab between the public/private areas and load associated images
@@ -39,7 +40,7 @@
               ? 'tab-active bg-base-content text-base-100'
               : 'bg-base-100 text-base-content'}"
           >
-            {AREAS[area]} Photos
+            {AREAS[area]} Data
           </button>
         {/each}
       </div>

src/routes/gallery/components/imageGallery/ImageGallery.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onDestroy } from 'svelte'
 
+  import TerminusClient from "@terminusdb/terminusdb-client";
   import { filesystemStore, sessionStore } from '$src/stores'
   import { AREAS, galleryStore } from '$routes/gallery/stores'
   import { getImagesFromWNFS, type Image } from '$routes/gallery/lib/gallery'
@@ -46,6 +47,38 @@
     unsubscribeGalleryStore()
     unsubscribeSessionStore()
   })
+
+  let bioregion = '';
+  let ecozone = '';
+  let skills = '';
+  let interests = '';
+  let associatedOrganizations = '';
+
+  function handleSubmit() {
+    alert("submitted");
+    makeConnection();
+  }
+
+  export async function makeConnection(){
+    try{
+  const client = new TerminusClient.WOQLClient(
+              "https://cloud.terminusdb.com/Myseelia",{
+                user:"zaldarren@gmail.com",
+                organization:"Myseelia",
+                token: "dGVybWludXNkYjovLy9kYXRhL2tleXNfYXBpLzg5OTY0ZGI5OWFlYjQ1Zjc5OGM5ZTRiZWI2MzExOGJhZjhiOWRiOWNlOTJiNmU2NGI0NDEzZjIzNDFmOGVkMjc=_869e9bd2465ad84126151962994fcfa22d4b7ec9375edf16b4182e7f36e4b2b820075ba22e78f629e0691eddbeae6998a6504d5ce287aa1df2602cb556b58e1730b0b93feb0e9304"
+              }
+            );
+      await client.connect()
+      const schema = await client.getSchema("myseelia", "main")
+      console.log("Schema");
+      console.log(schema);
+      const entries = await client.getDocument({"graph_type":"instance","as_list":true,"type":"Entry"})
+      console.log("Entries");
+      console.log(entries);
+    }catch(err){
+        console.error(err.message)
+    }
+  }
 </script>
 
 <section class="overflow-hidden text-gray-700">
@@ -53,11 +86,36 @@
     <div
       class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:lg:grid-cols-6 gap-4"
     >
-      <FileUploadCard />
-      {#each $galleryStore.selectedArea === AREAS.PRIVATE ? $galleryStore.privateImages : $galleryStore.publicImages as image}
-        <ImageCard {image} openModal={setSelectedImage} />
-      {/each}
+      {#each $galleryStore.selectedArea === AREAS.PRIVATE ? $galleryStore.privateImages : $galleryStore.publicImages as image}{/each}
     </div>
+    <form on:submit|preventDefault={handleSubmit}>
+      <label>
+        Bioregion:
+        <input type="text" bind:value={bioregion} />
+      </label>
+      <br />
+      <label>
+        Ecozone:
+        <input type="text" bind:value={ecozone} />
+      </label>
+      <br />
+      <label>
+        Skills:
+        <input type="text" bind:value={skills} />
+      </label>
+      <br />
+      <label>
+        Interests:
+        <input type="text" bind:value={interests} />
+      </label>
+      <br />
+      <label>
+        Associated organizations:
+        <input type="text" bind:value={associatedOrganizations} />
+      </label>
+      <br />
+      <button type="submit">Submit</button>
+    </form>
   </div>
 
   {#if selectedImage}

src/routes/gallery/components/imageGallery/MyseeliaPublic.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import TerminusClient from "@terminusdb/terminusdb-client";
+  import { onDestroy } from 'svelte'
+
+  import { filesystemStore, sessionStore } from '$src/stores'
+  import { AREAS, galleryStore } from '$routes/gallery/stores'
+  import { getImagesFromWNFS, type Image } from '$routes/gallery/lib/gallery'
+  import FileUploadCard from '$routes/gallery/components/upload/FileUploadCard.svelte'
+  import ImageCard from '$routes/gallery/components/imageGallery/ImageCard.svelte'
+  import ImageModal from '$routes/gallery/components/imageGallery/ImageModal.svelte'  
+
+  /**
+   * Open the ImageModal and pass it the selected `image` from the gallery
+   * @param image
+   */
+  let selectedImage: Image
+  const setSelectedImage: (image: Image) => void = image =>
+    (selectedImage = image)
+
+  // If galleryStore.selectedArea changes from private to public, re-run getImagesFromWNFS
+  let selectedArea = null
+  const unsubscribeGalleryStore = galleryStore.subscribe(async updatedStore => {
+    // Get initial selectedArea
+    if (!selectedArea) {
+      selectedArea = updatedStore.selectedArea
+    }
+
+    if (selectedArea !== updatedStore.selectedArea) {
+      selectedArea = updatedStore.selectedArea
+    }
+  })
+
+  // Once the user has been authed, fetch the images from their file system
+  let imagesFetched = false
+  const unsubscribeSessionStore = sessionStore.subscribe((newState) => {
+    if (newState.authed && $filesystemStore && !imagesFetched) {
+      imagesFetched = true
+      // Get images from the user's public WNFS
+      getImagesFromWNFS()
+    }
+  })
+
+  onDestroy(() => {
+    unsubscribeGalleryStore()
+    unsubscribeSessionStore()
+  })
+
+  
+</script>
+
+
+
+<section class="overflow-hidden text-gray-700">
+  <div class="pt-8 p-6 md:p-8 mx-auto">
+    <div
+      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:lg:grid-cols-6 gap-4"
+    >
+      <FileUploadCard />
+      {#each $galleryStore.selectedArea === AREAS.PRIVATE ? $galleryStore.privateImages : $galleryStore.publicImages as image}
+        <ImageCard {image} openModal={setSelectedImage} />
+      {/each}
+    </div>
+  </div>
+
+  {#if selectedImage}
+    <ImageModal
+      image={selectedImage}
+      isModalOpen={!!selectedImage}
+      on:close={clearSelectedImage}
+    />
+  {/if}
+</section>