From 4c7847969693de6548b384a73f518c85df4b9c43 Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Tue, 24 Jun 2025 13:19:31 -0400
Subject: [PATCH 1/9] Add folder view component.

---
 package.json                  |   1 +
 src/components/FolderView.vue | 199 ++++++++++++++++++++++++++++++++++
 src/types.ts                  |  14 +++
 yarn.lock                     |   3 +-
 4 files changed, 216 insertions(+), 1 deletion(-)
 create mode 100644 src/components/FolderView.vue

diff --git a/package.json b/package.json
index 1757fcd2..6cc2e178 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "@kyvg/vue3-notification": "^2.9.1",
     "@mdi/font": "^7.4.47",
     "@vueuse/core": "^13.1.0",
+    "@wwtelescope/engine": "^7.30.1",
     "@wwtelescope/engine-pinia": "^0.9.0",
     "leaflet": "^1.9.4",
     "pinia": "~2.1.7",
diff --git a/src/components/FolderView.vue b/src/components/FolderView.vue
new file mode 100644
index 00000000..3ae9493a
--- /dev/null
+++ b/src/components/FolderView.vue
@@ -0,0 +1,199 @@
+<template>
+  <nav
+    class="fv-root"
+    v-if="items !== null"
+    :style="cssVars"
+    aria-role="navigation"
+    aria-label="Folder View"
+  >
+    <div
+      class="fv-header-container"
+    >
+      <slot
+        name="header"
+        :expanded="expanded"
+        :toggle-expanded="toggleExpanded"
+      ></slot>
+    </div>
+    <div
+      v-show="expanded"
+      class="fv-content"
+    >
+      <div
+        v-for="(item, index) of items"
+        :key="index"
+      >
+        <slot
+          name="item"
+          :item="item"
+          :last-selected-item="lastSelectedItem"
+          :select-item="selectItem"
+        >
+          <div
+            :class="['item', lastSelectedItem === item ? 'selected' : '']"
+            v-for="item of items"
+            :key="item.get_name()"
+            :title="item.get_name()"
+            @click="() => selectItem(item, 'click')"
+            @dblclick="() => selectItem(item, 'dblclick')"
+            @keydown.enter="() => selectItem(item, 'keyup')"
+            tabindex="0"
+            role="button"
+            :aria-label="item.get_name()"
+            :aria-selected="lastSelectedItem === item"
+          >
+            <img :src="item.get_thumbnailUrl()" :alt="item.get_name()" />
+            <div class="item-name">
+              {{item.get_name()}}
+            </div>
+          </div>
+        </slot>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch, type Ref } from "vue";
+import { Folder, FolderUp, Place } from "@wwtelescope/engine";
+import { Thumbnail } from "@wwtelescope/engine-types";
+import { FolderViewProps, ItemSelectionType } from "../types";
+
+const items: Ref<Thumbnail[] | null> = ref<Thumbnail[]>([]);
+const lastSelectedItem: Ref<Thumbnail | null> = ref(null);
+
+
+const props = withDefaults(defineProps<FolderViewProps>(), {
+  gap: "5px",
+  highlightColor: "#1671e0",
+  thumbnailColor: "white",
+  backgroundColor: "black",
+  textColor: "white",
+  startExpanded: true,
+});
+
+const emit = defineEmits<{
+  (event: "select", data: { item: Thumbnail, type: ItemSelectionType }): void;
+}>();
+
+const expanded = ref(props.startExpanded);
+function toggleExpanded() {
+  expanded.value = !expanded.value;
+}
+
+function updateFolder(folder: Folder) {
+  const folderItems = folder.get_children()?.filter(item => item instanceof Place) ?? [];
+  items.value = folderItems;
+  const firstItem = items.value.find((item) => (!(item instanceof Folder) || (item instanceof FolderUp)));
+  if (firstItem) {
+    selectItem(firstItem, "folder");
+  }
+}
+
+function selectItem(item: Thumbnail, type: ItemSelectionType) {
+  lastSelectedItem.value = item;
+  if (item instanceof Folder || item instanceof FolderUp) {
+    items.value = item.get_children();
+  }
+
+  emit("select", { item, type });
+}
+
+onMounted(() => {
+  updateFolder(props.rootFolder);
+});
+
+watch(() => props.rootFolder, updateFolder);
+
+const cssVars = computed(() => ({
+  "--flex-direction": props.flexDirection,
+  "--background-color": props.backgroundColor,
+  "--thumbnail-color": props.thumbnailColor,
+  "--highlight-color": props.highlightColor,
+  "--text-color": props.textColor,
+  "--gap": props.gap,
+}));
+</script>
+
+<style scoped lang="less">
+.fv-root {
+  width: auto;
+	height: 100%;
+  overflow-x: auto;
+  overflow-y: auto;
+  background: var(--background-color);
+
+	&::-webkit-scrollbar {
+    padding: 1px;
+    height: 3px;
+		width: 10px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.07);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #1671e0;
+    border-radius: 10px;
+  }	
+}
+
+.fv-header-container {
+  pointer-events: auto;
+  padding: 5px;
+  user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+}
+
+.fv-content {
+  margin: auto;
+  display: flex;
+  flex-direction: var(--flex-direction);
+  align-items: center;
+  justify-content: space-around;
+  gap: var(--gap);
+
+  &::after {
+    content: "";
+    height: 0px;
+  }
+}
+
+.item {
+  padding: 1px;
+  border: 1px solid #444;
+  background: var(--thumbnail-color);
+  border-radius: 2px;
+  width: ~"min(96px, 22vw)";
+  color: var(--text-color);
+  cursor: pointer;
+  pointer-events: auto;
+
+  & img {
+    width: 100%;
+    height: ~"min(45px, 10.3vw)";
+    object-fit: cover;
+    border-radius: 2px;
+  }
+	
+	&:hover {
+		border: 2px solid var(--highlight-color);
+		transition: all 200ms ease-out;
+  }
+
+  &.selected {
+    border: 2px solid var(--highlight-color);
+  }
+}
+
+.item-name {
+  color: var(--text-color);
+  width: 100%;
+  line-height: 1;
+  padding-left: 2px;
+}
+</style>
diff --git a/src/types.ts b/src/types.ts
index cac41def..ee7a8590 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,5 +1,6 @@
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { CircleMarkerOptions, TileLayerOptions } from "leaflet";
+import { Folder } from "@wwtelescope/engine";
 import { engineStore } from "@wwtelescope/engine-pinia";
 import { MapBoxFeatureCollection } from "./mapbox";
 
