@geode/opengeodeweb-front 10.34.0-rc.2 → 10.34.0-rc.21

package/app/composables/{tree_scroll.js → tree_scroll.ts}

@@ -1,22 +1,71 @@
-export function useTreeScroll(propsIn, emit, displayItems, actualItemProps) {
+import type { DisplayItem, EmitFn, ItemPropsConfig } from "./virtual_tree";
+
+interface TreeScrollProps {
+  scrollTop?: number;
+}
+
+interface ScrollableElement {
+  $el: { scrollTop: number; clientHeight: number } | undefined;
+}
+
+interface ScrollInfo {
+  scrollTop: number;
+  containerHeight: number;
+  itemHeight: number;
+}
+
+type ReadonlyMaybeRefOrGetter<Value> = Value | Ref<Value> | (() => Value);
+
+type ReadonlyDisplayItem = Omit<DisplayItem, "raw"> & {
+  readonly raw: Record<string, unknown>;
+};
+
+interface ScrollEventLike {
+  readonly target: EventTarget | null;
+}
+
+interface UseTreeScrollReturn {
+  internalScrollTop: Ref<number>;
+  virtualScrollRef: Ref<ScrollableElement | undefined>;
+  stickyHeader: ComputedRef<ReadonlyDisplayItem | undefined>;
+  handleScroll: (event: ScrollEventLike) => void;
+  scrollToIndex: (index: number) => void;
+  getScrollInfo: () => ScrollInfo;
+}
+
+function isHtmlElement(value: EventTarget | null): value is HTMLElement {
+  return value instanceof HTMLElement;
+}
+
+export function useTreeScroll(
+  propsIn: ReadonlyMaybeRefOrGetter<TreeScrollProps>,
+  emit: EmitFn,
+  displayItems: Ref<readonly ReadonlyDisplayItem[]>,
+  actualItemProps: Ref<ItemPropsConfig>,
+): UseTreeScrollReturn {
   const SCROLL_STICKY_THRESHOLD = 10;
   const DEFAULT_ITEM_HEIGHT = 28;
 
   const props = toRef(propsIn);
-  const internalScrollTop = ref(props.value.scrollTop || 0);
-  const virtualScrollRef = ref(undefined);
+  const internalScrollTop = ref(props.value.scrollTop ?? 0);
+  const virtualScrollRef = ref<ScrollableElement | undefined>(undefined);
 
-  function handleScroll(event) {
-    internalScrollTop.value = event.target.scrollTop;
-    emit("update:scrollTop", event.target.scrollTop);
+  function handleScroll(event: ScrollEventLike): void {
+    const { target } = event;
+    if (!isHtmlElement(target)) {
+      return;
+    }
+    const { scrollTop } = target;
+    internalScrollTop.value = scrollTop;
+    emit("update:scrollTop", scrollTop);
   }
 
   watch(
     () => props.value.scrollTop,
-    (newVal) => {
+    (newVal = 0) => {
       if (Math.abs(newVal - internalScrollTop.value) > 1) {
         internalScrollTop.value = newVal;
-        if (virtualScrollRef.value && virtualScrollRef.value.$el) {
+        if (virtualScrollRef.value !== undefined && virtualScrollRef.value.$el !== undefined) {
           virtualScrollRef.value.$el.scrollTop = newVal;
         }
       }
@@ -56,13 +105,13 @@ export function useTreeScroll(propsIn, emit, displayItems, actualItemProps) {
     return undefined;
   });
 
-  function scrollToIndex(index) {
-    if (index === -1 || !virtualScrollRef.value) {
+  function scrollToIndex(index: number): void {
+    if (index === -1 || virtualScrollRef.value === undefined) {
       return;
     }
 
     const container = virtualScrollRef.value.$el;
-    if (!container) {
+    if (container === undefined) {
       return;
     }
 
@@ -81,7 +130,7 @@ export function useTreeScroll(propsIn, emit, displayItems, actualItemProps) {
     }
   }
 
-  function getScrollInfo() {
+  function getScrollInfo(): ScrollInfo {
     const container = virtualScrollRef.value?.$el;
     const containerHeight = container ? container.clientHeight : 0;
     const itemHeight = actualItemProps.value?.height || DEFAULT_ITEM_HEIGHT;

package/app/composables/use_adaptive_styles.ts

@@ -0,0 +1,186 @@
+import type { MaybeComputedElementRef } from "@vueuse/core";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { useTreeviewStore } from "@ogw_front/stores/treeview";
+
+const LUMINANCE_THRESHOLD = 0.65;
+const ADAPTIVE_EXPONENT = 0.3;
+
+const MIN_BLUR = 8;
+const MAX_BLUR = 25;
+
+const MIN_OPACITY = 0;
+const MAX_OPACITY = 0.5;
+
+const MIN_BOOST = 1;
+const MAX_BOOST = 1.2;
+const ADAPTIVE_REFRESH_RATE = 150;
+
+// `target` is intentionally duck-typed: callers pass either a coordinates source (a plain object, a Ref/ComputedRef of one, or a getter function returning one) or an element ref/template ref destined for vueuse's useElementBounding - see call sites in Viewer/ContextMenu and Viewer/ObjectTree components.
+type AdaptiveStylesTarget = unknown;
+
+interface AdaptiveStylesOptions {
+  minOpacity?: number;
+  maxOpacity?: number;
+}
+
+interface CoordinatesLike {
+  x?: unknown;
+  y?: unknown;
+  width?: unknown;
+  height?: unknown;
+}
+
+interface RefLike {
+  value?: unknown;
+  x?: unknown;
+}
+
+function isRefLike(value: unknown): value is RefLike {
+  return typeof value === "object" && value !== null;
+}
+
+function isCoordinatesGetter(value: unknown): value is () => CoordinatesLike | undefined {
+  return typeof value === "function";
+}
+
+function isCoordinatesLike(value: unknown): value is CoordinatesLike {
+  return typeof value === "object" && value !== null;
+}
+
+function getValue(val: unknown): number {
+  if (typeof val === "object" && val !== null && "value" in val) {
+    const wrapped = (val as { value?: unknown }).value;
+    if (typeof wrapped === "number") {
+      return wrapped;
+    }
+  }
+  return typeof val === "number" ? val : 0;
+}
+
+// oxlint-disable max-lines-per-function
+export function useAdaptiveStyles(
+  target: AdaptiveStylesTarget,
+  options: AdaptiveStylesOptions = {},
+): {
+  adaptiveStyles: ComputedRef<{
+    "--adaptive-blur": string;
+    "--adaptive-opacity": number;
+    "--adaptive-brightness": number;
+  }>;
+  brightness: Ref<number>;
+} {
+  const hybridViewerStore = useHybridViewerStore();
+  const treeviewStore = useTreeviewStore();
+
+  const targetAsRefLike = isRefLike(target) ? target : undefined;
+  const isCoordinates =
+    target !== undefined &&
+    target !== null &&
+    (typeof target === "function" ||
+      (targetAsRefLike?.value !== undefined &&
+        targetAsRefLike.value !== null &&
+        (targetAsRefLike.value as { x?: unknown }).x !== undefined) ||
+      (targetAsRefLike?.x !== undefined && targetAsRefLike.value === undefined));
+
+  const bounding = useElementBounding(
+    // oxlint-disable-next-line no-unsafe-type-assertion -- duck-typed target; see comment above.
+    isCoordinates ? undefined : (target as MaybeComputedElementRef),
+  );
+
+  const unwrapped = computed(() => {
+    if (isCoordinates) {
+      let val: CoordinatesLike | undefined = undefined;
+      if (isCoordinatesGetter(target)) {
+        val = target();
+      } else if (targetAsRefLike?.value === undefined) {
+        val = targetAsRefLike;
+      } else if (isCoordinatesLike(targetAsRefLike.value)) {
+        val = targetAsRefLike.value;
+      }
+      return {
+        x: getValue(val?.x),
+        y: getValue(val?.y),
+        width: getValue(val?.width),
+        height: getValue(val?.height),
+      };
+    }
+    return {
+      x: bounding.x.value,
+      y: bounding.y.value,
+      width: bounding.width.value,
+      height: bounding.height.value,
+    };
+  });
+
+  const x = computed(() => unwrapped.value.x);
+  const y = computed(() => unwrapped.value.y);
+  const width = computed(() => unwrapped.value.width);
+  const height = computed(() => unwrapped.value.height);
+
+  const brightness = ref(LUMINANCE_THRESHOLD);
+
+  function calculateBrightness(): void {
+    brightness.value = hybridViewerStore.getAverageBrightness({
+      x: x.value,
+      y: y.value,
+      width: width.value,
+      height: height.value,
+    });
+  }
+
+  const updateBrightness = useThrottleFn(calculateBrightness, ADAPTIVE_REFRESH_RATE);
+
+  watch(
+    [
+      x,
+      y,
+      width,
+      height,
+      (): typeof hybridViewerStore.latestImage => hybridViewerStore.latestImage,
+    ],
+    updateBrightness,
+    {
+      immediate: true,
+    },
+  );
+
+  async function forceRefresh(): Promise<void> {
+    await nextTick();
+    bounding.update?.();
+    calculateBrightness();
+  }
+
+  if (getCurrentInstance()) {
+    onMounted(async () => {
+      try {
+        await forceRefresh();
+      } catch (error) {
+        console.error("forceRefresh failed:", error);
+      }
+    });
+  }
+
+  watch(() => treeviewStore.opened_views, forceRefresh, { deep: true });
+
+  const adaptiveStyles = computed(() => {
+    const normalized = Math.min(1, brightness.value / LUMINANCE_THRESHOLD);
+    const darkFactor = (1 - normalized) ** ADAPTIVE_EXPONENT;
+
+    const blur = MIN_BLUR + darkFactor * (MAX_BLUR - MIN_BLUR);
+    const minOpacity = options.minOpacity ?? MIN_OPACITY;
+    const maxOpacity = options.maxOpacity ?? MAX_OPACITY;
+    const opacity = minOpacity + darkFactor * (maxOpacity - minOpacity);
+    const brightnessBoost = MIN_BOOST + darkFactor * (MAX_BOOST - MIN_BOOST);
+
+    return {
+      "--adaptive-blur": `${blur}px`,
+      "--adaptive-opacity": opacity,
+      "--adaptive-brightness": brightnessBoost,
+    };
+  });
+
+  return {
+    adaptiveStyles,
+    brightness,
+  };
+}

package/app/composables/use_overlapping_picker.ts

@@ -0,0 +1,263 @@
+import { ref } from "vue";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+import { type DataItem, useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+interface PickedItem {
+  id: string;
+  viewer_id: number | undefined;
+}
+
+interface ProposedItem {
+  id: string;
+  viewer_id: number | undefined;
+  name: string;
+  viewer_type: string | undefined;
+  geode_object_type: string | undefined;
+}
+
+interface PickedResponse {
+  array_ids: string[];
+  viewer_id: number | null;
+  picked_data?: PickedItem[];
+}
+
+interface ViewerIdResult {
+  id: string | undefined;
+  viewer_id: number | undefined;
+}
+
+interface GetViewerIdParams {
+  x: number;
+  y: number;
+  containerWidth: number;
+  containerHeight: number;
+  containerRect: { left: number; top: number };
+}
+
+interface UseOverlappingPickerReturn {
+  displayIntermediate: Ref<boolean>;
+  intermediateItems: Ref<ProposedItem[]>;
+  intermediateMenuX: Ref<number>;
+  intermediateMenuY: Ref<number>;
+  getIntermediateMenuStyle: () => { position: string; left: string; top: string };
+  selectIntermediateItem: (item: ProposedItem | undefined) => void;
+  handleIntermediateMenuUpdate: (val: boolean) => void;
+  get_viewer_id: (params: GetViewerIdParams) => Promise<ViewerIdResult>;
+}
+
+function isPickedItem(entry: unknown): entry is PickedItem {
+  return (
+    typeof entry === "object" &&
+    entry !== null &&
+    "id" in entry &&
+    typeof entry.id === "string" &&
+    (!("viewer_id" in entry) ||
+      entry.viewer_id === undefined ||
+      typeof entry.viewer_id === "number")
+  );
+}
+
+function isPickedItemArray(value: unknown): value is PickedItem[] {
+  return Array.isArray(value) && value.every((entry) => isPickedItem(entry));
+}
+
+function isPickedResponse(value: unknown): value is PickedResponse {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  if (!("array_ids" in value) || !("viewer_id" in value)) {
+    return false;
+  }
+  const { array_ids, viewer_id } = value;
+  if (
+    !Array.isArray(array_ids) ||
+    !array_ids.every((entry) => typeof entry === "string") ||
+    (typeof viewer_id !== "number" && viewer_id !== null)
+  ) {
+    return false;
+  }
+  if ("picked_data" in value) {
+    return value.picked_data === undefined || isPickedItemArray(value.picked_data);
+  }
+  return true;
+}
+
+export function useOverlappingPicker(): UseOverlappingPickerReturn {
+  const dataStore = useDataStore();
+  const dataStyleStore = useDataStyleStore();
+  const viewerStore = useViewerStore();
+  const dataItems = dataStore.refAllItems();
+
+  const displayIntermediate = ref(false);
+  const intermediateItems = ref<ProposedItem[]>([]);
+  const intermediateMenuX = ref(0);
+  const intermediateMenuY = ref(0);
+  let resolveIntermediate: ((item: ProposedItem | undefined) => void) | undefined = undefined;
+
+  async function fetchProposedItems(pickedList: readonly PickedItem[]): Promise<ProposedItem[]> {
+    const proposedItems = await Promise.all(
+      pickedList.map(async (pick: PickedItem) => {
+        try {
+          const item = await dataStore.item(pick.id);
+          return {
+            id: pick.id,
+            viewer_id: pick.viewer_id,
+            name: item.name || "Unnamed Object",
+            viewer_type: item.viewer_type,
+            geode_object_type: item.geode_object_type,
+          };
+        } catch {
+          return {
+            id: pick.id,
+            viewer_id: pick.viewer_id,
+            name: "Unnamed Object",
+            viewer_type: undefined,
+            geode_object_type: undefined,
+          };
+        }
+      }),
+    );
+    return proposedItems;
+  }
+
+  function getIntermediateMenuStyle(): { position: string; left: string; top: string } {
+    return {
+      position: "fixed",
+      left: `${intermediateMenuX.value}px`,
+      top: `${intermediateMenuY.value}px`,
+    };
+  }
+
+  function selectIntermediateItem(item: ProposedItem | undefined): void {
+    if (resolveIntermediate) {
+      resolveIntermediate(item);
+      resolveIntermediate = undefined;
+    }
+  }
+
+  function handleIntermediateMenuUpdate(val: boolean): void {
+    if (!val && resolveIntermediate) {
+      resolveIntermediate(undefined);
+      resolveIntermediate = undefined;
+    }
+  }
+
+  async function get_viewer_id({
+    x,
+    y,
+    containerWidth,
+    containerHeight,
+    containerRect,
+  }: GetViewerIdParams): Promise<ViewerIdResult> {
+    const activeIds = new Set(dataItems.value.map((i: DataItem) => i.id));
+    const visibleStyleIds = Object.keys(dataStyleStore.styles).filter(
+      (styleId) => activeIds.has(styleId) && dataStyleStore.objectVisibility(styleId) === true,
+    );
+
+    const viewableChecks = await Promise.all(
+      visibleStyleIds.map(async (styleId) => {
+        try {
+          return (await dataStore.isItemViewable(styleId)) ? styleId : undefined;
+        } catch {
+          return undefined;
+        }
+      }),
+    );
+    const ids = viewableChecks.filter((id): id is string => Boolean(id));
+
+    const result: ViewerIdResult = { id: undefined, viewer_id: undefined };
+    // A plain `let` reassigned only from inside the response_function closure
+    // Below loses its declared type for TS's control-flow narrowing once
+    // Control leaves the closure - wrapping it in an object sidesteps that.
+    const responseHolder: { pickedResponse: PickedResponse | undefined } = {
+      pickedResponse: undefined,
+    };
+    const schema = viewer_schemas.opengeodeweb_viewer.viewer.picked_ids;
+    const params = { x, y, ids };
+    await viewerStore.request(
+      {
+        schema,
+        params,
+      },
+      {
+        response_function: (response: unknown) => {
+          responseHolder.pickedResponse = isPickedResponse(response) ? response : undefined;
+        },
+      },
+    );
+    const { pickedResponse } = responseHolder;
+
+    if (!pickedResponse || pickedResponse.array_ids.length === 0) {
+      return result;
+    }
+
+    const { array_ids, viewer_id, picked_data } = pickedResponse;
+
+    const pickedList: PickedItem[] = [];
+    if (picked_data && picked_data.length > 0) {
+      pickedList.push(...picked_data);
+    } else {
+      for (const pickId of array_ids) {
+        pickedList.push({ id: pickId, viewer_id: viewer_id ?? undefined });
+      }
+    }
+
+    if (pickedList.length <= 1) {
+      return { id: pickedList[0]?.id, viewer_id: pickedList[0]?.viewer_id };
+    }
+
+    const proposedItems = await fetchProposedItems(pickedList);
+    intermediateItems.value = proposedItems;
+
+    const yUI = containerHeight - y;
+    const MENU_WIDTH = 340;
+    const MENU_BASE_HEIGHT = 55;
+    const MENU_ITEM_HEIGHT = 48;
+    const MENU_HEIGHT = MENU_BASE_HEIGHT + proposedItems.length * MENU_ITEM_HEIGHT;
+    const CLAMP_MARGIN = 10;
+    const clampedX = Math.min(
+      Math.max(x, CLAMP_MARGIN),
+      containerWidth - MENU_WIDTH - CLAMP_MARGIN,
+    );
+    let clampedY = yUI;
+    if (yUI + MENU_HEIGHT > containerHeight - CLAMP_MARGIN) {
+      clampedY = Math.max(yUI - MENU_HEIGHT, CLAMP_MARGIN);
+    } else {
+      clampedY = Math.max(yUI, CLAMP_MARGIN);
+    }
+    clampedY = Math.min(
+      Math.max(clampedY, CLAMP_MARGIN),
+      containerHeight - MENU_HEIGHT - CLAMP_MARGIN,
+    );
+
+    intermediateMenuX.value = containerRect.left + clampedX;
+    intermediateMenuY.value = containerRect.top + clampedY;
+    displayIntermediate.value = true;
+
+    /* eslint-disable-next-line promise/avoid-new */
+    return new Promise<ViewerIdResult>((resolve) => {
+      resolveIntermediate = (chosenResult: ProposedItem | undefined): void => {
+        displayIntermediate.value = false;
+        resolve(
+          chosenResult
+            ? { id: chosenResult.id, viewer_id: chosenResult.viewer_id }
+            : { id: undefined, viewer_id: undefined },
+        );
+      };
+    });
+  }
+
+  return {
+    displayIntermediate,
+    intermediateItems,
+    intermediateMenuX,
+    intermediateMenuY,
+    getIntermediateMenuStyle,
+    selectIntermediateItem,
+    handleIntermediateMenuUpdate,
+    get_viewer_id,
+  };
+}

package/app/composables/use_quick_colormap.ts

@@ -0,0 +1,55 @@
+import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+// Runtime guard for the unknown response of viewerStore.request(), used instead of an
+// `as` cast so the shape is actually verified (data_id, when present, must be a string).
+function isPickColormapResult(value: unknown): value is { data_id?: string } {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    (!("data_id" in value) || typeof value.data_id === "string")
+  );
+}
+
+export function useQuickColormap(): {
+  pickColormap: typeof pickColormap;
+  quickColormap: typeof quickColormap;
+} {
+  const viewerStore = useViewerStore();
+  const quickColormap = reactive<{
+    data_id: string | undefined;
+    show: boolean;
+    x: number;
+    y: number;
+  }>({
+    data_id: undefined,
+    show: false,
+    x: 0,
+    y: 0,
+  });
+
+  async function pickColormap(
+    offsetX: number,
+    offsetY: number,
+    clientX: number,
+    clientY: number,
+  ): Promise<boolean> {
+    try {
+      const schema = viewer_schemas.opengeodeweb_viewer.viewer.pick_colormap;
+      const params = { x: offsetX, y: offsetY };
+      const result = await viewerStore.request({ schema, params });
+      if (isPickColormapResult(result) && result.data_id !== undefined && result.data_id !== "") {
+        quickColormap.data_id = result.data_id;
+        quickColormap.x = clientX;
+        quickColormap.y = clientY;
+        quickColormap.show = true;
+        return true;
+      }
+    } catch (error) {
+      console.error("Error picking colormap:", error);
+    }
+    return false;
+  }
+
+  return { pickColormap, quickColormap };
+}