From a8a82c63e5a3ed951494e4758eaf6c659248fdce Mon Sep 17 00:00:00 2001
From: Juan Sensio <it@earthpulse.es>
Date: Wed, 9 Oct 2024 10:30:04 +0200
Subject: [PATCH] add thumbnails

---
 ui/src/routes/datasets/[name]/+page.svelte | 368 +++++++++++----------
 ui/src/routes/models/[name]/+page.svelte   | 309 ++++++++---------
 2 files changed, 350 insertions(+), 327 deletions(-)

diff --git a/ui/src/routes/datasets/[name]/+page.svelte b/ui/src/routes/datasets/[name]/+page.svelte
index 1ba901de..1d1d5894 100755
--- a/ui/src/routes/datasets/[name]/+page.svelte
+++ b/ui/src/routes/datasets/[name]/+page.svelte
@@ -1,194 +1,204 @@
 <script>
-	import { user, id_token } from "$stores/auth";
-	import { browser } from "$app/environment";
-	import { datasets } from "$stores/datasets";
-	import "$styles/dataset.css";
-	import Update from "$components/Update.svelte";
-	import retrieveDataset from "$lib/datasets/retrieveDataset";
-	import Info from "$components/Info.svelte";
-	import Metadata from "$components/Metadata.svelte";
-	import FileExplorer from "$components/FileExplorer.svelte";
-	import { fade } from "svelte/transition";
-	import retrieveDatasetFiles from "$lib/datasets/retrieveDatasetFiles";
-	import Map from "$components/Map.svelte";
-	import { Carta } from "carta-md";
-	import DOMPurify from "isomorphic-dompurify";
+  import { user, id_token } from "$stores/auth";
+  import { browser } from "$app/environment";
+  import { datasets } from "$stores/datasets";
+  import "$styles/dataset.css";
+  import Update from "$components/Update.svelte";
+  import retrieveDataset from "$lib/datasets/retrieveDataset";
+  import Info from "$components/Info.svelte";
+  import Metadata from "$components/Metadata.svelte";
+  import FileExplorer from "$components/FileExplorer.svelte";
+  import { fade } from "svelte/transition";
+  import retrieveDatasetFiles from "$lib/datasets/retrieveDatasetFiles";
+  import Map from "$components/Map.svelte";
+  import { Carta } from "carta-md";
+  import DOMPurify from "isomorphic-dompurify";
 
-	const carta = new Carta({
-		extensions: [],
-		sanitizer: DOMPurify.sanitize,
-	});
+  const carta = new Carta({
+    extensions: [],
+    sanitizer: DOMPurify.sanitize,
+  });
 
-	export let data;
+  export let data;
 
-	let images = ["satelite_image1.jpg","satelite_image2.jpg","satelite_image3.jpg"]
-	let dataset = null;
-	let version = null;
-	let message = null;
-	let description = null;
-	let curent_image;
-	let filtered_datasets;
-	const load = async () => {
-		dataset = await retrieveDataset(data.name);
-		description =  await carta.render(dataset.description)
-		if (!description){
-			description = dataset.description;
-		}
-	};
+  let images = [
+    "satelite_image1.jpg",
+    "satelite_image2.jpg",
+    "satelite_image3.jpg",
+  ];
+  let dataset = null;
+  let version = null;
+  let message = null;
+  let description = null;
+  let curent_image;
+  let filtered_datasets;
+  const load = async () => {
+    dataset = await retrieveDataset(data.name);
+    description = await carta.render(dataset.description);
+    if (!description) {
+      description = dataset.description;
+    }
+  };
 
-	$: {
-		filtered_datasets = $datasets.data
-		filtered_datasets && filtered_datasets.forEach((element, i) => {
-			if (element.id == dataset.id) curent_image = images[i%3]
-		})
-	}
-	const loadDatasets = async () => {
-		await datasets.retrieve(fetch);
-		filtered_datasets = JSON.parse(
-			localStorage.getItem("filtered_datasets"),
-		);
-	};
+  $: {
+    filtered_datasets = $datasets.data;
+    filtered_datasets &&
+      filtered_datasets.forEach((element, i) => {
+        if (element.id == dataset.id) curent_image = images[i % 3];
+      });
+  }
+  const loadDatasets = async () => {
+    await datasets.retrieve(fetch);
+    filtered_datasets = JSON.parse(localStorage.getItem("filtered_datasets"));
+  };
 