@@ -394,3 +395,16 @@ export interface ShareButtonProps {
   /** The ARIA label for the button */
   ariaLabel?: string;
 }
+
+export interface FolderViewProps {
+  rootFolder: Folder;
+  flexDirection: "row" | "column";
+  gap?: string;
+  backgroundColor?: string;
+  thumbnailColor?: string;
+  highlightColor?: string;
+  textColor?: string;
+  startExpanded?: boolean;
+}
+
+export type ItemSelectionType = "click" | "dblclick" | "keyup" | "folder";
diff --git a/yarn.lock b/yarn.lock
index d62959ed..3f24bc14 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -555,6 +555,7 @@ __metadata:
     "@vue/eslint-config-typescript": ^12.0.0
     "@vueuse/core": ^13.1.0
     "@wdns/vue-code-block": ^2.3.5
+    "@wwtelescope/engine": ^7.30.1
     "@wwtelescope/engine-pinia": ^0.9.0
     copy-webpack-plugin: ^12.0.2
     css-loader: ^7.1.1
@@ -3001,7 +3002,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@wwtelescope/engine@npm:^7.29.1":
+"@wwtelescope/engine@npm:^7.29.1, @wwtelescope/engine@npm:^7.30.1":
   version: 7.30.1
   resolution: "@wwtelescope/engine@npm:7.30.1"
   dependencies:

From f5fba90e611742a00609549ef70839fdd3bacb11 Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Tue, 24 Jun 2025 14:01:11 -0400
Subject: [PATCH 2/9] Add Storybook story for folder view.

---
 src/index.ts                      |  2 ++
 src/stories/FolderView.stories.ts | 53 +++++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+)
 create mode 100644 src/stories/FolderView.stories.ts

diff --git a/src/index.ts b/src/index.ts
index 5917d6e9..b67a74d7 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -9,6 +9,7 @@ import { useWWTKeyboardControls } from "./composables/wwtKeyboard";
 
 import CreditLogos from "./components/CreditLogos.vue";
 import DateTimePicker from "./components/DateTimePicker.vue";
+import FolderView from "./components/FolderView.vue";
 import FundingAcknowledgement from "./components/FundingAcknowledgement.vue";
 import Gallery from "./components/Gallery.vue";
 import GeolocationButton from "./components/GeolocationButton.vue";
