update

earthpulse · Jan 20, 2025 · 8cb80e2 · 8cb80e2
1 parent 57d0b77
commit 8cb80e2
Show file tree

Hide file tree

Showing 11 changed files with 76 additions and 50 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -56,4 +56,4 @@
     "turndown": "^7.2.0",
     "turndown-plugin-gfm": "^1.0.2"
   }
-}
+}
diff --git a/ui/src/components/FileExplorer.svelte b/ui/src/components/FileExplorer.svelte
@@ -10,15 +10,16 @@
 	import { onMount } from "svelte";
 	import Map from "$components/Map.svelte";
 	import { Carta } from "carta-md";
-	import DOMPurify from "isomorphic-dompurify";
+	// import DOMPurify from "isomorphic-dompurify";
 	import "$styles/file-explorer-md.css";
 	import { BasicTable } from "csv2table";
 	import JSONTree from "svelte-json-tree";
 	import "$styles/preview-tables.css";
 
+	let DOMPurify;
 	const carta = new Carta({
 		extensions: [],
-		sanitizer: DOMPurify.sanitize,
+		sanitizer: DOMPurify?.sanitize,
 	});
 
 	let allowedExtensions = {
@@ -88,8 +89,10 @@
 
 	let currentBlob;
 	let currentFormat;
+
 	onMount(async () => {
 		if (browser) {
+			DOMPurify = await import("isomorphic-dompurify");
 			// only works in browser
 			const streamsaver = await import("streamsaver");
 			createWriteStream = streamsaver.createWriteStream;

diff --git a/ui/src/routes/applications/+page.svelte b/ui/src/routes/applications/+page.svelte
@@ -11,8 +11,8 @@
 			name: "SCANEO",
 			thumbnail: "/applications/scaneo.png",
 			description:
-				"SCANEO is a web-based application that allows users to visualize and labell satellite data, with tight integration with the EOTDL API and AI assited capabilities for Active Learning.",
-			link: "https://pypi.org/project/scaneo/",
+				"SCANEO is a web-based application that allows users to visualize and labell satellite data, with tight integration with the EOTDL API and AI assited capabilities for Active Learning. Learn more <a href='https://github.com/earthpulse/scaneo' target='_blank' class='underline'>here</a>. <b>IMPORTANT:</b> SCANEO is only available in the EOTDL Cloud Workspace for Premium users.",
+			link: "https://hub.api.eotdl.com/services/eoxhub-gateway/eotdl/scaneo/",
 		},
 		{
 			name: "AI4EO Challenges",
@@ -57,7 +57,9 @@
 							src={application.thumbnail}
 							alt={application.name}
 						/>
-						<p class="mb-2 text-sm">{application.description}</p>
+						<p class="mb-2 text-sm">
+							{@html application.description}
+						</p>
 					</div>
 					<div class="text-right">
 						<a

diff --git a/ui/src/routes/datasets/+page.svelte b/ui/src/routes/datasets/+page.svelte
@@ -4,15 +4,14 @@
 	import Card from "$components/Card.svelte";
 	import HeartOutline from "svelte-material-icons/HeartOutline.svelte";
 	import { browser } from "$app/environment";
-	// import Ingest from "./Ingest.svelte";
+	import Ingest from "./Ingest.svelte";
 	import Pagination from "$components/Pagination.svelte";
 	import Tags from "$components/Tags.svelte";
 	import Skeleton from "$components/Skeleton.svelte";
 	import DatasetsLeaderboard from "../DatasetsLeaderboard.svelte";
 	import QualitySelector from "$components/QualitySelector.svelte";
-	import Ingest from "./Ingest.svelte";
 	export let data;
-	import { links } from "$stores/images"
+	import { links } from "$stores/images";
 	let loading = true;
 	let show_liked = false;
 	let selected_tags = [];
@@ -88,19 +87,13 @@
 					bind:value={filterName}
 				/>
 				<span class="flex flew-row justify-between mt-1 mb-3">
-					<!-- <p
-						class="text-gray-400 hover:underline cursor-pointer text-sm"
-					>
-						advanced filtering
-					</p> -->
 					<button on:click={toggleLike}
 						><HeartOutline
 							color={show_liked ? "red" : "gray"}
 						/></button
 					>
 					<QualitySelector bind:selected_qualities />
 				</span>
-				<!-- <Ingest tags={data?.tags} /> -->
 			</div>
 			<Tags tags={data?.tags} bind:selected_tags {onToggleTag} />
 		</div>
@@ -117,7 +110,7 @@
 			<div class="grid grid-cols-1 sm:grid-cols-3 gap-3 w-full mt-3">
 				{#each filtered_datasets as dataset, i}
 					<Card
-						img={links[i%links.length]}
+						img={links[i % links.length]}
 						data={dataset}
 						liked={$user?.liked_datasets.includes(dataset.id)}
 						tags={data.tags}

diff --git a/ui/src/routes/datasets/Ingest.svelte b/ui/src/routes/datasets/Ingest.svelte
@@ -12,7 +12,7 @@
         authors,
         source,
         license,
-        selected_tags
+        selected_tags,
     ) => {
         if (
             !name ||
@@ -27,7 +27,7 @@
         let data;
         if (files.length == 0) throw new Error("Please upload a file");
         const datasetExists = $datasets.data.find(
-            (d) => d.name == name && d.uid == $user.uid
+            (d) => d.name == name && d.uid == $user.uid,
         );
         if (datasetExists)
             throw new Error("Dataset already exists, choose a different name");
@@ -36,11 +36,17 @@
             authors,
             source,
             license,
-            $id_token
+            $id_token,
         );
         const version = await datasets.setVersion(dataset_id, $id_token);
         for (var i = 0; i < files.length; i++) {
-            data = await datasets.ingest(dataset_id, files[i], $id_token, version, name);
+            data = await datasets.ingest(
+                dataset_id,
+                files[i],
+                $id_token,
+                version,
+                name,
+            );
         }
         await datasets.update(
             dataset_id,
@@ -50,23 +56,24 @@
             source,
             license,
             selected_tags,
-            $id_token
+            $id_token,
         );
     };
 </script>
 
 {#if $user}
-    <IngestForm 
-    {tags} 
-    {submit} 
-    text="Ingest dataset" 
-    forCreate={true} 
-    required={true}
-    name={""}
-    authors={""}
-    source={""}
-    license={""}
-    content={""}>
+    <IngestForm
+        {tags}
+        {submit}
+        text="Ingest dataset"
+        forCreate={true}
+        required={true}
+        name={""}
+        authors={""}
+        source={""}
+        license={""}
+        content={""}
+    >
         <h3 class="text-lg font-bold">Ingest dataset</h3>
     </IngestForm>
 {/if}
diff --git a/ui/src/routes/datasets/IngestForm.svelte b/ui/src/routes/datasets/IngestForm.svelte
@@ -1,8 +1,5 @@
 <script>
-  import Code from "../docs/components/Code.svelte";
-  import CLI from "../docs/components/CLI.svelte";
   import TextEditor from "./TextEditor.svelte";
-  // import formatFileSize from "../../lib/datasets/formatFileSize.js";
 
   export let tags;
   export let submit;

diff --git a/ui/src/routes/datasets/TextEditor.svelte b/ui/src/routes/datasets/TextEditor.svelte
@@ -2,13 +2,20 @@
   import { Carta, MarkdownEditor } from "carta-md";
   import "carta-md/default.css"; /* Default theme */
   import "$styles/carta-md.css";
-  import DOMPurify from "isomorphic-dompurify";
   import { browser } from "$app/environment";
 
   let x;
   let sm;
 
+  let DOMPurify;
+  const loadDOMPurify = async () => {
+    DOMPurify = await import("isomorphic-dompurify");
+  };
+
   $: if (browser) {
+    // dynamic import DOMPurify
+    loadDOMPurify();
+
     x = window?.matchMedia("(max-width: 640px)");
     let sm = x.matches ? true : false;
     let normal = x.matches ? false : true;
@@ -26,7 +33,7 @@
 
   const carta = new Carta({
     extensions: [],
-    sanitizer: DOMPurify.sanitize,
+    sanitizer: DOMPurify?.sanitize,
   });
 
   export let value;

diff --git a/ui/src/routes/datasets/[name]/+page.svelte b/ui/src/routes/datasets/[name]/+page.svelte
@@ -12,12 +12,22 @@
   import retrieveDatasetFiles from "$lib/datasets/retrieveDatasetFiles";
   import Map from "$components/Map.svelte";
   import { Carta } from "carta-md";
-  import DOMPurify from "isomorphic-dompurify";
   import { links } from "$stores/images.js";
 
+  let DOMPurify;
+  const loadDOMPurify = async () => {
+    DOMPurify = await import("isomorphic-dompurify");
+  };
+
+  $: if (browser) {
+    loadDOMPurify();
+    load();
+    loadDatasets();
+  }
+
   const carta = new Carta({
     extensions: [],
-    sanitizer: DOMPurify.sanitize,
+    sanitizer: DOMPurify?.sanitize,
   });
 
   export let data;
@@ -47,11 +57,6 @@
     filtered_datasets = JSON.parse(localStorage.getItem("filtered_datasets"));
   };
 
-  $: if (browser) {
-    load();
-    loadDatasets();
-  }
-
   const copyToClipboard = (text) => {
     navigator.clipboard.writeText(text);
     console.log("copied to clipboard");

diff --git a/ui/src/routes/models/+page.svelte b/ui/src/routes/models/+page.svelte
@@ -10,7 +10,7 @@
 	import ModelsLeaderboard from "../ModelsLeaderboard.svelte";
 	import QualitySelector from "$components/QualitySelector.svelte";
 	import Ingest from "./Ingest.svelte";
-	import { links, modelImagesOffset } from "$stores/images"
+	import { links, modelImagesOffset } from "$stores/images";
 	export let data;
 
 	let loading = true;
@@ -116,7 +116,7 @@
 			<div class="grid grid-cols-1 sm:grid-cols-3 gap-3 w-full mt-3">
 				{#each filtered_models as model, i}
 					<Card
-						img={links[(i+modelImagesOffset)%links.length]}
+						img={links[(i + modelImagesOffset) % links.length]}
 						data={model}
 						link="models"
 						liked={$user?.liked_models?.includes(model.id)}

diff --git a/ui/src/routes/models/TextEditor.svelte b/ui/src/routes/models/TextEditor.svelte
@@ -2,15 +2,21 @@
   import { Carta, MarkdownEditor } from "carta-md";
   import "carta-md/default.css"; /* Default theme */
   import "$styles/carta-md.css";
-  import DOMPurify from "isomorphic-dompurify";
+  // import DOMPurify from "isomorphic-dompurify";
   import TurndownService from "turndown";
   import { tables } from "turndown-plugin-gfm";
   import { browser } from "$app/environment";
 
   let x;
   let sm;
 
+  let DOMPurify;
+  const loadDOMPurify = async () => {
+    DOMPurify = await import("isomorphic-dompurify");
+  };
+
   $: if (browser) {
+    loadDOMPurify();
     x = window?.matchMedia("(max-width: 640px)");
     let sm = x.matches ? true : false;
     let normal = x.matches ? false : true;
@@ -28,7 +34,7 @@
 
   const carta = new Carta({
     extensions: [],
-    sanitizer: DOMPurify.sanitize,
+    sanitizer: DOMPurify?.sanitize,
   });
 
   export let content;

diff --git a/ui/src/routes/models/[name]/+page.svelte b/ui/src/routes/models/[name]/+page.svelte
@@ -12,11 +12,16 @@
   import Update from "$components/Update.svelte";
   import { Carta } from "carta-md";
   import { links, modelImagesOffset } from "$stores/images.js";
-  import DOMPurify from "isomorphic-dompurify";
+  // import DOMPurify from "isomorphic-dompurify";
+
+  let DOMPurify;
+  const loadDOMPurify = async () => {
+    DOMPurify = await import("isomorphic-dompurify");
+  };
 
   const carta = new Carta({
     extensions: [],
-    sanitizer: DOMPurify.sanitize,
+    sanitizer: DOMPurify?.sanitize,
   });
 
   export let data;
@@ -50,6 +55,7 @@
   };
 
   $: if (browser) {
+    loadDOMPurify();
     load();
     loadModels();
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -56,4 +56,4 @@ @@
         "turndown": "^7.2.0",
         "turndown-plugin-gfm": "^1.0.2"
       }
-    }
+    }