@eodash/eodash 5.7.1 → 5.8.0

package/widgets/EodashProcess/index.vue

@@ -1,19 +1,24 @@
 <template>
-  <div ref="container" class="py-1">
-    <ProcessList :map-element="mapElement" :enable-compare="enableCompare" />
-    <eox-jsonform
-      v-if="jsonformSchema"
-      :key="jsonformKey"
-      ref="jsonformEl"
-      .schema="jsonformSchema"
-    ></eox-jsonform>
-    <EodashChart
-      v-if="!areChartsSeparateLayout"
-      :vega-embed-options="vegaEmbedOptions"
-      :enable-compare="enableCompare"
+  <div ref="container" class="eodash-process-container">
+    <div class="eodash-process-content">
+      <ProcessList :map-element="mapElement" :enable-compare="enableCompare" />
+      <eox-jsonform
+        v-if="jsonformSchema"
+        :key="jsonformKey"
+        ref="jsonformEl"
+        .schema="jsonformSchema"
+      ></eox-jsonform>
+      <EodashChart
+        v-if="!areChartsSeparateLayout"
+        :vega-embed-options="vegaEmbedOptions"
+        :enable-compare="enableCompare"
+      >
+      </EodashChart>
+    </div>
+    <div
+      class="eodash-process-actions"
+      v-if="showExecBtn || (processResults.length && isProcessed && !isAsync)"
     >
-    </EodashChart>
-    <div class="text-right">
       <v-btn
         v-if="showExecBtn"
         :loading="loading"
@@ -45,7 +50,7 @@ import "@eox/drawtools";
 import "@eox/jsonform";
 import { useSTAcStore } from "@/store/stac";
 import { storeToRefs } from "pinia";
-import { computed, ref, useTemplateRef } from "vue";
+import { computed, ref, useTemplateRef, watch } from "vue";
 import ProcessList from "./ProcessList.vue";
 import EodashChart from "../EodashChart.vue";
 import { handleProcesses } from "./methods/handling";
@@ -88,6 +93,90 @@ const jsonformEl =
     useTemplateRef("jsonformEl")
   );
 