@@ -38,6 +39,7 @@ export {
 
   CreditLogos,
   DateTimePicker,
+  FolderView,
   FundingAcknowledgement,
   Gallery,
   GeolocationButton,
diff --git a/src/stories/FolderView.stories.ts b/src/stories/FolderView.stories.ts
new file mode 100644
index 00000000..453dbbd2
--- /dev/null
+++ b/src/stories/FolderView.stories.ts
@@ -0,0 +1,53 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
+import { Meta, StoryContext, StoryObj } from "@storybook/vue3";
+import { FolderView, FolderViewProps } from "..";
+import { Folder } from "@wwtelescope/engine";
+import { engineStore } from "@wwtelescope/engine-pinia";
+
+interface LoadedData {
+  loaded: {
+    folder: Folder;
+  }
+}
+
+const meta: Meta<typeof FolderView> = {
+  component: FolderView,
+  tags: ["autodocs"],
+  title: "Vue Toolkit/Components/Folder View",
+};
+
+export default meta;
+type Story = StoryObj<typeof FolderView>;
+type Context = StoryContext<LoadedData>;
+
+const store = engineStore();
+
+export const Primary: Story = {
+  loaders: [
+    async() => ({
+      folder: await store.loadImageCollection({
+        url: "https://data1.wwtassets.org/packages/2022/07_jwst/smacs0723/jwst_smacs0723.wtml",
+        loadChildFolders: false,
+      })
+    })
+  ],
+  render: async (args: FolderViewProps, context: Context) => {
+    return {
+      components: { FolderView },
+      template: `<FolderView v-bind="args" :root-folder="folder" />`, 
+      setup() {
+        return { args, folder: context.loaded.folder };
+      }
+    };
+  },
+  args: {
+    flexDirection: "column",
+    gap: "10px",
+    backgroundColor: "black",
+    thumbnailColor: "black",
+    highlightColor: "dodgerblue",
+    textColor: "white",
+    startExpanded: true,
+  }
+};

From dabdd5bde7374dd6965e958f1e8c30ee9b4b2b69 Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Mon, 30 Jun 2025 02:44:13 -0400
Subject: [PATCH 3/9] Fix some issues with folder navigation functionality.
 Allow specifying folder via a URL prop.

---
 src/components/FolderView.vue     | 91 ++++++++++++++++++++++++++-----
 src/stories/FolderView.stories.ts | 34 +++++++-----
 src/types.ts                      |  8 ++-
 3 files changed, 103 insertions(+), 30 deletions(-)

diff --git a/src/components/FolderView.vue b/src/components/FolderView.vue
index 3ae9493a..0249114d 100644
--- a/src/components/FolderView.vue
+++ b/src/components/FolderView.vue
@@ -30,8 +30,7 @@
           :select-item="selectItem"
         >
           <div
-            :class="['item', lastSelectedItem === item ? 'selected' : '']"
-            v-for="item of items"
+            :class="['fv-item', lastSelectedItem === item ? 'selected' : '']"
             :key="item.get_name()"
             :title="item.get_name()"
             @click="() => selectItem(item, 'click')"
@@ -42,8 +41,8 @@
             :aria-label="item.get_name()"
             :aria-selected="lastSelectedItem === item"
           >
-            <img :src="item.get_thumbnailUrl()" :alt="item.get_name()" />
-            <div class="item-name">
+            <img :src="item.get_thumbnailUrl() ?? defaultThumbnail" :alt="item.get_name()" />
+            <div class="fv-item-name">
               {{item.get_name()}}
             </div>
           </div>
@@ -55,9 +54,10 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref, watch, type Ref } from "vue";
-import { Folder, FolderUp, Place } from "@wwtelescope/engine";
+import { Folder, FolderUp } from "@wwtelescope/engine";
 import { Thumbnail } from "@wwtelescope/engine-types";
 import { FolderViewProps, ItemSelectionType } from "../types";
+import { engineStore } from "@wwtelescope/engine-pinia";
 
 const items: Ref<Thumbnail[] | null> = ref<Thumbnail[]>([]);
 const lastSelectedItem: Ref<Thumbnail | null> = ref(null);
@@ -70,8 +70,31 @@ const props = withDefaults(defineProps<FolderViewProps>(), {
   backgroundColor: "black",
   textColor: "white",
   startExpanded: true,
+  selectFirst: true,
+  lazy: true,
+  defaultThumbnail: "https://web.wwtassets.org/engine/assets/thumb_star.jpg",
 });
 
+if (!(props.rootFolder || props.rootUrl)) {
+  throw new Error("Either one of rootFolder or rootUrl must be specified!");
+}
+
+const store = engineStore();
+const folder = ref<Folder | null>(null);
+let currentFolder: Folder | null = null;
+
+if (props.rootFolder != null) {
+  folder.value = props.rootFolder; 
+} else if (props.rootUrl != null) {
+  const url = props.rootUrl;
+  store.waitForReady().then(() => {
+    store.loadImageCollection({ url, loadChildFolders: !props.lazy })
+      .then(loadedFolder => {
+        folder.value = loadedFolder;
+      });
+  });
+}
+
 const emit = defineEmits<{
   (event: "select", data: { item: Thumbnail, type: ItemSelectionType }): void;
 }>();
