update file explorer

earthpulse · Jul 29, 2024 · a8cead9 · a8cead9
1 parent 117a886
commit a8cead9
Show file tree

Hide file tree

Showing 9 changed files with 192 additions and 90 deletions.
diff --git a/ui/src/components/FileExplorer.svelte b/ui/src/components/FileExplorer.svelte
@@ -9,8 +9,6 @@
 	export let retrieveFiles;
 	export let version;
 
-	// $: console.log(dataset, version);
-
 	let createWriteStream;
 	let files = null;
 	let tree = null;
@@ -40,7 +38,6 @@
 		// const streamsaver = await import("streamsaver");
 		// createWriteStream = streamsaver.createWriteStream;
 		files = await retrieveFiles(data.id, version.version_id);
-		console.log(files);
 		tree = buildFileTree(files);
 		currentLevel = tree;
 		loading = false;
@@ -92,7 +89,6 @@
 			onDetails = false;
 			currentPath = currentPath.slice(0, currentPath.length - 1);
 		}
-		console.log(folderIndex, navigationStack.length);
 		for (let i = 0; navigationStack.length - folderIndex > 0; i++) {
 			goBack();
 		}

diff --git a/ui/src/components/Leaderboard.svelte b/ui/src/components/Leaderboard.svelte
@@ -1,35 +1,50 @@
 <script>
     export let leaderboard;
     export let field = "datasets";
-    export let msgText = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Est dolor asperiores repellendus quod id cupiditate consequatur tenetur corporis nesciunt. Commodi dignissimos repellendus laudantium quasi nesciunt porro corporis quidem rerum assumenda.";
+    export let msgText =
+        "Ingest datasets into EOTDL and climb up the leaderboard!";
     export let textOnLeft = false;
     export let textOnRight = false;
     $: leaderboard = leaderboard?.filter((l) => l[field] > 0);
 </script>
 
 <div class="w-full grid place-items-center">
