Tree filters (#65)

tree filters feature
srl-labs · Sep 27, 2024 · ec53cf3 · ec53cf3
1 parent 6a50190
commit ec53cf3
Show file tree

Hide file tree

Showing 36 changed files with 967 additions and 747 deletions.
diff --git a/src/app.html b/src/app.html
@@ -12,7 +12,7 @@
 
 		<script>
 			if (localStorage.getItem("theme") === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
-				document.documentElement.classList.add("dark");
+				document.documentElement.classList.add("dark")
 			} else {
 				document.documentElement.classList.remove("dark")
 			}

diff --git a/src/lib/components/ChangesButton.svelte b/src/lib/components/ChangesButton.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { compareValues } from '$lib/components/sharedStore'
+
+  export let compareInput = ""
+</script>
+
+<div class="dropdown">
+  <button class="dropdown-button px-2 py-1 text-xs text-center rounded-lg inline-flex items-center dark:text-white 
+    bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 
+    border border-gray-200 dark:border-gray-600">
+    {#if compareInput === ""}
+      All Changes
+      <svg class="w-2.5 h-2.5 ms-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
+      </svg>
+    {:else}
+    <span class="font-fira text-gray-600 dark:text-gray-300 px-1">{compareInput}</span> {compareValues.filter(x => x.value === compareInput)[0].label}
+      <button class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-400" on:click={() => compareInput = ""}>
+        <svg class="w-4 h-4 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+          <path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm7.707-3.707a1 1 0 0 0-1.414 1.414L10.586 12l-2.293 2.293a1 1 0 1 0 1.414 1.414L12 13.414l2.293 2.293a1 1 0 0 0 1.414-1.414L13.414 12l2.293-2.293a1 1 0 0 0-1.414-1.414L12 10.586 9.707 8.293Z" clip-rule="evenodd"/>
+        </svg>
+      </button>
+    {/if}
+  </button>
+  <div class="dropdown-content absolute z-10 hidden dark:text-white rounded-lg shadow
+    bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600">
+    <div class="my-1 overflow-y-auto scroll-light dark:scroll-dark">
+      <ul>
+        {#each compareValues as entry}
+          {#if entry.value != ""}
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+            <li class="flex items-center px-4 py-2 text-xs hover:bg-gray-200 dark:hover:bg-gray-600 cursor-pointer" on:click={() => compareInput = entry.value}>
+              <p class="flex">
+                <span class="font-fira text-gray-500 dark:text-gray-400 w-3">{entry.value}</span>
+                <span class="ml-1">{entry.label}</span>
+              </p>
+            </li>
+          {/if}
+        {/each}
+      </ul>
+    </div>
+  </div>
+</div>
diff --git a/src/lib/components/ComparePopup.svelte b/src/lib/components/ComparePopup.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  export let x: string;
-  export let y: string;
+  export let x: string
+  export let y: string
 </script>
 
 <div class="flex h-screen p-7 font-nokia-headline-light">

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let home: boolean;
+	export let home: boolean
 </script>
 
 <p

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
-  import Theme from '$lib/components/Theme.svelte';
+  import yaml from 'js-yaml'
+  import rel from '$lib/releases.yaml?raw'
 
-  import yaml from 'js-yaml';
-  import rel from '$lib/releases.yaml?raw';
-  import type { Model, Releases } from '$lib/structure';
-  import { reverseSortVersions } from '$lib/components/functions';
+  import type { Model, Releases } from '$lib/structure'
+  import { reverseSortVersions } from '$lib/components/functions'
+  import { toggleSidebar, closeSidebar } from '$lib/components/functions'
+  
+  import Theme from '$lib/components/Theme.svelte'
 
-  const releases = yaml.load(rel) as Releases;
+  const releases = yaml.load(rel) as Releases
   const validVersions = reverseSortVersions([...new Set(Object.keys(releases))])
 
-  import { toggleSidebar, closeSidebar } from '$lib/components/functions'
-
-  export let model: string;
-  export let modelTitle: string;
-  export let release: string;
-  export let allModels: Model[] = [];
-  export let home: boolean;
+  export let model: string
+  export let modelTitle: string
+  export let release: string
+  export let allModels: Model[] = []
+  export let home: boolean
 </script>
 
 <svelte:window on:keyup={({key}) => key === "Escape" ? closeSidebar() : ""} />

diff --git a/src/lib/components/PlatformButton.svelte b/src/lib/components/PlatformButton.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { fade } from "svelte/transition"
+
+  export let enabled: number
+  export let showPlatformFilters = false
+</script>
+
+{#if enabled}
+  <button class="flex items-center px-3 py-1 rounded-lg text-xs text-nowrap 
+      text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-600" 
+      on:click={() => showPlatformFilters = !showPlatformFilters}>
+    {#if !showPlatformFilters}
+      <svg class="w-2 h-2 mr-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
+      </svg>
+    {:else}
+      <svg class="w-2 h-2 mr-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 2">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h16"/>
+      </svg>
+    {/if}
+    Platform Filters
+  </button>
+{/if}
diff --git a/src/lib/components/PlatformGrid.svelte b/src/lib/components/PlatformGrid.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { fade } from "svelte/transition"
+
+  export let showPlatformFilters: boolean
+  export let supportedPlatforms: string[]
+  export let platformSelected = ""
+</script>
+
+{#if showPlatformFilters && supportedPlatforms?.length}
+  <div transition:fade class="mt-4 grid grid-cols-2 md:grid-cols-6 lg:grid-cols-8 gap-4">
+    {#each supportedPlatforms as entry}
+      <input id="platform-{entry}" type="radio" class="hidden peer" bind:group={platformSelected} value="{entry}"/>
+      <label for="platform-{entry}" class="px-3 py-1 text-xs dark:text-white rounded-lg text-center cursor-pointer 
+        {entry === platformSelected ? 
+          'text-white dark:text-white bg-blue-600 dark:bg-blue-700' : 
+          'text-black dark:text-gray-400 bg-gray-100 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-500'}">{entry}
+      </label>
+    {/each}
+  </div>
+{/if}
diff --git a/src/lib/components/Popup.svelte b/src/lib/components/Popup.svelte
@@ -1,22 +1,22 @@
 <script lang="ts">
-  import { page } from '$app/stores';
-	import { copy } from 'svelte-copy';
+  import { page } from '$app/stores'
+	import { copy } from 'svelte-copy'
 
-  import { closeSidebar, markRender } from '$lib/components/functions';
+  import { closeSidebar, markRender } from '$lib/components/functions'
 
-  export let pathDetail: any = {}
+  export let popupDetail: any = {}
   const treePopup = () => $page.url.pathname.includes("tree") ? true : false
 
   function closePopup() {
-    if(Object.keys(pathDetail).length !== 0) {
-      pathDetail = {};
+    if(Object.keys(popupDetail).length !== 0) {
+      popupDetail = {}
     }
   }
 
   function closeSidebarPopup(event: any) {
     if(!document.getElementById("popupContent")?.contains(event.target)) {
-      closeSidebar();
-      closePopup();
+      closeSidebar()
+      closePopup()
     }
   }
 
@@ -42,24 +42,24 @@
       document.getElementById("clip")?.classList.toggle("hidden")
       document.getElementById("copied")?.classList.toggle("hidden")
     }
-    setTimeout(toggle, 1000);
-    toggle();
+    setTimeout(toggle, 1000)
+    toggle()
   }
 </script>
 
 <svelte:window on:keyup={({key}) => key === "Escape" ? closePopup() : ""}/>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-{#if Object.keys(pathDetail).length !== 0}
-  <div id="popup" class="fixed p-4 inset-0 z-50 items-center { Object.keys(pathDetail).length !== 0  ? '' : 'hidden'}" on:click|stopPropagation={closeSidebarPopup}>
+{#if Object.keys(popupDetail).length !== 0}
+  <div id="popup" class="fixed p-4 inset-0 z-50 items-center { Object.keys(popupDetail).length !== 0  ? '' : 'hidden'}" on:click|stopPropagation={closeSidebarPopup}>
     <div class="fixed inset-0 bg-gray-800 bg-opacity-75 transition-opacity"></div>
     <div id="popupContent" class="flex min-h-full justify-center items-center">
       <div class="relative transform overflow-hidden rounded-lg bg-white dark:bg-gray-700 text-left shadow-xl transition-all sm:my-8 max-w-4xl">
         <div id="popupHeader" class="flex items-center justify-between px-4 py-2 rounded-t bg-gray-200 dark:bg-gray-600 border-b border-gray-200 dark:border-gray-600">
           <div class="flex items-center">
             <span class="text-lg text-gray-900 dark:text-gray-300">Path Details</span>
-            <button class="ml-3 p-0.5 rounded-lg text-gray-400 hover:bg-gray-300 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white hover:cursor-pointer" use:copy={copyContent(pathDetail.path)} on:svelte-copy={copyEffect}>
+            <button class="ml-3 p-0.5 rounded-lg text-gray-400 hover:bg-gray-300 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white hover:cursor-pointer" use:copy={copyContent(popupDetail.path)} on:svelte-copy={copyEffect}>
               <svg id="clip" class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                 <path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M9 8v3a1 1 0 0 1-1 1H5m11 4h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-7a1 1 0 0 0-1 1v1m4 3v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-7.13a1 1 0 0 1 .24-.65L7.7 8.35A1 1 0 0 1 8.46 8H13a1 1 0 0 1 1 1Z"/>
               </svg>
@@ -79,52 +79,52 @@
           <div class="overflow-x-auto max-w-full">
             <table>
               <tbody>
-                {#if "compare" in pathDetail}
+                {#if "compare" in popupDetail}
                   <tr>
-                    {#if pathDetail.compare === "~"}
-                      <td colspan="2" class="pt-1 pb-3 text-sm text-gray-400 dark:text-gray-400">MODIFIED in v{pathDetail.compareTo}</td>
-                    {:else if pathDetail.compare === "+"}
-                      <td colspan="2" class="pt-1 pb-3 text-sm text-green-600 dark:text-green-300">ADDED in v{pathDetail.compareTo}</td>
-                    {:else if pathDetail.compare === "-"}
-                      <td colspan="2" class="pt-1 pb-3 text-sm text-red-600 dark:text-red-300">DELETED in v{pathDetail.compareTo}</td>
+                    {#if popupDetail.compare === "~"}
+                      <td colspan="2" class="pt-1 pb-3 text-sm text-gray-400 dark:text-gray-400">MODIFIED in v{popupDetail.compareTo}</td>
+                    {:else if popupDetail.compare === "+"}
+                      <td colspan="2" class="pt-1 pb-3 text-sm text-green-600 dark:text-green-300">ADDED in v{popupDetail.compareTo}</td>
+                    {:else if popupDetail.compare === "-"}
+                      <td colspan="2" class="pt-1 pb-3 text-sm text-red-600 dark:text-red-300">DELETED in v{popupDetail.compareTo}</td>
                     {/if}
                   </tr>
                 {/if}
                 <tr>
                   <th scope="row" class="py-1 whitespace-nowrap text-sm dark:text-gray-400">Data:</th>
-                  <td class="py-1 px-2 dark:text-gray-300 font-fira text-[13px] tracking-tight">{pathDetail["is-state"] === "RW" ? "config" : "state"}</td>
+                  <td class="py-1 px-2 dark:text-gray-300 font-fira text-[13px] tracking-tight">{popupDetail["is-state"] === "RW" ? "config" : "state"}</td>
                 </tr>
                 <tr class="border-t border-gray-200 dark:border-gray-600">
                   <th scope="row" class="py-1 whitespace-nowrap text-sm dark:text-gray-400">Type:</th>
                   <td class="py-1 px-2 dark:text-gray-300 font-fira text-[13px] tracking-tight">
-                    {#if "fromType" in pathDetail}
-                      <p class="text-gray-400">from (v{pathDetail.fromRel}): {pathDetail.fromType}</p>
+                    {#if "fromType" in popupDetail}
+                      <p class="text-gray-400">from (v{popupDetail.fromRel}): {popupDetail.fromType}</p>
                     {/if}
-                    <p>{pathDetail.type}</p>
+                    <p>{popupDetail.type}</p>
                   </td>
                 </tr>
-                {#if pathDetail["type"] === "enumeration" && "enum-values" in pathDetail}
+                {#if popupDetail["type"] === "enumeration" && "enum-values" in popupDetail}
                   <tr class="border-t border-gray-200 dark:border-gray-600">
                     <th scope="row" class="py-1 whitespace-nowrap text-sm dark:text-gray-400">Enum Values:</th>
-                    <td class="py-1 px-2 dark:text-gray-300 font-fira text-[13px] tracking-tight">{pathDetail["enum-values"].join(", ")}</td>
+                    <td class="py-1 px-2 dark:text-gray-300 font-fira text-[13px] tracking-tight">{popupDetail["enum-values"].join(", ")}</td>
                   </tr>
                 {/if}
                 <tr class="border-t border-gray-200 dark:border-gray-600">
                   <th scope="row" class="py-1 whitespace-nowrap text-sm dark:text-gray-400">Path:</th>
-                  <td class="py-1 px-2 dark:text-gray-300 font-fira text-[13px] tracking-tight">{pathDetail.path}</td>
+                  <td class="py-1 px-2 dark:text-gray-300 font-fira text-[13px] tracking-tight">{popupDetail.path}</td>
                 </tr>
                 <tr class="border-t border-gray-200 dark:border-gray-600">
                   <th scope="row" class="py-1 whitespace-nowrap text-sm dark:text-gray-400">Description:</th>
                   <td class="py-1 px-2 dark:text-gray-300 font-fira text-[13px] tracking-tight">
-                    <div class="overflow-y-auto max-h-40 scroll-light dark:scroll-dark" use:markRender={"description" in pathDetail ? pathDetail.description.replaceAll("\n", "<br>") : ''}></div>
+                    <div class="overflow-y-auto max-h-40 scroll-light dark:scroll-dark" use:markRender={"description" in popupDetail ? popupDetail.description.replaceAll("\n", "<br>") : ''}></div>
                   </td>
                 </tr>
               </tbody>
             </table>
           </div>
         </div>
         <div id="popupFooter" class="text-right p-4 border-t border-gray-200 rounded-b dark:border-gray-600">
-          <a href="{crossLaunch(pathDetail)}" target="_blank" class="text-sm px-3 py-1 rounded text-white bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">Show in {"release" in pathDetail ? pathDetail.release : ''} {treePopup() ? 'Path' : 'Tree'} Browser</a>
+          <a href="{crossLaunch(popupDetail)}" target="_blank" class="text-sm px-3 py-1 rounded text-white bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">Show in {"release" in popupDetail ? popupDetail.release : ''} {treePopup() ? 'Path' : 'Tree'} Browser</a>
         </div>
       </div>
     </div>

diff --git a/src/lib/components/SearchInput.svelte b/src/lib/components/SearchInput.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  export let searchInput: string = ""
+</script>
+
+<div class="my-2 font-fira">
+  <input type="text" bind:value={searchInput} placeholder="Search..." 
+    class="px-3 py-2 rounded-lg w-full text-[12.5px] 
+      text-gray-900 dark:text-white dark:placeholder-gray-400 
+      border border-gray-300 dark:border-gray-600 
+      bg-gray-50 dark:bg-gray-700">
+</div>
diff --git a/src/lib/components/ShowPrefixCheck.svelte b/src/lib/components/ShowPrefixCheck.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let showPathPrefix: boolean
+</script>
+
+<div class="px-2 py-1 flex items-center border hover:border-gray-300 dark:border-gray-500 dark:hover:border-gray-400 rounded-lg">
+  <input id="prefix-checkbox" type="checkbox" class="w-3 h-3" bind:checked={showPathPrefix}>
+  <label for="prefix-checkbox" class="ms-2 text-xs text-nowrap text-gray-900 dark:text-gray-300 cursor-pointer">Show prefix</label>
+</div>
diff --git a/src/lib/components/StateButton.svelte b/src/lib/components/StateButton.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { stateValues } from '$lib/components/sharedStore'
+
+  export let stateInput = ""
+</script>
+
+<div class="dropdown">
+  <button class="dropdown-button px-2 py-1 text-xs text-center rounded-lg inline-flex items-center dark:text-white 
+    bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 
+    border border-gray-200 dark:border-gray-600">
+    {#if stateInput === ""}
+      State & Config
+      <svg class="w-2.5 h-2.5 ms-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
+      </svg>
+    {:else}
+    <span class="font-fira text-gray-600 dark:text-gray-300 px-1">{stateInput}</span> - {stateValues.filter(x => x.value === stateInput)[0].label}
+      <button class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-400" on:click={() => stateInput = ""}>
+        <svg class="w-4 h-4 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+          <path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm7.707-3.707a1 1 0 0 0-1.414 1.414L10.586 12l-2.293 2.293a1 1 0 1 0 1.414 1.414L12 13.414l2.293 2.293a1 1 0 0 0 1.414-1.414L13.414 12l2.293-2.293a1 1 0 0 0-1.414-1.414L12 10.586 9.707 8.293Z" clip-rule="evenodd"/>
+        </svg>
+      </button>
+    {/if}
+  </button>
+  <div class="dropdown-content absolute z-10 hidden dark:text-white rounded-lg shadow
+    bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600">
+    <div class="my-1 overflow-y-auto scroll-light dark:scroll-dark">
+      <ul>
+        {#each stateValues as entry}
+          {#if entry.value != ""}
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+            <li class="flex items-center px-4 py-2 text-xs hover:bg-gray-200 dark:hover:bg-gray-600 cursor-pointer" on:click={() => stateInput = entry.value}>
+              <p class="flex">
+                <span class="font-fira text-gray-500 dark:text-gray-400 w-3 mr-2">{entry.value}</span>
+                <span class="ml-1">{entry.label}</span>
+              </p>
+            </li>
+          {/if}
+        {/each}
+      </ul>
+    </div>
+  </div>
+</div>