@@ -82,17 +105,35 @@ function toggleExpanded() {
 }
 
 function updateFolder(folder: Folder) {
-  const folderItems = folder.get_children()?.filter(item => item instanceof Place) ?? [];
-  items.value = folderItems;
+  const children = folder.get_children() ?? [];
+  if (props.filter) {
+    items.value = children.filter(props.filter);
+  } else {
+    items.value = children;
+  }
+  currentFolder = folder;
   const firstItem = items.value.find((item) => (!(item instanceof Folder) || (item instanceof FolderUp)));
-  if (firstItem) {
+  if (props.selectFirst && firstItem) {
     selectItem(firstItem, "folder");
   }
 }
 
 function selectItem(item: Thumbnail, type: ItemSelectionType) {
   lastSelectedItem.value = item;
-  if (item instanceof Folder || item instanceof FolderUp) {
+  if (props.lazy && item instanceof Folder) {
+    store.loadImageCollection({
+      url: item.get_url(),
+      loadChildFolders: !props.lazy,
+    }).then(loadedFolder => {
+      const up = new FolderUp();
+      if (currentFolder) {
+        up.parent = currentFolder;
+      }
+      currentFolder = loadedFolder;
+      items.value = ([up] as Thumbnail[]).concat(loadedFolder.get_children() ?? []);
+    });
+  } else if (item instanceof FolderUp) {
+    currentFolder = item.parent;
     items.value = item.get_children();
   }
 
@@ -100,10 +141,29 @@ function selectItem(item: Thumbnail, type: ItemSelectionType) {
 }
 
 onMounted(() => {
-  updateFolder(props.rootFolder);
+  if (folder.value) {
+    updateFolder(folder.value);
+  }
 });
 
-watch(() => props.rootFolder, updateFolder);
+watch(() => props.rootFolder, (propFolder: Folder | undefined) => {
+  if (propFolder != undefined) {
+    folder.value = propFolder;
+  }
+});
+
+watch(() => props.rootUrl, async (url: string | undefined) => {
+  if (url != undefined) {
+    folder.value = await store.loadImageCollection({ url, loadChildFolders: false });
+  }
+});
+
+watch(folder, (newFolder: Folder | null) => {
+  console.log(newFolder);
+  if (newFolder != null) {
+    updateFolder(newFolder);
+  }
+});
 
 const cssVars = computed(() => ({
   "--flex-direction": props.flexDirection,
@@ -163,15 +223,18 @@ const cssVars = computed(() => ({
   }
 }
 
-.item {
+.fv-item {
   padding: 1px;
   border: 1px solid #444;
   background: var(--thumbnail-color);
   border-radius: 2px;
-  width: ~"min(96px, 22vw)";
+  width: ~"min(100px, 22vw)";
+  height: 100%;
   color: var(--text-color);
   cursor: pointer;
   pointer-events: auto;
+  font-size: 10pt;
+  flex-grow: 1;
 
   & img {
     width: 100%;
@@ -190,7 +253,7 @@ const cssVars = computed(() => ({
   }
 }
 
-.item-name {
+.fv-item-name {
   color: var(--text-color);
   width: 100%;
   line-height: 1;
diff --git a/src/stories/FolderView.stories.ts b/src/stories/FolderView.stories.ts
index 453dbbd2..5fcdb547 100644
--- a/src/stories/FolderView.stories.ts
+++ b/src/stories/FolderView.stories.ts
@@ -3,7 +3,9 @@
 import { Meta, StoryContext, StoryObj } from "@storybook/vue3";
 import { FolderView, FolderViewProps } from "..";
 import { Folder } from "@wwtelescope/engine";
-import { engineStore } from "@wwtelescope/engine-pinia";
+import { WWTComponent } from "@wwtelescope/engine-pinia";
+
+import "./stories.css";
 
 interface LoadedData {
   loaded: {
@@ -21,33 +23,35 @@ export default meta;
 type Story = StoryObj<typeof FolderView>;
 type Context = StoryContext<LoadedData>;
 
-const store = engineStore();
 
 export const Primary: Story = {
-  loaders: [
-    async() => ({
-      folder: await store.loadImageCollection({
-        url: "https://data1.wwtassets.org/packages/2022/07_jwst/smacs0723/jwst_smacs0723.wtml",
-        loadChildFolders: false,
-      })
-    })
-  ],
-  render: async (args: FolderViewProps, context: Context) => {
+  render: (args: FolderViewProps, _context: Context) => {
     return {
-      components: { FolderView },
-      template: `<FolderView v-bind="args" :root-folder="folder" />`, 
+      components: { FolderView, WWTComponent },
+      template: `
+        <div style="width: 1000px; height: 500px; position: relative;">
+          <div style="height: fit-content;">
+            <FolderView v-bind="args" />
+          </div>
+          <WWTComponent
+            :wwtNamespace="storybook"
+          />
+        </div>
+      `, 
       setup() {
-        return { args, folder: context.loaded.folder };
+        return { args };
       }
     };
   },
   args: {
-    flexDirection: "column",
+    flexDirection: "row",
     gap: "10px",
     backgroundColor: "black",
     thumbnailColor: "black",
     highlightColor: "dodgerblue",
     textColor: "white",
     startExpanded: true,
+    lazy: true,
+    rootUrl: "https://cdn.worldwidetelescope.org/wwtweb/catalog.aspx?W=explorerootweb",
   }
 };
diff --git a/src/types.ts b/src/types.ts
index ee7a8590..888502ae 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,6 +1,7 @@
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { CircleMarkerOptions, TileLayerOptions } from "leaflet";
 import { Folder } from "@wwtelescope/engine";
+import { Thumbnail } from "@wwtelescope/engine-types";
 import { engineStore } from "@wwtelescope/engine-pinia";
 import { MapBoxFeatureCollection } from "./mapbox";
 
@@ -397,7 +398,8 @@ export interface ShareButtonProps {
 }
 
 export interface FolderViewProps {
-  rootFolder: Folder;
+  rootFolder?: Folder;
+  rootUrl?: string;
   flexDirection: "row" | "column";
   gap?: string;
   backgroundColor?: string;
@@ -405,6 +407,10 @@ export interface FolderViewProps {
   highlightColor?: string;
   textColor?: string;
   startExpanded?: boolean;
+  selectFirst?: boolean;
+  defaultThumbnail?: string;
+  lazy?: boolean;
+  filter?: (item: Thumbnail) => boolean;
 }
 
 export type ItemSelectionType = "click" | "dblclick" | "keyup" | "folder";

From c0393a42cdbbb372245e241db2c87802b742bc39 Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Mon, 30 Jun 2025 02:45:23 -0400
Subject: [PATCH 4/9] Simplify code.

---
 src/components/FolderView.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/FolderView.vue b/src/components/FolderView.vue
index 0249114d..6e012263 100644
--- a/src/components/FolderView.vue
+++ b/src/components/FolderView.vue
@@ -106,11 +106,7 @@ function toggleExpanded() {
 
 function updateFolder(folder: Folder) {
   const children = folder.get_children() ?? [];
-  if (props.filter) {
-    items.value = children.filter(props.filter);
-  } else {
-    items.value = children;
-  }
+  items.value = props.filter ? children.filter(props.filter) : children;
   currentFolder = folder;
   const firstItem = items.value.find((item) => (!(item instanceof Folder) || (item instanceof FolderUp)));
   if (props.selectFirst && firstItem) {

From f9140968f982f7303117d10f797bb64a29c6c17c Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Mon, 30 Jun 2025 10:44:04 -0400
Subject: [PATCH 5/9] Add folder icon.

---
 src/components/FolderView.vue | 59 ++++++++++++++++++++++++++---------
 1 file changed, 45 insertions(+), 14 deletions(-)

diff --git a/src/components/FolderView.vue b/src/components/FolderView.vue
index 6e012263..e7e23017 100644
--- a/src/components/FolderView.vue
+++ b/src/components/FolderView.vue
@@ -45,6 +45,11 @@
             <div class="fv-item-name">
               {{item.get_name()}}
             </div>
+            <FontAwesomeIcon
+              v-if="item instanceof Folder"
+              icon="folder-open"
+              class="fv-folder-icon"
+            />
           </div>
         </slot>
       </div>
@@ -58,6 +63,11 @@ import { Folder, FolderUp } from "@wwtelescope/engine";
 import { Thumbnail } from "@wwtelescope/engine-types";
 import { FolderViewProps, ItemSelectionType } from "../types";
 import { engineStore } from "@wwtelescope/engine-pinia";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faFolderOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+library.add(faFolderOpen);
 
 const items: Ref<Thumbnail[] | null> = ref<Thumbnail[]>([]);
 const lastSelectedItem: Ref<Thumbnail | null> = ref(null);
@@ -114,23 +124,37 @@ function updateFolder(folder: Folder) {
   }
 }
 
+function folderItems(folder: Folder, includeUp=true): Thumbnail[] {
+  const items = [] as Thumbnail[];
+  if (includeUp) {
+    const up = new FolderUp();
+    if (currentFolder) {
+      up.parent = currentFolder;
+    }
+    items.push(up);
+  }
+  return items.concat(folder.get_children() ?? []);
+}
+
 function selectItem(item: Thumbnail, type: ItemSelectionType) {
   lastSelectedItem.value = item;
-  if (props.lazy && item instanceof Folder) {
-    store.loadImageCollection({
-      url: item.get_url(),
-      loadChildFolders: !props.lazy,
-    }).then(loadedFolder => {
-      const up = new FolderUp();
-      if (currentFolder) {
-        up.parent = currentFolder;
-      }
-      currentFolder = loadedFolder;
-      items.value = ([up] as Thumbnail[]).concat(loadedFolder.get_children() ?? []);
-    });
+  if (item instanceof Folder) {
+    if (props.lazy) {
+      store.loadImageCollection({
+        url: item.get_url(),
+        loadChildFolders: !props.lazy,
+      }).then(loadedFolder => {
+        items.value = folderItems(loadedFolder);
+        currentFolder = loadedFolder;
+      });
+    } else {
+      items.value = folderItems(item);
+      currentFolder = item;
+    }
   } else if (item instanceof FolderUp) {
     currentFolder = item.parent;
-    items.value = item.get_children();
+    items.value = folderItems(item.parent, item.parent != folder.value);
+    console.log(item.parent == folder.value);
   }
 
   emit("select", { item, type });
@@ -155,7 +179,6 @@ watch(() => props.rootUrl, async (url: string | undefined) => {
 });
 
 watch(folder, (newFolder: Folder | null) => {
-  console.log(newFolder);
   if (newFolder != null) {
     updateFolder(newFolder);
   }
@@ -220,6 +243,7 @@ const cssVars = computed(() => ({
 }
 
 .fv-item {
+  position: relative;
   padding: 1px;
   border: 1px solid #444;
   background: var(--thumbnail-color);
@@ -255,4 +279,11 @@ const cssVars = computed(() => ({
   line-height: 1;
   padding-left: 2px;
 }
+
+.fv-folder-icon {
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  z-index: 10;
+}
 </style>

From 2d1d5b38bd6decf27188a484c426cf6443299a3d Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Mon, 30 Jun 2025 11:20:00 -0400
Subject: [PATCH 6/9] Add comments for folder view props. Do a bit of prop
 renaming.

---
 src/components/FolderView.vue     |  3 ++-
 src/stories/FolderView.stories.ts |  2 +-
 src/types.ts                      | 18 +++++++++++++++++-
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/FolderView.vue b/src/components/FolderView.vue
index e7e23017..0e4787ef 100644
--- a/src/components/FolderView.vue
+++ b/src/components/FolderView.vue
@@ -79,6 +79,7 @@ const props = withDefaults(defineProps<FolderViewProps>(), {
   thumbnailColor: "white",
   backgroundColor: "black",
   textColor: "white",
+  orientation: "column",
   startExpanded: true,
   selectFirst: true,
   lazy: true,
@@ -185,7 +186,7 @@ watch(folder, (newFolder: Folder | null) => {
 });
 
 const cssVars = computed(() => ({
-  "--flex-direction": props.flexDirection,
+  "--flex-direction": props.orientation,
   "--background-color": props.backgroundColor,
   "--thumbnail-color": props.thumbnailColor,
   "--highlight-color": props.highlightColor,
diff --git a/src/stories/FolderView.stories.ts b/src/stories/FolderView.stories.ts
index 5fcdb547..a3a3d88c 100644
--- a/src/stories/FolderView.stories.ts
+++ b/src/stories/FolderView.stories.ts
@@ -44,7 +44,7 @@ export const Primary: Story = {
     };
   },
   args: {
-    flexDirection: "row",
+    orientation: "row",
     gap: "10px",
     backgroundColor: "black",
     thumbnailColor: "black",
diff --git a/src/types.ts b/src/types.ts
index 888502ae..e7659560 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -398,18 +398,34 @@ export interface ShareButtonProps {
 }
 
 export interface FolderViewProps {
+  /** The root folder of the tree to display in the view. One of either this or `rootUrl` must be specified */
   rootFolder?: Folder;
+  /** A URL for the root folder of the tree to display in the view. One of either this or `rootFolder` must be specified */
   rootUrl?: string;
-  flexDirection: "row" | "column";
+  /** Specifies the orientation of the folder view */
+  orientation: "row" | "column";
+  /** The gap between folder view items. Any CSS flex gap size is valid. */
   gap?: string;
+  /** The color of the folder view background. Should be a valid CSS color */
   backgroundColor?: string;
+  /** The color of the thumbnail view background. Should be a valid CSS color */
   thumbnailColor?: string;
+  /** The color marking the currently highlighted item. Should be a valid CSS color */
   highlightColor?: string;
+  /** The color of item name text. Should be a valid CSS color */
   textColor?: string;
+  /** Whether the folder view should start expanded or not. */
   startExpanded?: boolean;
+  /** Whether to select the first non-folder item automatically on when the component is mounted. */
   selectFirst?: boolean;
+  /** The URL of an image to use as a default thumbnail, for items that don't have one. */
   defaultThumbnail?: string;
+  /**
+  * If true, subfolders are only loaded when they are first visited.
+  * If false, the entire folder tree is loaded right away.
+  * */
   lazy?: boolean;
+  /** A predicate for filtering which folder items are displayed. Items to be displayed should return true. */
   filter?: (item: Thumbnail) => boolean;
 }
 

From e13201e5bae039cb58b90c54fbf34d4b67d0209f Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Mon, 30 Jun 2025 11:27:16 -0400
Subject: [PATCH 7/9] Add loading notification.

---
 src/components/FolderView.vue | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/components/FolderView.vue b/src/components/FolderView.vue
index 0e4787ef..36850aa7 100644
--- a/src/components/FolderView.vue
+++ b/src/components/FolderView.vue
@@ -54,11 +54,19 @@
         </slot>
       </div>
     </div>
+    <div
+      v-if="loading"
+      class="fv-loading"
+    >
+      <v-progress-circular indeterminate />
+      <span>Loading folder contents. Please wait...</span>
+    </div>
   </nav>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref, watch, type Ref } from "vue";
+import { VProgressCircular } from "vuetify/components";
 import { Folder, FolderUp } from "@wwtelescope/engine";
 import { Thumbnail } from "@wwtelescope/engine-types";
 import { FolderViewProps, ItemSelectionType } from "../types";
@@ -93,15 +101,18 @@ if (!(props.rootFolder || props.rootUrl)) {
 const store = engineStore();
 const folder = ref<Folder | null>(null);
 let currentFolder: Folder | null = null;
+const loading = ref(false);
 
 if (props.rootFolder != null) {
   folder.value = props.rootFolder; 
 } else if (props.rootUrl != null) {
   const url = props.rootUrl;
   store.waitForReady().then(() => {
+    loading.value = true;
     store.loadImageCollection({ url, loadChildFolders: !props.lazy })
       .then(loadedFolder => {
         folder.value = loadedFolder;
+        loading.value = false;
       });
   });
 }
@@ -141,12 +152,14 @@ function selectItem(item: Thumbnail, type: ItemSelectionType) {
   lastSelectedItem.value = item;
   if (item instanceof Folder) {
     if (props.lazy) {
+      loading.value = true;
       store.loadImageCollection({
         url: item.get_url(),
         loadChildFolders: !props.lazy,
       }).then(loadedFolder => {
         items.value = folderItems(loadedFolder);
         currentFolder = loadedFolder;
+        loading.value = false;
       });
     } else {
       items.value = folderItems(item);
@@ -285,6 +298,17 @@ const cssVars = computed(() => ({
   position: absolute;
   top: 1px;
   right: 1px;
-  z-index: 10;
+}
+
+.fv-loading {
+  position: absolute;
+  top: 5px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--background-color);
+  color: var(--text-color);
+  border: 1px solid var(--text-color);
+  border-radius: 5px;
+  padding: 5px;
 }
 </style>

From b93f5f84598763169c157ec0df0c13cbd574d520 Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Mon, 30 Jun 2025 12:00:49 -0400
Subject: [PATCH 8/9] Fix item sizing and ellipsize text.

---
 src/components/FolderView.vue | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/FolderView.vue b/src/components/FolderView.vue
index 36850aa7..4f21ec5f 100644
--- a/src/components/FolderView.vue
+++ b/src/components/FolderView.vue
@@ -22,6 +22,7 @@
       <div
         v-for="(item, index) of items"
         :key="index"
+        class="fv-item"
       >
         <slot
           name="item"
@@ -30,7 +31,7 @@
           :select-item="selectItem"
         >
           <div
-            :class="['fv-item', lastSelectedItem === item ? 'selected' : '']"
+            :class="['fv-item-content', lastSelectedItem === item ? 'selected' : '']"
             :key="item.get_name()"
             :title="item.get_name()"
             @click="() => selectItem(item, 'click')"
@@ -42,9 +43,9 @@
             :aria-selected="lastSelectedItem === item"
           >
             <img :src="item.get_thumbnailUrl() ?? defaultThumbnail" :alt="item.get_name()" />
-            <div class="fv-item-name">
+            <label class="fv-item-name">
               {{item.get_name()}}
-            </div>
+            </label>
             <FontAwesomeIcon
               v-if="item instanceof Folder"
               icon="folder-open"
@@ -168,7 +169,6 @@ function selectItem(item: Thumbnail, type: ItemSelectionType) {
   } else if (item instanceof FolderUp) {
     currentFolder = item.parent;
     items.value = folderItems(item.parent, item.parent != folder.value);
-    console.log(item.parent == folder.value);
   }
 
   emit("select", { item, type });
@@ -215,6 +215,7 @@ const cssVars = computed(() => ({
   overflow-x: auto;
   overflow-y: auto;
   background: var(--background-color);
+  padding: 5px;
 
 	&::-webkit-scrollbar {
     padding: 1px;
@@ -227,14 +228,13 @@ const cssVars = computed(() => ({
   }
 
   &::-webkit-scrollbar-thumb {
-    background: #1671e0;
+    background: var(--highlight-color);
     border-radius: 10px;
   }	
 }
 
 .fv-header-container {
   pointer-events: auto;
-  padding: 5px;
   user-select: none;
   -ms-user-select: none;
   -moz-user-select: none;
@@ -257,18 +257,23 @@ const cssVars = computed(() => ({
 }
 
 .fv-item {
+  height: 100%;
+  flex-grow: 1;
+}
+
+.fv-item-content {
   position: relative;
   padding: 1px;
-  border: 1px solid #444;
+  margin: 2px;
+  border: 2px solid #444;
   background: var(--thumbnail-color);
   border-radius: 2px;
-  width: ~"min(100px, 22vw)";
+  width: ~"min(115px, 22vw)";
   height: 100%;
   color: var(--text-color);
   cursor: pointer;
   pointer-events: auto;
   font-size: 10pt;
-  flex-grow: 1;
 
   & img {
     width: 100%;
@@ -289,9 +294,12 @@ const cssVars = computed(() => ({
 
 .fv-item-name {
   color: var(--text-color);
-  width: 100%;
-  line-height: 1;
+  max-width: 100%;
   padding-left: 2px;
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .fv-folder-icon {

From 502ab6784a3368c6d360c72080b5c3aeb59b958c Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Mon, 30 Jun 2025 12:12:20 -0400
Subject: [PATCH 9/9] Make WWT view in Storybook respond to folder selection.

---
 src/stories/FolderView.stories.ts | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/stories/FolderView.stories.ts b/src/stories/FolderView.stories.ts
index a3a3d88c..117bb2ad 100644
--- a/src/stories/FolderView.stories.ts
+++ b/src/stories/FolderView.stories.ts
@@ -2,8 +2,9 @@
 
 import { Meta, StoryContext, StoryObj } from "@storybook/vue3";
 import { FolderView, FolderViewProps } from "..";
-import { Folder } from "@wwtelescope/engine";
-import { WWTComponent } from "@wwtelescope/engine-pinia";
+import { Folder, FolderUp, Place } from "@wwtelescope/engine";
+import { Thumbnail } from "@wwtelescope/engine-types";
+import { engineStore, WWTComponent } from "@wwtelescope/engine-pinia";
 
 import "./stories.css";
 
@@ -26,12 +27,16 @@ type Context = StoryContext<LoadedData>;
 
 export const Primary: Story = {
   render: (args: FolderViewProps, _context: Context) => {
+    const store = engineStore();
     return {
       components: { FolderView, WWTComponent },
       template: `
         <div style="width: 1000px; height: 500px; position: relative;">
           <div style="height: fit-content;">
-            <FolderView v-bind="args" />
+            <FolderView
+              v-bind="args"
+              @select="({ item, type }) => { if (item instanceof Place) { store.gotoTarget({ place: item }); } }"
+            />
           </div>
           <WWTComponent
             :wwtNamespace="storybook"
@@ -39,7 +44,7 @@ export const Primary: Story = {
         </div>
       `, 
       setup() {
-        return { args };
+        return { args, store, Place };
       }
     };
   },
@@ -52,6 +57,7 @@ export const Primary: Story = {
     textColor: "white",
     startExpanded: true,
     lazy: true,
+    filter: (item: Thumbnail) => item instanceof Place || item instanceof Folder || item instanceof FolderUp,
     rootUrl: "https://cdn.worldwidetelescope.org/wwtweb/catalog.aspx?W=explorerootweb",
   }
 };