+// Inject custom styles into the eox-jsonform shadow DOM to make eox-drawtools inline
+watch(jsonformEl, (el) => {
+  if (el && el.shadowRoot) {
+    const styleId = "eodash-drawtools-inline-style";
+    if (!el.shadowRoot.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = `
+        /* Compact standard form elements */
+        .form-control, .form-group {
+          margin-bottom: 8px !important;
+        }
+        .form-control > label, .form-group > label {
+          margin-bottom: 2px !important;
+          font-size: 0.9em;
+        }
+        
+        /* Specific layout for drawtools */
+        .form-control:has(eox-drawtools) {
+          position: relative;
+          padding: 8px 12px !important;
+          border: none !important;
+          background: transparent !important;
+          margin-bottom: 8px !important;
+        }
+        .form-control:has(eox-drawtools) > label {
+          position: absolute;
+          left: 12px;
+          top: 8px;
+          margin: 0 !important;
+          width: calc(100% - 180px); /* Give label maximum available width */
+          line-height: 1.2;
+          display: flex;
+          align-items: flex-start;
+          padding-top: 8px;
+          pointer-events: none; /* Let clicks pass through to buttons if they overlap slightly */
+        }
+        .form-control:has(eox-drawtools) > eox-drawtools {
+          display: block;
+          width: 100%;
+        }
+      `;
+      el.shadowRoot.appendChild(style);
+    }
+
+    const injectDrawtoolsStyle = () => {
+      const drawtools = el?.shadowRoot?.querySelector("eox-drawtools");
+      if (drawtools && drawtools.shadowRoot) {
+        if (
+          !drawtools.shadowRoot.getElementById("eodash-drawtools-indent-style")
+        ) {
+          const dtStyle = document.createElement("style");
+          dtStyle.id = "eodash-drawtools-indent-style";
+          dtStyle.textContent = `
+            eox-drawtools-controller {
+              display: flex;
+              justify-content: flex-end; /* Push buttons to the right */
+              min-height: 40px;
+              width: 100%;
+            }
+            eox-drawtools-list {
+              display: block;
+              margin-top: 10px;
+              width: 100%;
+            }
+          `;
+          drawtools.shadowRoot.appendChild(dtStyle);
+          return true;
+        }
+      }
+      return false;
+    };
+
+    if (!injectDrawtoolsStyle()) {
+      const observer = new MutationObserver(() => {
+        if (injectDrawtoolsStyle()) {
+          observer.disconnect();
+        }
+      });
+      observer.observe(el.shadowRoot, { childList: true, subtree: true });
+    }
+  }
+});
+
 const isAsync = computed(
   () =>
     selectedStac.value?.links.filter((l) => l.endpoint === "eoxhub_workspaces")
@@ -189,7 +278,37 @@ useAutoExec(autoExec, jsonformEl, jsonformSchema, startProcess);
 </script>
 <style>
 eox-jsonform {
-  padding: 0.7em;
+  padding: 0 12px;
   min-height: 0px;
+  flex-shrink: 0;
+}
+
+/* Force the specific panel wrapping this component to utilize 100% height */
+.bg-surface:has(.eodash-process-container) {
+  height: calc(100% - 30px);
+  overflow: hidden;
+}
+
+/* Make sure this container takes up full height and acts as a flex column */
+.eodash-process-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.eodash-process-content {
+  flex-grow: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.eodash-process-actions {
+  text-align: right;
+  padding: 4px 12px;
+  flex-shrink: 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  background: inherit;
 }
 </style>

package/widgets/EodashProcess/methods/composables.js

@@ -59,6 +59,19 @@ export const useInitProcess = ({
       });
 
       if (newJsonForm) {
+        // Layer rebuilds strip drawtools' selection interactions; remount
+        // the form so initSelection re-attaches them.
+        const selectionStripped =
+          Object.values(newJsonForm.properties ?? {}).some(
+            (p) => p?.options?.drawtools?.layerId,
+          ) &&
+          !mapElement.value?.selectInteractions?.[
+            "SelectLayerClickInteraction"
+          ];
+        if (selectionStripped) {
+          jsonformSchema.value = null;
+          await nextTick();
+        }
         jsonformSchema.value = newJsonForm;
       }
     }

package/widgets/EodashProcess/methods/outputs.js

@@ -421,7 +421,6 @@ export async function processVector(links, jsonformValue, layerId) {
       type: "Vector",
       source: {
         type: "Vector",
-        //@ts-expect-error TODO
         url: mustache.render(link.href, {
           ...(jsonformValue ?? {}),
         }),

package/widgets/EodashProcess/methods/utils.js

@@ -89,10 +89,10 @@ export async function createTiffLayerDefinition(
   }
   // We want to make sure the urls are alphabetically sorted
   urls = urls.sort();
-  /** @type {import("@eox/map/src/layers").EOxLayerType<"WebGLTile","GeoTIFF"> | undefined} */
+
   const layerdef =
     urls.length > 0
-      ? {
+      ? /** @type {import("@eox/map/src/layers").EOxLayerType<"WebGLTile","GeoTIFF">} */ ({
           type: "WebGLTile",
           source: {
             type: "GeoTIFF",
@@ -106,7 +106,7 @@ export async function createTiffLayerDefinition(
             layerControlToolsExpand: true,
           },
           ...(style && { style: style }),
-        }
+        })
       : undefined;
 
   // We want to see if the currently selected indicator uses a
@@ -309,31 +309,33 @@ export async function creatAsyncProcessLayerDefinitions(
 
     switch (resultItem.type) {
       case "image/tiff": {
-        layers.push({
-          type: "WebGLTile",
-          properties: {
-            id: endpointLink.id + "_process" + resultItem.id + postfixId,
-            title:
-              "Results " +
-              (selectedStac?.id ?? "") +
-              " " +
-              (resultItem.id ?? ""),
-            layerControlToolsExpand: true,
-            ...(layerConfig && { layerConfig }),
-            ...extraProperties,
-          },
-          source: {
-            type: "GeoTIFF",
-            normalize: !style,
-            sources: resultItem.urls.map((url) => ({ url })),
-            //@ts-expect-error TODO
-            ...(selectedStac["eodash:mapProjection"]?.["name"] && {
+        layers.push(
+          /** @type {import("@eox/map/src/layers").EOxLayerType<"WebGLTile","GeoTIFF">} */ ({
+            type: "WebGLTile",
+            properties: {
+              id: endpointLink.id + "_process" + resultItem.id + postfixId,
+              title:
+                "Results " +
+                (selectedStac?.id ?? "") +
+                " " +
+                (resultItem.id ?? ""),
+              layerControlToolsExpand: true,
+              ...(layerConfig && { layerConfig }),
+              ...extraProperties,
+            },
+            source: {
+              type: "GeoTIFF",
+              normalize: !style,
+              sources: resultItem.urls.map((url) => ({ url })),
               //@ts-expect-error TODO
-              projection: selectedStac["eodash:mapProjection"]["name"],
-            }),
-          },
-          ...(style && { style }),
-        });
+              ...(selectedStac["eodash:mapProjection"]?.["name"] && {
+                //@ts-expect-error TODO
+                projection: selectedStac["eodash:mapProjection"]["name"],
+              }),
+            },
+            ...(style && { style }),
+          }),
+        );
         break;
       }
       case "application/geo+json": {

package/widgets/ExportState.vue

@@ -34,7 +34,7 @@
           <strong>Map Layers Configuration</strong>
         </p>
         <div class="pa-3 code-block mb-4">
-          {{ removeUnneededProperties(getLayers()) }}
+          {{ removeUnneededProperties(getLayers(), layerControlFormValue) }}
         </div>
 
         <div v-if="chartSpec" class="mb-4">
@@ -63,6 +63,7 @@ import { copyToClipBoard } from "@/utils";
 import { ref } from "vue";
 import { getLayers as getLayerAction } from "@/store/actions";
 import { mapPosition, availableMapProjection, chartSpec } from "@/store/states";
+import { layerControlFormValue } from "@/utils/states";
 import { removeUnneededProperties } from "@/eodashSTAC/helpers";
 import { base64EncodeSpec } from "@eox/chart";
 
@@ -86,7 +87,15 @@ const copyBtns = [
   {
     id: Symbol(),
     copyFn: async () =>
-      await copyToClipBoard(JSON.stringify(props.getLayers()), copySuccess),
+      await copyToClipBoard(
+        JSON.stringify(
+          removeUnneededProperties(
+            props.getLayers(),
+            layerControlFormValue.value,
+          ),
+        ),
+        copySuccess,
+      ),
     copyAs: "layers configuration",
   },
   {
@@ -110,7 +119,7 @@ const getMapStepCode = () => {
 #### Tour step title
 Text describing the current step of the tour and why it is interesting what the map shows currently
 `;
-  return `${preTag}'${JSON.stringify(removeUnneededProperties(props.getLayers()))}' ${endTag}`;
+  return `${preTag}'${JSON.stringify(removeUnneededProperties(props.getLayers(), layerControlFormValue.value))}' ${endTag}`;
 };
 const getMapEntryCode = () => {
   const [x, y, z] = mapPosition.value;
@@ -118,7 +127,7 @@ const getMapEntryCode = () => {
     "## Map Example <!" +
     '--{as="eox-map" style="width: 100%; height: 500px;" layers=';
   const endTag = `zoom="${z}" center=[${[x, y]}] projection="${availableMapProjection.value}" }-->`;
-  return `${preTag}'${JSON.stringify(removeUnneededProperties(props.getLayers()))}' ${endTag}`;
+  return `${preTag}'${JSON.stringify(removeUnneededProperties(props.getLayers(), layerControlFormValue.value))}' ${endTag}`;
 };
 
 const getChartExportCode = () => {

package/dist/client/EodashChart-ChrkA5oS.js

@@ -1,145 +0,0 @@
-import { computed, ref, useTemplateRef, onMounted, onBeforeUnmount, openBlock, createElementBlock, createElementVNode, withDirectives, unref, createCommentVNode, normalizeStyle, toRaw } from 'vue';
-import '@eox/chart';
-import { o as onChartClick } from './handling-B6I1V5eG.js';
-import { ac as compareChartData, ad as chartData, X as compareChartSpec, W as chartSpec, V as areChartsSeparateLayout } from './helpers-CBqIUSXJ.js';
-import { _ as _export_sfc, ad as getOverlayParent } from './asWebComponent-BlFN2lkB.js';
-import { mdiArrowCollapse, mdiArrowExpand } from '@mdi/js';
-import { T as Tooltip } from './index-CJ9UI3ln.js';
-
-const _style_0 = ".chart-frame[data-v-9ad3f535]{position:relative}.chart-toggle[data-v-9ad3f535]{position:absolute;top:18px;right:46px;z-index:2;cursor:pointer}";
-
-const _hoisted_1 = { ref: "container" };
-const _hoisted_2 = { class: "chart-frame" };
-const _hoisted_3 = {
-  viewBox: "0 0 20 20",
-  width: "20",
-  height: "20",
-  "aria-hidden": "true"
-};
-const _hoisted_4 = ["d"];
-const _hoisted_5 = [".spec", ".dataValues", ".opt"];
-
-
-const _sfc_main = {
-  __name: 'EodashChart',
-  props: {
-  enableCompare: {
-    type: Boolean,
-    default: false,
-  },
-  vegaEmbedOptions: {
-    /** @type {import("vue").PropType<import("vega-embed").EmbedOptions>} */
-    type: Object,
-    default() {
-      return { actions: true };
-    },
-  },
-},
-  setup(__props) {
-
-
-
-const usedChartData = computed(() => {
-  return __props.enableCompare ? compareChartData.value : chartData.value;
-});
-
-const usedChartSpec = computed(() => {
-  return __props.enableCompare ? compareChartSpec.value : chartSpec.value;
-});
-
-const chartRenderKey = ref(0);
-const frameHeight = ref(225);
-const containerEl = useTemplateRef("container");
-
-/**
-@type { MutationObserver | null}
-*/
-let observer = null;
-
-onMounted(() => {
-  const el = containerEl.value;
-  if (!el) return;
-
-  const parent = el.parentElement?.parentElement;
-  if (parent) {
-    const parentHeight = parent.getBoundingClientRect().height;
-    frameHeight.value = Math.max(225, Math.floor(parentHeight));
-  }
-
-  // for mobile view, the overlay panel containing chart is initially hidden
-  // we create an observer when display of overlay is not none anymore
-  const overlay = getOverlayParent(el);
-  if (!overlay) return;
-
-  observer = new MutationObserver(async () => {
-    const style = getComputedStyle(overlay);
-    const visible = style.display !== "none";
-    if (visible) {
-      // forcibly rerender chart, otherwise size of canvas is 0
-      chartRenderKey.value = Math.random();
-    }
-  });
-
-  observer.observe(overlay, {
-    attributes: true,
-    attributeFilter: ["style", "class"],
-  });
-});
-
-onBeforeUnmount(() => {
-  observer?.disconnect();
-});
-
-const chartStyles = computed(() => {
-  const styles = {
-    height: `${frameHeight.value}px`,
-  };
-  return styles;
-});
-
-const toggleIcon = computed(() =>
-  areChartsSeparateLayout.value ? mdiArrowCollapse : mdiArrowExpand,
-);
-
-function toggleLayout() {
-  areChartsSeparateLayout.value = !areChartsSeparateLayout.value;
-}
-
-return (_ctx, _cache) => {
-                                                         
-
-  return (openBlock(), createElementBlock("div", _hoisted_1, [
-    createElementVNode("div", _hoisted_2, [
-      (usedChartData.value && usedChartSpec.value)
-        ? withDirectives((openBlock(), createElementBlock("button", {
-            key: 0,
-            class: "chart-toggle",
-            onClick: toggleLayout
-          }, [
-            (openBlock(), createElementBlock("svg", _hoisted_3, [
-              createElementVNode("path", { d: toggleIcon.value }, null, 8 /* PROPS */, _hoisted_4)
-            ]))
-          ])), [
-            [Tooltip, unref(areChartsSeparateLayout) ? 'Minimize' : 'Maximize']
-          ])
-        : createCommentVNode("v-if", true),
-      (usedChartData.value && usedChartSpec.value)
-        ? (openBlock(), createElementBlock("eox-chart", {
-            class: "pa-2",
-            ".spec": toRaw(usedChartSpec.value),
-            key: chartRenderKey.value,
-            ".dataValues": toRaw(usedChartData.value),
-            "onClick:item": _cache[0] || (_cache[0] = (...args) => (unref(onChartClick) && unref(onChartClick)(...args))),
-            style: normalizeStyle(chartStyles.value),
-            ".opt": __props.vegaEmbedOptions
-          }, null, 44 /* STYLE, PROPS, NEED_HYDRATION */, _hoisted_5))
-        : createCommentVNode("v-if", true)
-    ])
-  ], 512 /* NEED_PATCH */))
-}
-}
-
-};
-const EodashChart = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-9ad3f535"]]);
-
-export { EodashChart as default };