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

package/app/composables/tree_filter.js

@@ -1,138 +0,0 @@
-function customFilter(value, searchQuery, item) {
-  if (!searchQuery) {
-    return true;
-  }
-  if (!item || !item.raw) {
-    return false;
-  }
-  const query = searchQuery.toLowerCase();
-  const { title = "", id = value } = item.raw || {};
-  return [title, id].some((field) => String(field).toLowerCase().includes(query));
-}
-
-function sortAndFormatItems(itemList, sortType, options = {}) {
-  if (!itemList || !Array.isArray(itemList)) {
-    return [];
-  }
-  const field = sortType === "name" ? "title" : "id";
-  const localeOptions = { numeric: true, sensitivity: "base" };
-
-  const sorted = itemList
-    .filter((item) => item !== null && item !== undefined)
-    .toSorted((itemA, itemB) => {
-      const fieldA = String(itemA[field] || itemA.id || "");
-      const fieldB = String(itemB[field] || itemB.id || "");
-      return fieldA.localeCompare(fieldB, undefined, localeOptions);
-    });
-
-  if (options.recursiveSort) {
-    return sorted.map((item) => {
-      if (item.children && item.children.length > 0) {
-        return {
-          ...item,
-          children: sortAndFormatItems(item.children, sortType, options),
-        };
-      }
-      return item;
-    });
-  }
-  return sorted;
-}
-
-function useTreeFilter(itemsIn, options = {}) {
-  const rawItems = typeof itemsIn === "function" ? computed(itemsIn) : toRef(itemsIn);
-  const search = ref("");
-  const sortType = ref(options.defaultSort || "name");
-  const filterOptions = ref(options.defaultFilters || {});
-
-  const availableFilterOptions = computed(() => {
-    if (!rawItems.value) {
-      return [];
-    }
-    return rawItems.value.map((category) => category.title || category.id);
-  });
-
-  watch(
-    availableFilterOptions,
-    (newOptions) => {
-      for (const option of newOptions) {
-        if (filterOptions.value[option] === undefined) {
-          filterOptions.value[option] = true;
-        }
-      }
-    },
-    { immediate: true },
-  );
-
-  const processedItems = computed(() => {
-    if (!rawItems.value) {
-      return [];
-    }
-    const filteredByCategory = rawItems.value.filter((category) => {
-      const key = category.title || category.id;
-      return filterOptions.value[key] !== false;
-    });
-
-    const sorted = sortAndFormatItems(filteredByCategory, sortType.value, options);
-
-    if (!search.value) {
-      return sorted;
-    }
-
-    const result = [];
-    for (const category of sorted) {
-      const children = (category.children || []).filter((child) =>
-        customFilter(child.id, search.value, { raw: child }),
-      );
-      if (children.length > 0 || customFilter(category.id, search.value, { raw: category })) {
-        result.push({ ...category, children });
-      }
-    }
-    return result;
-  });
-
-  function toggleSort() {
-    sortType.value = sortType.value === "name" ? "id" : "name";
-  }
-
-  const allItems = computed(() => {
-    const map = new Map();
-    function traverse(items) {
-      for (const item of items) {
-        map.set(item.id, item);
-        if (item.children) {
-          traverse(item.children);
-        }
-      }
-    }
-    traverse(rawItems.value || []);
-    return map;
-  });
-
-  function applySearchFilter(newSelection, previousSelection = []) {
-    if (!search.value) {
-      return newSelection;
-    }
-    const allItemsMap = allItems.value;
-    function matches(id) {
-      const item = allItemsMap.get(id);
-      return item && customFilter(id, search.value, { raw: item });
-    }
-    const hidden = previousSelection.filter((id) => !matches(id));
-    const visible = newSelection.filter((id) => matches(id));
-    return [...new Set([...hidden, ...visible])];
-  }
-
-  return {
-    search,
-    sortType,
-    filterOptions,
-    processedItems,
-    availableFilterOptions,
-    toggleSort,
-    customFilter,
-    applySearchFilter,
-  };
-}
-
-export { customFilter, useTreeFilter, sortAndFormatItems };

package/app/composables/use_adaptive_styles.js

