Layout updates

src/components/DetailSummary.vue

@@ -1,10 +1,11 @@
 <template>
   <div
     class="expansion-panel"
-    @click="() => openInfo()"
+    @click="() => { if (!hideInfo) openInfo(); }"
   >
-    <strong class="d-block">{{ title }}</strong>
+    <strong :class="['d-block', {'ep-hideInfo': hideInfo}]">{{ title }}</strong>
     <v-icon
+      v-if="!hideInfo"
       aria-label="Learn more"
       size="small"
       color="white"
@@ -62,6 +63,7 @@ interface Props {
   content?: string;
   normallyOpen?: boolean;
   useInternalDialog?: boolean;
+  hideInfo?: boolean;
 }
 
 // add an @open emit
@@ -75,6 +77,7 @@ const props = withDefaults(defineProps<Props>(), {
   title: '',
   content: '',
   useInternalDialog: true,
+  hideInfo: false,
 });
 
 
@@ -113,8 +116,18 @@ function openInfo() {
   align-items: center;
   justify-content: space-between;
   pointer-events: auto;
+}
 
+.expansion-panel > strong {
+  font-size: 0.9em;
+  border-right: 1px solid white;
+  padding-right: 4px;
 }
+.expansion-panel > strong.ep-hideInfo {
+  font-size: 0.9em;
+  border-right: none;
+}
+
 
 
 .expansion-panel > .ds-info-icon {

src/components/Gallery.vue

@@ -25,18 +25,25 @@
           >
             {{ closedText }}
           </span>
-          <img
+          <!-- <img
             v-if="selectedPlace === null"
             class="noselect"
             :src="selectedPlace ? getThumbnailUrl(selectedPlace) : (places[previewIndex] ? getThumbnailUrl(places[previewIndex]) : defaultThumbnailUrl)"
-          />
+          /> -->
+          <div
+            v-if="selectedPlace === null"
+            class="gallery-no-view"
+          >
+            <span>No view selected</span>
+          </div>
           <GalleryItem
             v-else
             :place="selectedPlace"
             :show-opacity="showOpacity"
             :opacity="getOpacity(selectedPlace)"
             borderless
             hide-label
+            :loading="loadingImageset[getPlaceKey(selectedPlace)]"
             @update:opacity="(v) => setOpacity(selectedPlace!, v)"
           />
         </div>
@@ -71,6 +78,7 @@
           :persistent="isPersistantLayer(place)"
           :show-opacity="showOpacity && selectedPlaces.includes(place)"
           :opacity="placeOpacities[getPlaceKey(place)] ?? getOpacity(place) ?? 1"
+          :loading="loadingImageset[getPlaceKey(place)]"
           @click="selectPlace(place)"
           @update:opacity="(v) => setOpacity(place, v)"
         />
@@ -84,7 +92,7 @@ import { ref, computed, onBeforeMount, nextTick, watch } from "vue";
 import { engineStore } from "@wwtelescope/engine-pinia";
 import { Folder, Imageset, Place, ImageSetLayer } from "@wwtelescope/engine";
 import GalleryItem from "./GalleryItem.vue";
-
+import { useLayerOrdering } from "@/composables/useLayerOrdering";
 
 /* Gallery */
 
@@ -130,6 +138,10 @@ export interface GalleryProps {
   defaultStarting?: string | null;
   /** prevent the gallery from being opened by user interaction */
   disabled?: boolean;
+  /** draw images in the order selected. most recent on top */
+  useSelectedOrder?: boolean;
+  /** exclude from list */
+  excludeItems?: string[];
 }
 
 
@@ -152,8 +164,12 @@ const props = withDefaults(defineProps<GalleryProps>(), {
   collapseOnSelect: false,
   defaultStarting: null,
   disabled: false,
+  useSelectedOrder: false,
+  excludeItems: undefined,
 });
 
+
+
 const defaultThumbnailUrl = "https://cdn.worldwidetelescope.org/wwtweb/thumbnail.aspx?name=test";
 
 // const emit = defineEmits<{
@@ -176,11 +192,18 @@ const selectedPlaces = defineModel<Place[]>("selectedPlaces", { required: false,
 const selectedPlace = computed(() => selectedPlaces.value[selectedPlaces.value.length - 1] ?? null);
 const placeOpacities = ref<Record<string, number>>({});
 const imagesetLayers = ref<Record<string, ImageSetLayer>>({});
+
 let _internallySelecting = false;
+const loadingImageset = ref<Record<string, boolean>>({});
 
 const shownPlaces = computed(() => {
   if (!props.hidePersisted) return places.value;
-  return places.value.filter(p => getImageset(p)?.get_name() !== props.persist);
+  const _dontShow = (p: Place) => {
+    const c1 = props.persist && getImageset(p)?.get_name() === props.persist;
+    const c2 = props.excludeItems?.includes(p.get_name());
+    return !(c1 || c2);
+  };
+  return places.value.filter(_dontShow);
 });
 
 const cssVars = computed(() => {
@@ -232,6 +255,8 @@ function getPlaceKey(place: Place): string {
 async function loadImagesetLayerForPlace(place: Place): Promise<ImageSetLayer | null> {
   const imageset = getImageset(place);
   if (!imageset) return null;
+  const key = getPlaceKey(place);
+  loadingImageset.value[key] = true;
   console.log("Loading imageset layer for place", place.get_name(), "with imageset", imageset.get_name());
   return await store.addImageSetLayer({
     url: imageset.get_url(),
@@ -241,6 +266,7 @@ async function loadImagesetLayerForPlace(place: Place): Promise<ImageSetLayer |
   }).then((layer) => {
     imagesetLayers.value[getPlaceKey(place)] = layer;
     layer.set_enabled(false);
+    loadingImageset.value[key] = false;
     return layer;
   });
 }
@@ -263,7 +289,7 @@ function getImagesetLayerForPlace(place: Place): ImageSetLayer | null {
   return imagesetLayers.value[getPlaceKey(place)] ?? null;
 }
 
-function getThumbnailUrl(place: Place): string {
+function _getThumbnailUrl(place: Place): string {
 
   const imagesetThumbnail = getImageset(place)?.get_thumbnailUrl();
   if (imagesetThumbnail) {
@@ -289,6 +315,10 @@ function applySelectedPlaceOpacity(place: Place) {
   const layer = getImagesetLayerForPlace(place);
   if (!layer) return;
   layer.set_opacity(0);
+  if (isPersistantLayer(place)) {
+    layer.set_opacity(1);
+    return;
+  }
   layer.set_opacity(getOpacity(place));
 }
 
@@ -380,6 +410,11 @@ function isPersistantLayer(place: Place) {
   return iset.get_name() === props.persist;
 }
 
+const getPersistedPlace = () => {
+  if (props.persist === null) return null;
+  return places.value.find(p => isPersistantLayer(p)) ?? null;
+};
+
 function setPlaceVisibility(place: Place, visible: boolean) {
   const layer = getImagesetLayerForPlace(place);
   if (!layer) return false;
@@ -403,17 +438,19 @@ function syncSelectedLayerVisibility() {
 }
 
 watch(() => props.persist, (newPersist, oldPersist) => {
-  // if there is an old persist, hide it
-  if (oldPersist !== null && oldPersist !== undefined) {
+  if (oldPersist) {
     const oldPlace = places.value.find(p => getImageset(p)?.get_name() === oldPersist);
     if (oldPlace) {
       setPlaceVisibility(oldPlace, false);
     }
   }
-  // if there is a new persist, show it
-  if (newPersist !== null && newPersist !== undefined) {
+
+  if (newPersist) {
     const newPlace = places.value.find(p => getImageset(p)?.get_name() === newPersist);
     if (newPlace) {
+      if (selectedPlaces.value.includes(newPlace)) {
+        selectedPlaces.value = selectedPlaces.value.filter(p => p !== newPlace);
+      }
       const layer = getImagesetLayerForPlace(newPlace);
       if (layer) {
         setLayerVisibility(layer, true);
@@ -424,8 +461,31 @@ watch(() => props.persist, (newPersist, oldPersist) => {
       }
     }
   }
+  showPersistantPlace(places.value);
 });
 
+/* get the draw order of currently selected places, including the persistant one */
+function getSelectedPlacesDrawOrder() {
+  const _selected = selectedPlaces.value.slice();
+  if (!props.useSelectedOrder) {
+    _selected.sort((a, b) => places.value.indexOf(b) - places.value.indexOf(a));
+  }
+  const persisted = getPersistedPlace();
+  if (persisted) {
+    if (_selected.includes(persisted)) {
+      _selected.splice(_selected.indexOf(persisted), 1);
+    }
+    _selected.unshift(persisted);
+  }
+  return _selected;
+}
+
+const { setOrderForPlaces } = useLayerOrdering();
+function setDrawOrder() {
+  const selected = getSelectedPlacesDrawOrder();
+  setOrderForPlaces(selected);
+}
+
 watch(() => props.hideGalleryLayers, (hide) => {
   if (hide) {
     places.value.forEach(place => {
@@ -445,6 +505,11 @@ watch(selectedPlaces, () => {
   nextTick(() => { _internallySelecting = false; });
 }, { immediate: true });
 
+watch(() => [selectedPlaces.value, props.persist], () => {
+  setDrawOrder();
+  syncSelectedLayerVisibility();
+}, { deep: true });
+
 </script>
 
 <style lang="less">
@@ -607,12 +672,42 @@ watch(selectedPlaces, () => {
     background: hsla(120, 100%, 25%, 0.5);
     width: 100%;
     text-align: center;
-}
+  }
+
+  .gallery-item.gallery-imageset-loading::after {
+    content: "Loading...";
+    position: absolute;
+    inset: 0;
+    white-space: nowrap;
+    background: hsla(0, 0%, 0%, 0.5);
+    width: 100%;
+    text-align: center;
+    pointer-events: all;
+  }
 
   .place-name {
     font-size: 0.8em;
     margin-inline: 2px;
   }
+
+  .gallery-no-view {
+    background: rgba(0,0,0,0.5);
+    border-radius: 3px;
+    width: calc(var(--gallery-width) - 10px);
+    height: 45px;
+    text-align: center;
+    line-height: 1;
+    display:flex;
+    align-items: center;
+    padding-inline: 4px;
+    margin-block: 4px;
+    font-weight: bold;
+
+    span {
+      color: white;
+      font-size: 0.9em;
+    }
+  }
 
 }
 </style>

src/components/GalleryItem.vue

@@ -5,6 +5,7 @@
       { 'gallery-selected': selected },
       { 'galaxy-persisted': persistent },
       { 'gallery-item__borderless': borderless },
+      { 'gallery-imageset-loading': loading },
     ]"
   >
     <img
@@ -43,6 +44,7 @@ interface Props {
   borderless?: boolean;
   hideLabel?: boolean;
   hideImage?: boolean;
+  loading?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -53,6 +55,7 @@ const props = withDefaults(defineProps<Props>(), {
   borderless: false,
   hideLabel: false,
   hideImage: false,
+  loading: false,
 });
 
 const emit = defineEmits<{

src/components/ImageText.vue

@@ -267,12 +267,10 @@
   </div>
 </template>
 <script setup lang="ts">
-import type { PropType } from 'vue';
-import type { PhantomImageNames } from '../types';
 import Lightbox from './Lightbox.vue';
 defineProps({
   which: {
-    type: String as PropType<PhantomImageNames>,
+    type: String,
     required: true,
   },
   showHeading: {

src/components/InformationSheet.vue

@@ -3,6 +3,7 @@ a<!-- eslint-disable vue/max-attributes-per-line -->
   <v-card
     class="info-sheet"
     height="100%"
+    elevation="0"
   >
     <v-tabs
       id="tabs"
@@ -45,7 +46,7 @@ a<!-- eslint-disable vue/max-attributes-per-line -->
       :style="cssVars"
     >
       <v-window-item>
-        <v-card class="scrollable border-radius-0">
+        <v-card class="scrollable border-radius-0" elevation="0">
           <v-card-text class="info-text scrollable">
             <slot />
           </v-card-text>