-    <div class="w-full overflow-x-auto py-10 px-5 flex sm:flex-row flex-col justify-center items-center">
-        <h2 class="text-2xl font-bold text-[rgb(74,191,167)] pb-6 sm:hidden">Top contributors</h2>
-        {#if textOnLeft}        
-            <div class="sm:p-8 sm:flex-col sm:w-96 w-500px] hidden sm:flex">
-                <h2 class="text-2xl font-bold text-[rgb(74,191,167)] pb-6">Top contributors</h2>
+    <div
+        class="w-full overflow-x-auto py-10 px-5 flex sm:flex-row flex-col justify-center"
+    >
+        <h2 class="text-2xl font-bold text-[rgb(74,191,167)] pb-6 sm:hidden">
+            Top contributors
+        </h2>
+        {#if textOnLeft}
+            <div class="sm:flex-col sm:w-96 w-500px] hidden sm:flex">
+                <h2 class="text-2xl font-bold text-[rgb(74,191,167)] pb-6">
+                    Top contributors
+                </h2>
                 <p>{msgText}</p>
             </div>
         {/if}
         <table class="w-full sm:max-w-2xl max-w-40 max-h-64 max-w">
             <thead>
                 <tr class="bg-[rgb(0,50,71)] text-white h-12">
-                    <th class="px-4"/>
+                    <th class="px-4" />
                     <th class="text-left px-4">Name</th>
                     <th class="px-4">{field}</th>
                 </tr>
             </thead>
             <tbody>
                 {#if leaderboard?.length > 0}
                     {#each leaderboard as user, i}
-                        <tr class={i % 2 ? "active bg-[rgb(74,191,167)] h-12 text-white" : "bg-white h-12"}>
+                        <tr
+                            class={i % 2
+                                ? "active bg-[rgb(74,191,167)] h-12 text-white"
+                                : "bg-white h-12"}
+                        >
                             <th class="px-4">{i + 1}</th>
-                            <td><p class="sm:w-[400px] w-[225px] px-4">{user.name}</p></td>
+                            <td
+                                ><p class="sm:w-[400px] w-[225px] px-4">
+                                    {user.name}
+                                </p></td
+                            >
                             <td class="text-center">{user[field]}</td>
                         </tr>
                     {/each}
@@ -52,11 +67,13 @@
                 {/if}
             </tbody>
         </table>
-        {#if textOnRight}    
-            <div class="sm:p-8 sm:flex-col sm:w-96 w-500px] hidden sm:flex">
-                <h2 class="text-2xl font-bold text-[rgb(0,50,71)] pb-6">Top contributors</h2>
+        {#if textOnRight}
+            <div class="sm:pl-8 sm:flex-col sm:w-96 w-500px] hidden sm:flex">
+                <h2 class="text-2xl font-bold text-[rgb(0,50,71)] pb-6">
+                    Top contributors
+                </h2>
                 <p>{msgText}</p>
-            </div>  
+            </div>
         {/if}
     </div>
 </div>
diff --git a/ui/src/routes/+page.svelte b/ui/src/routes/+page.svelte
@@ -1,5 +1,4 @@
 <script>
-  import HeroBackgorund from "./HeroBackgorund.svelte";
   import Hero from "./Hero.svelte";
   import Consortium from "./Consortium.svelte";
   import RecentDatasets from "./RecentDatasets.svelte";
@@ -22,7 +21,6 @@
 </svelte:head>
 
 <div class="w-full flex flex-col items-center">
-  <HeroBackgorund/>
   <Hero />
   <RecentDatasets />
   <PopularDatasets />

diff --git a/ui/src/routes/Consortium.svelte b/ui/src/routes/Consortium.svelte
@@ -1,19 +1,18 @@
 <div
   class="grid sm:grid-rows-[100px,100px] grid-cols-1 max-w-5xl px-5 py-28 w-full"
 >
-
-  <div class="flex sm:flex-row flex-col h-full">
-    <h2 class="mb-10 text-2xl font-bold pt-10">Initiated By</h2>
+  <div class="flex sm:flex-row flex-col h-full sm:gap-12">
+    <h2 class="mb-10 text-md font-bold pt-10">Initiated By</h2>
     <img
       src="/logos/philab-esa_logo.jpg"
       alt="ESA logo"
       class="h-[120px] m-auto sm:m-0 sm:pl-12"
     />
   </div>
-  <div class="sm:flex sm:mb-0 mb-12">
-    <h2 class="text-2xl font-bold pt-8">Implemented By</h2>
+  <div class="sm:flex sm:mb-0 mb-12 sm:gap-12">
+    <h2 class="text-md font-bold pt-8">Implemented By</h2>
     <div
-      class="flex flex-wrap gap-5 items-center justify-center md:justify-start"
+      class="flex flex-wrap gap-5 items-center justify-center md:justify-start mt-8 sm:mt-0"
     >
       <a href="https://earthpulse.ai/" target="_blank" rel="noreferrer">
         <img src="/logos/ep_logo.svg" alt="earthpulse logo" class="h-[60px]" />

diff --git a/ui/src/routes/DatasetsLeaderboard.svelte b/ui/src/routes/DatasetsLeaderboard.svelte
@@ -9,6 +9,6 @@
 	});
 </script>
 
-<div class="mt-[100px] w-full">
-	<Leaderboard leaderboard={data} textOnLeft={true}/>
+<div class="sm:my-[100px] w-full">
+	<Leaderboard leaderboard={data} textOnLeft={true} />
 </div>
diff --git a/ui/src/routes/Hero.svelte b/ui/src/routes/Hero.svelte
@@ -1,11 +1,17 @@
 <div
-  class="py-[80px] w-full md:py-[100px] min-h-[400px] flex flex-col items-center mt-[80px] md:mt-24 mb-24"
+  class="py-[80px] w-full md:py-[100px] min-h-[400px] flex flex-col items-center mb-12"
+  style="background: url('backgrounds/Group-1190.png') center center/cover"
 >
-  <div class="gap-3 max-w-[450px] text-center text-white flex flex-col items-center px-4">
-    <h1 class="text-5xl font-bold leading-[50px]">Earth Observation Training Data Lab</h1>
+  <div
+    class="gap-3 max-w-[450px] text-center text-white flex flex-col items-center px-4 mt-[80px] md:mt-24"
+  >
+    <h1 class="text-5xl font-bold leading-[50px]">
+      Earth Observation Training Data Lab
+    </h1>
+    <!-- <img src="https://github.com/earthpulse/eotdl/raw/main/eotdl/eotdl.png" /> -->
     <p class="py-6 leading-5">
       Create, share and use training datasets for Earth Observation Machine
-      Learning applications <br> with our open source tools.
+      Learning applications <br /> with our open source tools.
     </p>
     <span class="flex flex-row gap-1">
       <a

diff --git a/ui/src/routes/ModelsLeaderboard.svelte b/ui/src/routes/ModelsLeaderboard.svelte
@@ -9,6 +9,11 @@
 	});
 </script>
 
-<div class="mt-[100px] w-full">
-	<Leaderboard leaderboard={data} field="models" textOnRight={true}/>
+<div class="sm:my-[100px] w-full">
+	<Leaderboard
+		leaderboard={data}
+		field="models"
+		textOnRight={true}
+		msgText="Ingest models into EOTDL and climb up the leaderboard!"
+	/>
 </div>