@@ -1,120 +0,0 @@
-import { useElementBounding, useThrottleFn } 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;
-
-function getValue(val) {
-  if (typeof val === "object" && val !== null && val.value !== undefined) {
-    return val.value;
-  }
-  return val ?? 0;
-}
-
-// oxlint-disable max-lines-per-function
-export function useAdaptiveStyles(target, options = {}) {
-  const hybridViewerStore = useHybridViewerStore();
-  const treeviewStore = useTreeviewStore();
-
-  const isCoordinates =
-    target &&
-    (typeof target === "function" ||
-      (target.value !== undefined && target.value !== null && target.value.x !== undefined) ||
-      (target.x !== undefined && target.value === undefined));
-
-  const bounding = useElementBounding(isCoordinates ? undefined : target);
-
-  const unwrapped = computed(() => {
-    if (isCoordinates) {
-      let val = undefined;
-      if (typeof target === "function") {
-        val = target();
-      } else if (target.value === undefined) {
-        val = target;
-      } else {
-        val = target.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() {
-    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, () => hybridViewerStore.latestImage], updateBrightness, {
-    immediate: true,
-  });
-
-  async function forceRefresh() {
-    await nextTick();
-    bounding.update?.();
-    calculateBrightness();
-  }
-
-  if (getCurrentInstance()) {
-    onMounted(() => {
-      forceRefresh();
-    });
-  }
-
-  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.js

@@ -1,169 +0,0 @@
-import { ref } from "vue";
-import { useDataStore } from "@ogw_front/stores/data";
-import { useDataStyleStore } from "@ogw_front/stores/data_style";
-import { useViewerStore } from "@ogw_front/stores/viewer";
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-
-export function useOverlappingPicker() {
-  const dataStore = useDataStore();
-  const dataStyleStore = useDataStyleStore();
-  const viewerStore = useViewerStore();
-  const dataItems = dataStore.refAllItems();
-
-  const displayIntermediate = ref(false);
-  const intermediateItems = ref([]);
-  const intermediateMenuX = ref(0);
-  const intermediateMenuY = ref(0);
-  let resolveIntermediate = undefined;
-
-  function fetchProposedItems(pickedList) {
-    return Promise.all(
-      pickedList.map(async (pick) => {
-        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,
-          };
-        }
-      }),
-    );
-  }
-
-  function getIntermediateMenuStyle() {
-    return {
-      position: "fixed",
-      left: `${intermediateMenuX.value}px`,
-      top: `${intermediateMenuY.value}px`,
-    };
-  }
-
-  function selectIntermediateItem(item) {
-    if (resolveIntermediate) {
-      resolveIntermediate(item);
-      resolveIntermediate = undefined;
-    }
-  }
-
-  function handleIntermediateMenuUpdate(val) {
-    if (!val && resolveIntermediate) {
-      resolveIntermediate(undefined);
-      resolveIntermediate = undefined;
-    }
-  }
-
-  async function get_viewer_id({ x, y, containerWidth, containerHeight, containerRect }) {
-    const activeIds = new Set(dataItems.value.map((i) => i.id));
-    const visibleStyleIds = Object.keys(dataStyleStore.styles).filter(
-      (styleId) => activeIds.has(styleId) && dataStyleStore.objectVisibility(styleId),
-    );
-
-    const viewableChecks = await Promise.all(
-      visibleStyleIds.map(async (styleId) => {
-        try {
-          return (await dataStore.isItemViewable(styleId)) ? styleId : undefined;
-        } catch {
-          return undefined;
-        }
-      }),
-    );
-    const ids = viewableChecks.filter(Boolean);
-
-    const result = { id: undefined, viewer_id: undefined };
-    let pickedResponse = undefined;
-    const schema = viewer_schemas.opengeodeweb_viewer.viewer.picked_ids;
-    const params = { x, y, ids };
-    await viewerStore.request(
-      {
-        schema,
-        params,
-      },
-      {
-        response_function: (response) => {
-          pickedResponse = response;
-        },
-      },
-    );
-
-    if (!pickedResponse || !pickedResponse.array_ids || pickedResponse.array_ids.length === 0) {
-      return result;
-    }
-
-    const { array_ids, viewer_id, picked_data } = pickedResponse;
-
-    const pickedList = [];
-    if (picked_data && picked_data.length > 0) {
-      pickedList.push(...picked_data);
-    } else {
-      for (const pickId of array_ids) {
-        pickedList.push({ id: pickId, viewer_id });
-      }
-    }
-
-    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((resolve) => {
-      resolveIntermediate = (chosenResult) => {
-        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.js

@@ -1,32 +0,0 @@
-import { useViewerStore } from "@ogw_front/stores/viewer";
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-
-export function useQuickColormap() {
-  const viewerStore = useViewerStore();
-  const quickColormap = reactive({
-    data_id: undefined,
-    show: false,
-    x: 0,
-    y: 0,
-  });
-
-  async function pickColormap(offsetX, offsetY, clientX, clientY) {
-    try {
-      const schema = viewer_schemas.opengeodeweb_viewer.viewer.pick_colormap;
-      const params = { x: offsetX, y: offsetY };
-      const result = await viewerStore.request({ schema, params });
-      if (result && 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 };
-}

package/app/composables/virtual_tree.js

@@ -1,191 +0,0 @@
-export function useVirtualTree(propsIn, emit) {
-  const props = toRef(propsIn);
-
-  const actualItemProps = computed(() => ({
-    value: "id",
-    title: "title",
-    children: "children",
-    height: 28,
-    ...props.value.itemProps,
-  }));
-
-  const actualSelection = computed(() => ({
-    selectable: false,
-    strategy: "classic",
-    ...props.value.selection,
-  }));
-
-  const openedSet = computed(() => new Set(props.value.opened));
-  const selectedSet = computed(() => new Set(props.value.selected));
-  const activeSet = computed(() => new Set(props.value.active || []));
-
-  function toggleOpen(item) {
-    const id = item[actualItemProps.value.value];
-    const { opened: openedArray = [] } = props.value;
-    const newOpened = new Set(openedArray);
-    if (newOpened.has(id)) {
-      newOpened.delete(id);
-    } else {
-      newOpened.add(id);
-    }
-    emit("update:opened", [...newOpened]);
-  }
-
-  function getLeafChildrenIds(item, ids = []) {
-    const children = item[actualItemProps.value.children];
-    if (children) {
-      for (const child of children) {
-        getLeafChildrenIds(child, ids);
-      }
-    } else {
-      ids.push(item[actualItemProps.value.value]);
-    }
-    return ids;
-  }
-
-  function isSelected(item) {
-    const id = item[actualItemProps.value.value];
-    if (selectedSet.value.has(id)) {
-      return true;
-    }
-    if (actualSelection.value.strategy === "classic") {
-      const childrenIds = getLeafChildrenIds(item);
-      return (
-        childrenIds.length > 0 && childrenIds.every((childId) => selectedSet.value.has(childId))
-      );
-    }
-    return false;
-  }
-
-  function getIndeterminate(item) {
-    if (actualSelection.value.strategy !== "classic") {
-      return false;
-    }
-    const childrenIds = getLeafChildrenIds(item);
-    if (childrenIds.length === 0) {
-      return false;
-    }
-
-    const selectedChildren = childrenIds.filter((childId) => selectedSet.value.has(childId));
-    return selectedChildren.length > 0 && selectedChildren.length < childrenIds.length;
-  }
-
-  function toggleSelect(item) {
-    const id = item[actualItemProps.value.value];
-    const { selected: selectedArray = [] } = props.value;
-    const newSelected = new Set(selectedArray);
-    const isCurrentlySelected = newSelected.has(id) || isSelected(item);
-
-    if (actualSelection.value.strategy === "classic") {
-      const childrenIds = getLeafChildrenIds(item);
-      if (isCurrentlySelected) {
-        newSelected.delete(id);
-        for (const childId of childrenIds) {
-          newSelected.delete(childId);
-        }
-      } else {
-        newSelected.add(id);
-        for (const childId of childrenIds) {
-          newSelected.add(childId);
-        }
-      }
-    } else if (isCurrentlySelected) {
-      newSelected.delete(id);
-    } else {
-      newSelected.add(id);
-    }
-    emit("update:selected", [...newSelected]);
-  }
-
-  function flattenTree(itemsList, depth = 0, result = []) {
-    const { search, customFilter } = props.value;
-    const lowerSearch = search ? search.toLowerCase() : "";
-
-    for (const item of itemsList) {
-      const id = item[actualItemProps.value.value];
-      const children = item[actualItemProps.value.children];
-      const hasChildren = children && children.length > 0;
-
-      const isOpen = openedSet.value.has(id);
-      const isActive = activeSet.value.has(id);
-
-      if (lowerSearch) {
-        const matches = customFilter
-          ? customFilter(id, search, { raw: item })
-          : (item[actualItemProps.value.title] || "").toLowerCase().includes(lowerSearch) ||
-            String(id).toLowerCase().includes(lowerSearch);
-
-        if (hasChildren) {
-          const subtree = [];
-          flattenTree(children, depth + 1, subtree);
-          if (subtree.length === 0 && !matches) {
-            continue;
-          }
-
-          result.push({
-            raw: item,
-            id,
-            depth,
-            isOpen,
-            isActive,
-            isLeaf: false,
-          });
-          if (isOpen) {
-            result.push(...subtree);
-          }
-          continue;
-        }
-        if (!matches) {
-          continue;
-        }
-      }
-
-      result.push({
-        raw: item,
-        id,
-        depth,
-        isOpen,
-        isActive,
-        isLeaf: !hasChildren,
-      });
-
-      if (isOpen && hasChildren) {
-        flattenTree(children, depth + 1, result);
-      }
-    }
-    return result;
-  }
-
-  function traverse(itemsList, allIds) {
-    for (const item of itemsList) {
-      const children = item[actualItemProps.value.children];
-      if (children && children.length > 0) {
-        allIds.push(item[actualItemProps.value.value]);
-        traverse(children, allIds);
-      }
-    }
-  }
-
-  const displayItems = computed(() => flattenTree(props.value.items || []));
-
-  watch(
-    () => props.value.search,
-    (newSearch, oldSearch) => {
-      if (newSearch && !oldSearch) {
-        const allIds = [];
-        traverse(props.value.items || [], allIds);
-        emit("update:opened", [...new Set([...(props.value.opened || []), ...allIds])]);
-      }
-    },
-  );
-
-  return {
-    actualItemProps,
-    actualSelection,
-    displayItems,
-    toggleOpen,
-    toggleSelect,
-    isSelected,
-    getIndeterminate,
-  };
-}