-	$: if (browser) {load(); loadDatasets()};
+  $: if (browser) {
+    load();
+    loadDatasets();
+  }
 
-	const copyToClipboard = (text) => {
-		navigator.clipboard.writeText(text);
-		console.log("copied to clipboard");
-		message = "Copied!";
-		setTimeout(() => {
-			message = null;
-		}, 1000);
-	};
+  const copyToClipboard = (text) => {
+    navigator.clipboard.writeText(text);
+    console.log("copied to clipboard");
+    message = "Copied!";
+    setTimeout(() => {
+      message = null;
+    }, 1000);
+  };
 
-	let upgradeNotebook = "";
-	$: {
-		if (dataset?.quality == 0) upgradeNotebook = "03_q1_datasets";
-		else if (dataset?.quality == 1) upgradeNotebook = "04_q2_datasets";
-		else upgradeNotebook = "";
-	}
+  let upgradeNotebook = "";
+  $: {
+    if (dataset?.quality == 0) upgradeNotebook = "03_q1_datasets";
+    else if (dataset?.quality == 1) upgradeNotebook = "04_q2_datasets";
+    else upgradeNotebook = "";
+  }
 </script>
 
 <svelte:head>
-	<title>EOTDL | {data.name}</title>
+  <title>EOTDL | {data.name}</title>
 </svelte:head>
 
 {#if dataset}
-	<div class="w-full flex flex-col items-center">
-		<div class="px-3 py-10 mt-10 w-full max-w-6xl flex flex-col gap-2">
-			<div class="flex flex-col sm:flex-row justify-between w-full gap-3">
-				<span class="flex flex-col sm:flex-row gap-2">
-					<span class="flex sm:justify-start justify-center">
-						<img class="w-36 h-36 bg-white object-cover" src={dataset.thumbnail ? dataset.thumbnail : `../backgrounds/thumbnails/${curent_image}`} alt="">
-					</span>
-					<span>
-						<h1 class="text-3xl">{dataset.name}</h1>
-						<div class="flex flex-wrap gap-1">
-							{#each dataset.tags as tag}
-							<p
-							class="badge border-0 text-slate-200 text-xs"
-							style="background-color: {data.tags?.find(
-								(t) => t.name == tag,
-							).color || 'none'};"
-								>
-								{tag}
-							</p>
-							{/each}
-						</div>
-						<Info
-							data={dataset}
-							store={datasets}
-							field="liked_datasets"
-							bind:version
-						/>
-					</span>
-					
-				</span>
-				<span class="flex flex-row gap-2">
-					{#if dataset.quality < 2}
-						<a
-							class="btn btn-outline"
-							href={`https://hub.api.eotdl.com/services/eoxhub-gateway/eotdl/notebook-view/notebooks/${upgradeNotebook}.ipynb`}
-							target="_blank">Upgrade</a
-						>
-					{/if}
-					{#if $user}
-						{#if $user.uid == dataset.uid}
-							<Update
-								store={datasets}
-								route="datasets"
-								id={dataset.id}
-								tags={data.tags}
-								current_tags={dataset.tags}
-								bind:name={dataset.name}
-								quality={dataset.quality}
-								bind:authors={dataset.authors}
-								bind:source={dataset.source}
-								bind:license={dataset.license}
-								bind:description={dataset.description}
-								bind:selected_tags={dataset.tags}
-							/>
-						{/if}
-					{/if}
-				</span>
-			</div>
-			<hr class="sm:hidden" />
-			<div
-				class="sm:grid sm:grid-cols-[auto,350px] sm:gap-3 flex flex-col mt-5"
-			>
-				<div class="w-full overflow-auto">
-					<div class="content">
-						{#if description}
-							{@html description}
-						{:else}
-							<p class="italic">No description.</p>
-						{/if}
-					</div>
-					{#if dataset.quality > 0}
-						<pre
-							class="text-xs bg-slate-100 p-3 mt-3">{JSON.stringify(
-								dataset.catalog,
-								null,
-								4,
-							)}</pre>
-					{/if}
-				</div>
-				<div class="flex flex-col gap-3 text-xs sm:mt-0 mt-16">
-					<hr class="sm:hidden" />
-					<p>Download the dataset with the CLI:</p>
-					<div class="relative">
-						<pre class="bg-gray-200 p-3 overflow-x-auto"><button
-								on:click={() =>
-									copyToClipboard(
-										`eotdl datasets get ${dataset.name} -v ${version?.version_id}`,
-									)}
-								>eotdl datasets get {dataset.name} -v {version?.version_id}</button
-							></pre>
-						{#if message}
-							<span
-								class="text-gray-400 absolute bottom-[-20px] right-0"
-								in:fade
-								out:fade>{message}</span
-							>
-						{/if}
-					</div>
-					{#if dataset.quality == 0}
-						<div class="flex flex-col gap-3">
-							<Metadata data={dataset} />
-							<FileExplorer
-								data={dataset}
-								{version}
-								retrieveFiles={retrieveDatasetFiles}
-								datasetId={dataset.id}
-							/>
-						</div>
-					{:else if dataset.items?.features?.length > 0}
-						<div class="flex flex-col gap-3 w-full h-[200px]">
-							<p>Total items: {dataset.items?.features.length}</p>
-							<Map geojson={dataset.items} />
-						</div>
-					{/if}
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="w-full flex flex-col items-center">
+    <div class="px-3 py-10 mt-10 w-full max-w-6xl flex flex-col gap-2">
+      <div class="flex flex-col sm:flex-row justify-between w-full gap-3">
+        <span class="flex flex-col sm:flex-row gap-2">
+          <span class="flex sm:justify-start justify-center">
+            <img
+              class="w-36 h-36 bg-white object-cover"
+              src={dataset.thumbnail
+                ? dataset.thumbnail
+                : `/backgrounds/thumbnails/${curent_image}`}
+              alt=""
+            />
+          </span>
+          <span>
+            <h1 class="text-3xl">{dataset.name}</h1>
+            <div class="flex flex-wrap gap-1">
+              {#each dataset.tags as tag}
+                <p
+                  class="badge border-0 text-slate-200 text-xs"
+                  style="background-color: {data.tags?.find(
+                    (t) => t.name == tag
+                  ).color || 'none'};"
+                >
+                  {tag}
+                </p>
+              {/each}
+            </div>
+            <Info
+              data={dataset}
+              store={datasets}
+              field="liked_datasets"
+              bind:version
+            />
+          </span>
+        </span>
+        <span class="flex flex-row gap-2">
+          {#if dataset.quality < 2}
+            <a
+              class="btn btn-outline"
+              href={`https://hub.api.eotdl.com/services/eoxhub-gateway/eotdl/notebook-view/notebooks/${upgradeNotebook}.ipynb`}
+              target="_blank">Upgrade</a
+            >
+          {/if}
+          {#if $user}
+            {#if $user.uid == dataset.uid}
+              <Update
+                store={datasets}
+                route="datasets"
+                id={dataset.id}
+                tags={data.tags}
+                current_tags={dataset.tags}
+                bind:name={dataset.name}
+                quality={dataset.quality}
+                bind:authors={dataset.authors}
+                bind:source={dataset.source}
+                bind:license={dataset.license}
+                bind:description={dataset.description}
+                bind:selected_tags={dataset.tags}
+              />
+            {/if}
+          {/if}
+        </span>
+      </div>
+      <hr class="sm:hidden" />
+      <div
+        class="sm:grid sm:grid-cols-[auto,350px] sm:gap-3 flex flex-col mt-5"
+      >
+        <div class="w-full overflow-auto">
+          <div class="content">
+            {#if description}
+              {@html description}
+            {:else}
+              <p class="italic">No description.</p>
+            {/if}
+          </div>
+          {#if dataset.quality > 0}
+            <pre class="text-xs bg-slate-100 p-3 mt-3">{JSON.stringify(
+                dataset.catalog,
+                null,
+                4
+              )}</pre>
+          {/if}
+        </div>
+        <div class="flex flex-col gap-3 text-xs sm:mt-0 mt-16">
+          <hr class="sm:hidden" />
+          <p>Download the dataset with the CLI:</p>
+          <div class="relative">
+            <pre class="bg-gray-200 p-3 overflow-x-auto"><button
+                on:click={() =>
+                  copyToClipboard(
+                    `eotdl datasets get ${dataset.name} -v ${version?.version_id}`
+                  )}
+                >eotdl datasets get {dataset.name} -v {version?.version_id}</button
+              ></pre>
+            {#if message}
+              <span
+                class="text-gray-400 absolute bottom-[-20px] right-0"
+                in:fade
+                out:fade>{message}</span
+              >
+            {/if}
+          </div>
+          {#if dataset.quality == 0}
+            <div class="flex flex-col gap-3">
+              <Metadata data={dataset} />
+              <FileExplorer
+                data={dataset}
+                {version}
+                retrieveFiles={retrieveDatasetFiles}
+                datasetId={dataset.id}
+              />
+            </div>
+          {:else if dataset.items?.features?.length > 0}
+            <div class="flex flex-col gap-3 w-full h-[200px]">
+              <p>Total items: {dataset.items?.features.length}</p>
+              <Map geojson={dataset.items} />
+            </div>
+          {/if}
+        </div>
+      </div>
+    </div>
+  </div>
 {/if}
diff --git a/ui/src/routes/models/[name]/+page.svelte b/ui/src/routes/models/[name]/+page.svelte
index e4073bc2..82b0063d 100755
--- a/ui/src/routes/models/[name]/+page.svelte
+++ b/ui/src/routes/models/[name]/+page.svelte
@@ -1,138 +1,151 @@
 <script>
-	import { user, id_token } from "$stores/auth";
-	import { browser } from "$app/environment";
-	import "$styles/dataset.css";
-	import retrieveModel from "$lib/models/retrieveModel";
-	import { models } from "$stores/models";
-	import Info from "$components/Info.svelte";
-	import Metadata from "$components/Metadata.svelte";
-	import FileExplorer from "$components/FileExplorer.svelte";
-	import { fade } from "svelte/transition";
-	import retrieveModelFiles from "$lib/models/retrieveModelFiles";
-	import Update from "$components/Update.svelte";
-	import { Carta } from "carta-md";
-	import DOMPurify from "isomorphic-dompurify";
+  import { user, id_token } from "$stores/auth";
+  import { browser } from "$app/environment";
+  import "$styles/dataset.css";
+  import retrieveModel from "$lib/models/retrieveModel";
+  import { models } from "$stores/models";
+  import Info from "$components/Info.svelte";
+  import Metadata from "$components/Metadata.svelte";
+  import FileExplorer from "$components/FileExplorer.svelte";
+  import { fade } from "svelte/transition";
+  import retrieveModelFiles from "$lib/models/retrieveModelFiles";
+  import Update from "$components/Update.svelte";
+  import { Carta } from "carta-md";
+  import DOMPurify from "isomorphic-dompurify";
 
-	const carta = new Carta({
-		extensions: [],
-		sanitizer: DOMPurify.sanitize,
-	});
+  const carta = new Carta({
+    extensions: [],
+    sanitizer: DOMPurify.sanitize,
+  });
 
-	export let data;
+  export let data;
 
-	let images = ["satelite_image1.jpg","satelite_image2.jpg","satelite_image3.jpg"]
-	let model = null;
-	let version = null;
-	let message = null;
-	let description = null;
-	let curent_image;
-	let filtered_models = null;
-	const load = async () => {
-		model = await retrieveModel(data.name);
-		description =  await carta.render(model.description)
-		if (!description){
-			description = model.description;
-		}
-	};
+  let images = [
+    "satelite_image1.jpg",
+    "satelite_image2.jpg",
+    "satelite_image3.jpg",
+  ];
+  let model = null;
+  let version = null;
+  let message = null;
+  let description = null;
+  let curent_image;
+  let filtered_models = null;
+  const load = async () => {
+    model = await retrieveModel(data.name);
+    description = await carta.render(model.description);
+    if (!description) {
+      description = model.description;
+    }
+  };
 
-	$: {
-		filtered_models = $models.data
-		filtered_models && filtered_models.forEach((element, i) => {
-			if (element.id == model.id) curent_image = images[i%3]
-			console.log(model.id == element.id);
-		})
-	}
+  $: {
+    filtered_models = $models.data;
+    filtered_models &&
+      filtered_models.forEach((element, i) => {
+        if (element.id == model.id) curent_image = images[i % 3];
+        console.log(model.id == element.id);
+      });
+  }
 
-	const loadModels = async () => {
-		await models.retrieve(fetch);
-		filtered_models = JSON.parse(localStorage.getItem("filtered_models"));
-	};
-	
+  const loadModels = async () => {
+    await models.retrieve(fetch);
+    filtered_models = JSON.parse(localStorage.getItem("filtered_models"));
+  };
 
-	$: if (browser) {load(); loadModels()};
+  $: if (browser) {
+    load();
+    loadModels();
+  }
 
-	const copyToClipboard = (text) => {
-		navigator.clipboard.writeText(text);
-		console.log("copied to clipboard");
-		message = "Copied!";
-		setTimeout(() => {
-			message = null;
-		}, 1000);
-	};
+  const copyToClipboard = (text) => {
+    navigator.clipboard.writeText(text);
+    console.log("copied to clipboard");
+    message = "Copied!";
+    setTimeout(() => {
+      message = null;
+    }, 1000);
+  };
 </script>
 
 <svelte:head>
-	<title>EOTDL | {data.name}</title>
+  <title>EOTDL | {data.name}</title>
 </svelte:head>
 
 {#if model}
-	<div class="w-full flex flex-col items-center">
-		<div class="px-3 py-10 mt-10 w-full max-w-6xl flex flex-col gap-2">
-			<div class="flex flex-col sm:flex-row justify-between w-full gap-3">
-				<span class="flex flex-col sm:flex-row gap-2">
-					<span class="flex sm:justify-start justify-center">
-						<img class="w-36 h-36 object-cover" src={model.thumbnail ? model.thumbnail : `../backgrounds/thumbnails/${curent_image}`} alt="">
-					</span>
-					<span>
-						<h1 class="text-3xl">{model.name}</h1>
-						<div class="flex flex-wrap gap-1">
-							{#each model.tags as tag}
-								<p
-									class="badge border-0 text-slate-200 text-xs"
-									style="background-color: {data.tags?.find(
-										(t) => t.name == tag,
-									).color || 'none'};"
-								>
-									{tag}
-								</p>
-							{/each}
-						</div>
-						<Info
-							data={model}
-							store={models}
-							field="liked_models"
-							bind:version
-						/>
-					</span>
-				</span>
+  <div class="w-full flex flex-col items-center">
+    <div class="px-3 py-10 mt-10 w-full max-w-6xl flex flex-col gap-2">
+      <div class="flex flex-col sm:flex-row justify-between w-full gap-3">
+        <span class="flex flex-col sm:flex-row gap-2">
+          <span class="flex sm:justify-start justify-center">
+            <img
+              class="w-36 h-36 object-cover"
+              src={model.thumbnail
+                ? model.thumbnail
+                : `/backgrounds/thumbnails/${curent_image}`}
+              alt=""
+            />
+          </span>
+          <span>
+            <h1 class="text-3xl">{model.name}</h1>
+            <div class="flex flex-wrap gap-1">
+              {#each model.tags as tag}
+                <p
+                  class="badge border-0 text-slate-200 text-xs"
+                  style="background-color: {data.tags?.find(
+                    (t) => t.name == tag
+                  ).color || 'none'};"
+                >
+                  {tag}
+                </p>
+              {/each}
+            </div>
+            <Info
+              data={model}
+              store={models}
+              field="liked_models"
+              bind:version
+            />
+          </span>
+        </span>
 
-				{#if $user}
-					<span class="flex flex-row gap-2">
-						<!-- <a
+        {#if $user}
+          <span class="flex flex-row gap-2">
+            <!-- <a
 					class="btn btn-outline"
 					href={`https://notebooks.api.eotdl.com/?search=${dataset.name}`}
 					target="_blank">Open</a
 				> -->
-						{#if $user.uid == model.uid}
-							<Update
-								store={models}
-								route="models"
-								id={model.id}
-								tags={data.tags}
-								current_tags={model.tags}
-								bind:name={model.name}
-								quality={model.quality}
-								bind:authors={model.authors}
-								bind:source={model.source}
-								bind:license={model.license}
-								bind:description={model.description}
-								bind:selected_tags={model.tags}
-							/>
-						{/if}
-					</span>
-				{/if}
-			</div>
+            {#if $user.uid == model.uid}
+              <Update
+                store={models}
+                route="models"
+                id={model.id}
+                tags={data.tags}
+                current_tags={model.tags}
+                bind:name={model.name}
+                quality={model.quality}
+                bind:authors={model.authors}
+                bind:source={model.source}
+                bind:license={model.license}
+                bind:description={model.description}
+                bind:selected_tags={model.tags}
+              />
+            {/if}
+          </span>
+        {/if}
+      </div>
 
-			<div class="grid grid-cols-[auto,350px] gap-3 mt-5">
-				<div class="w-full overflow-auto">
-					<div class="content">
-						{#if description}
-							{@html description}
-						{:else}
-							<p class="italic">No description.</p>
-						{/if}
-					</div>
-					<!-- {#if dataset.quality > 0}
+      <div class="grid grid-cols-[auto,350px] gap-3 mt-5">
+        <div class="w-full overflow-auto">
+          <div class="content">
+            {#if description}
+              {@html description}
+            {:else}
+              <p class="italic">No description.</p>
+            {/if}
+          </div>
+          <!-- {#if dataset.quality > 0}
 						<pre
 							class="text-xs bg-slate-100 p-3 mt-3">{JSON.stringify(
 								dataset.catalog,
@@ -140,37 +153,37 @@
 								4
 							)}</pre>
 					{/if} -->
-				</div>
-				<div class="flex flex-col gap-3 text-xs">
-					<p>Download the model with the CLI:</p>
-					<div class="relative">
-						<pre class="bg-gray-200 p-3 overflow-x-auto"><button
-								on:click={() =>
-									copyToClipboard(
-										`eotdl models get ${model.name} -v ${version?.version_id}`,
-									)}
-								>eotdl models get {model.name} -v {version?.version_id}</button
-							></pre>
-						{#if message}
-							<span
-								class=" text-gray-400 absolute bottom-[-20px] right-0"
-								in:fade
-								out:fade>{message}</span
-							>
-						{/if}
-					</div>
-					{#if model.quality == 0}
-						<div class="flex flex-col gap-3">
-							<Metadata data={model} />
-							<FileExplorer
-								data={model}
-								{version}
-								retrieveFiles={retrieveModelFiles}
-							/>
-						</div>
-					{/if}
-				</div>
-			</div>
-		</div>
-	</div>
+        </div>
+        <div class="flex flex-col gap-3 text-xs">
+          <p>Download the model with the CLI:</p>
+          <div class="relative">
+            <pre class="bg-gray-200 p-3 overflow-x-auto"><button
+                on:click={() =>
+                  copyToClipboard(
+                    `eotdl models get ${model.name} -v ${version?.version_id}`
+                  )}
+                >eotdl models get {model.name} -v {version?.version_id}</button
+              ></pre>
+            {#if message}
+              <span
+                class=" text-gray-400 absolute bottom-[-20px] right-0"
+                in:fade
+                out:fade>{message}</span
+              >
+            {/if}
+          </div>
+          {#if model.quality == 0}
+            <div class="flex flex-col gap-3">
+              <Metadata data={model} />
+              <FileExplorer
+                data={model}
+                {version}
+                retrieveFiles={retrieveModelFiles}
+              />
+            </div>
+          {/if}
+        </div>
+      </div>
+    </div>
+  </div>
 {/if}