@eodash/eodash 5.6.1 → 5.7.0

package/dist/client/index-CSG_JoOA.js

@@ -0,0 +1,436 @@
+import { useTemplateRef, ref, computed, onMounted, openBlock, createElementBlock, unref, createElementVNode, createCommentVNode } from 'vue';
+import { a0 as removeLayers, Q as sanitizeBbox, d as axios, i as mapEl, v as getLayers, A as datetime } from './helpers-DjZVl_WF.js';
+import { L as eodashCollections, _ as _export_sfc, H as useSTAcStore } from './asWebComponent-BHWpMuE3.js';
+import '@eox/timecontrol';
+import '@eox/itemfilter';
+import { storeToRefs } from 'pinia';
+import { c as createLayersConfig } from './create-layers-config-CBoYedqB.js';
+
+/**
+ * @param {string} stacEndpoint
+ * @param {[string, string]} selectedRange
+ * @param {import("../types").TimelineExportEventDetail["selectedRangeItems"]} selectedRangeItems
+ * @param {import("vue").Ref<import("stac-ts").StacCollection|null>} selectedStac
+ * @param {Record<string, import("../types").Filter>} filters
+ */
+async function createAnimationLayers(
+  stacEndpoint,
+  selectedRange,
+  selectedRangeItems,
+  selectedStac,
+  filters,
+) {
+  if (eodashCollections[0].isAPI) {
+    return await createAPILayers(
+      stacEndpoint,
+      { min: selectedRange[0], max: selectedRange[1] },
+      mapEl.value?.lonLatExtent,
+      selectedStac,
+      filters,
+    );
+  }
+  const { collections: hiddenCollections, layers: hiddenLayers } =
+    getHiddenLayers([...getLayers()]);
+
+  return await Promise.all(
+    Object.values(selectedRangeItems).flatMap(async (itemSet) => {
+      /** @type {Array<{ layers: Record<string, any>[]; date: string }>} */
+      const mapLayersArr = [];
+      for (const dateItem of itemSet) {
+        await createLayersConfig(
+          selectedStac.value,
+          eodashCollections.filter(
+            (collection) =>
+              !hiddenCollections.includes(collection.collectionStac?.id ?? ""),
+          ),
+          dateItem.originalDate,
+        ).then((layers) => {
+          //@ts-expect-error createLayersConfig is not typed strictly
+          layers = removeLayers(layers, hiddenLayers);
+          //@ts-expect-error createLayersConfig is not typed strictly
+          layers = restoreLayersVisibility(layers);
+          layers = anonimizeLayersCORS(layers);
+          mapLayersArr.push({
+            layers,
+            date: dateItem.originalDate,
+          });
+        });
+      }
+      return mapLayersArr;
+    }),
+  ).then((results) => results.flat());
+}
+/**
+ *
+ * @param {string} stacEndpoint
+ * @param {{min: string, max: string}} date
+ * @param {number[] | undefined} bbox
+ * @param {import("vue").Ref<import("stac-ts").StacCollection|null>} selectedStac
+ * @param {Record<string, import("../types").Filter>} filters
+ * @return {Promise<Array<{ layers: Record<string, any>[]; date: string }>>}
+ */
+async function createAPILayers(
+  stacEndpoint,
+  date = { min: "", max: "" },
+  bbox,
+  selectedStac,
+  filters,
+) {
+  if (!bbox) {
+    return [];
+  }
+  const url = new URL(stacEndpoint + "/search");
+  url.searchParams.set("limit", "100");
+  url.searchParams.set("collections", selectedStac.value?.id ?? "");
+  url.searchParams.set(
+    "datetime",
+    `${new Date(date.min).toISOString()}/${new Date(date.max).toISOString()}`,
+  );
+  url.searchParams.set("bbox", sanitizeBbox(bbox).join(","));
+
+  const stacFilter = buildStacFilters(filters);
+  if (stacFilter) {
+    url.searchParams.set("filter", stacFilter);
+  }
+
+  /** @type {import("stac-ts").StacItem[]} */
+  const items = await axios
+    .get(url.href)
+    .then((res) => res.data.features)
+    .catch((err) => {
+      console.error("[eodash] Error fetching items for animation:", err);
+      return [];
+    });
+  if (!items || !items.length) {
+    console.warn("[eodash] No items found for animation.");
+    return [];
+  }
+  const { collections: hiddenCollections, layers: hiddenLayers } =
+    getHiddenLayers([...getLayers()]);
+  return await Promise.all(
+    items.map(async (item) => {
+      /** @type {Array<{ layers: Record<string, any>[]; date: string }>} */
+      const mapLayersArr = [];
+      await createLayersConfig(
+        selectedStac.value,
+        eodashCollections.filter(
+          (collection) =>
+            !hiddenCollections.includes(collection.collectionStac?.id ?? ""),
+        ),
+        item,
+      ).then((layers) => {
+        //@ts-expect-error createLayersConfig is not typed strictly
+        layers = removeLayers(layers, hiddenLayers);
+        //@ts-expect-error createLayersConfig is not typed strictly
+        layers = restoreLayersVisibility(layers);
+        layers = anonimizeLayersCORS(layers);
+        mapLayersArr.push({
+          layers,
+          date: /** @type {string} */ (item.properties.datetime),
+        });
+        return mapLayersArr;
+      });
+      return mapLayersArr;
+    }),
+  ).then((results) => results.flat());
+}
+/**
+ *
+ * @param {Record<string, any>[]} layers
+ * @returns {Record<string, any>[]}
+ */
+function anonimizeLayersCORS(layers) {
+  return layers.map((layer) => {
+    if (layer.type === "Group") {
+      layer.layers = anonimizeLayersCORS(layer.layers);
+      return layer;
+    }
+    if (layer.source) {
+      layer.source.crossOrigin = "anonymous";
+    }
+    return layer;
+  });
+}
+/**
+ * returns the list of layers that has visibility hidden
+ * @param {import("@eox/map").EoxLayer[]} layers
+ * @returns {{ collections: string[]; layers: string[] }}
+ */
+function getHiddenLayers(layers) {
+  /** @type {{ collections: string[]; layers: string[] }} */
+  const result = { collections: [], layers: [] };
+
+  for (const layer of layers) {
+    // check inner layers if it's a group layer first
+    if (layer.type === "Group" && Array.isArray(layer.layers)) {
+      const childResult = getHiddenLayers(layer.layers);
+      for (const col of childResult.collections) {
+        if (!result.collections.includes(col)) {
+          result.collections.push(col);
+        }
+      }
+      for (const lyr of childResult.layers) {
+        if (!result.layers.includes(lyr)) {
+          result.layers.push(lyr);
+        }
+      }
+    }
+
+    if (!layer.properties?.id) {
+      continue;
+    }
+
+    const olLayer = mapEl.value?.getLayerById(layer.properties?.id);
+    if (!olLayer) {
+      continue;
+    }
+
+    if (olLayer.getVisible() === false) {
+      const refId = layer.properties.id;
+      if (refId) {
+        if (refId.includes(";:;")) {
+          // Check if this looks like a typical eodash collection ID with separator
+          const parts = refId.split(";:;");
+          if (parts.length > 2) {
+            const prefix = parts[0];
+            if (!result.collections.includes(prefix)) {
+              result.collections.push(prefix);
+            }
+          } else {
+            // It has a separator but might just be a base layer like `layerId;:;EPSG`
+            if (!result.layers.includes(refId)) {
+              result.layers.push(refId);
+            }
+          }
+        } else {
+          if (!result.layers.includes(refId)) {
+            result.layers.push(refId);
+          }
+        }
+      }
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Iterates through a list of layers and updates layer.properties.visible to true
+ * if it is set to false
+ * @param {import("@eox/map").EoxLayer[]} layers
+ * @returns {import("@eox/map").EoxLayer[]}
+ */
+function restoreLayersVisibility(layers) {
+  for (const layer of layers) {
+    if (layer.properties && layer.properties.visible === false) {
+      layer.properties.visible = true;
+    }
+
+    if (layer.type === "Group" && Array.isArray(layer.layers)) {
+      restoreLayersVisibility(layer.layers);
+    }
+  }
+  return layers;
+}
+
+/**
+ * Build STAC API filter string from TimeSlider filters
+ * @param {Record<string, import("../types").Filter>} filters
+ * @returns {string}
+ */
+function buildStacFilters(filters) {
+  if (!filters) return "";
+
+  /** @type {string[]} */
+  const stacFilters = [];
+
+  Object.values(filters).forEach((filter) => {
+    if (!filter || !filter.key) return;
+
+    // strip 'properties.' from key if present
+    const propName = filter.key.startsWith("properties.")
+      ? filter.key.replace("properties.", "")
+      : filter.key;
+
+    if (filter.type === "range" && filter.state) {
+      if (
+        filter.state.min !== undefined &&
+        filter.state.min > (filter.min ?? -Infinity)
+      ) {
+        stacFilters.push(`${propName}>=${filter.state.min}`);
+      }
+      if (
+        filter.state.max !== undefined &&
+        filter.state.max < (filter.max ?? Infinity)
+      ) {
+        stacFilters.push(`${propName}<=${filter.state.max}`);
+      }
+    } else if (filter.type === "multiselect" && filter.stringifiedState) {
+      if (filter.stringifiedState.length > 0) {
+        stacFilters.push(`${propName} IN (${filter.stringifiedState})`);
+      }
+    } else if (filter.type === "select" && filter.stringifiedState) {
+      if (filter.stringifiedState) {
+        stacFilters.push(`${propName}='${filter.stringifiedState}'`);
+      }
+    }
+  });
+
+  return stacFilters.join(" AND ");
+}
+
+const _style_0 = "eox-itemfilter[data-v-2fc72058]{--inline-container-height: 40px}";
+
+const _hoisted_1 = [".for", ".animate"];
+const _hoisted_2 = { class: "d-flex g-10 align-center" };
+const _hoisted_3 = [".filterProperties"];
+
+
+const _sfc_main = {
+  __name: 'index',
+  props: {
+  filters: {
+    /** @type {import("vue").PropType<import("@eox/itemfilter").EOxItemFilter["filterProperties"]>} */
+    type: Array,
+    default: () => [],
+  },
+  animate: {
+    type: Boolean,
+    default: true,
+  },
+},
+  setup(__props) {
+
+
+
+/** @type {import("vue").ShallowRef<HTMLElement>} */
+const timesliderEl = useTemplateRef("eoxTimecontrol");
+
+const startDate = new Date(datetime.value);
+const endDate = new Date(startDate.getTime() + 24 * 60 * 60 * 1000);
+
+const selectedRange = /** @type {import("vue").Ref<[string, string]>} */ (
+  ref([startDate, endDate].map((d) => d.toISOString()))
+);
+const initDate = [startDate.toISOString().split("T")[0]];
+
+const hasMultipleItems = computed(() => {
+  return eodashCollections.some((ec) => {
+    const itemLinks = ec.collectionStac?.links.filter((l) => l.rel === "item");
+    const itemsLink = ec.collectionStac?.links.some((l) => l.rel === "items");
+    return (itemLinks && itemLinks.length > 1) || itemsLink;
+  });
+});
+
+/**
+ * Handles the selection event from the time control component.
+ * It finds the closest item to the "from" selected date
+ * and updates the global datetime state with that item's original date.
+ *
+ * @param {CustomEvent<import("./types").TimelineSelectionEventDetail>} e
+ */
+const onSelect = (e) => {
+  const { selectedItems, date } = e.detail;
+  // Update the selected range with the new dates
+  selectedRange.value = date;
+
+  const allItems = Object.keys(selectedItems ?? {}).flatMap(
+    (id) => selectedItems[id],
+  );
+  if (!allItems.length) {
+    return;
+  }
+  const [from] = date;
+  const fromDate = new Date(from).getTime();
+
+  const closestItem = allItems.reduce((prev, curr) => {
+    const prevDiff = Math.abs(new Date(prev.originalDate).getTime() - fromDate);
+    const currDiff = Math.abs(new Date(curr.originalDate).getTime() - fromDate);
+    return currDiff < prevDiff ? curr : prev;
+  });
+
+  if (closestItem) {
+    datetime.value = closestItem.originalDate;
+  }
+};
+
+const { selectedStac, stacEndpoint } = storeToRefs(useSTAcStore());
+
+/**
+ *
+ * @param {CustomEvent<import("./types").TimelineExportEventDetail>} evt
+ */
+const onExport = async (evt) => {
+  const { generate, selectedRangeItems, filters } = evt.detail;
+
+  if (!stacEndpoint.value) {
+    return;
+  }
+
+  const mapLayers = await createAnimationLayers(
+    stacEndpoint.value,
+    selectedRange.value,
+    selectedRangeItems,
+    selectedStac,
+    filters,
+  );
+
+  if (!mapLayers?.length) {
+    console.warn("[eodash] No map layers generated for the animation.");
+    return;
+  }
+
+  generate({
+    mapLayers,
+  });
+};
+
+onMounted(() => {
+  const parentDiv = timesliderEl.value?.parentElement;
+  const layoutItem = parentDiv?.parentElement;
+  if (parentDiv && layoutItem && __props.animate) {
+    parentDiv.style.overflow = "visible";
+    layoutItem.style.overflow = "visible";
+  }
+});
+
+return (_ctx, _cache) => {
+  return (hasMultipleItems.value)
+    ? (openBlock(), createElementBlock("eox-timecontrol", {
+        key: unref(unref(mapEl)),
+        ref: "eoxTimecontrol",
+        ".for": unref(mapEl),
+        onSelect: onSelect,
+        titleKey: "title",
+        ".externalMapRendering": true,
+        ".animate": __props.animate,
+        ".initDate": initDate
+      }, [
+        createElementVNode("div", _hoisted_2, [
+          _cache[0] || (_cache[0] = createElementVNode("eox-timecontrol-date", { class: "flex-grow-1" }, null, -1 /* CACHED */)),
+          createElementVNode("eox-timecontrol-picker", {
+            ".range": false,
+            ".showDots": true,
+            ".showItems": true,
+            ".popup": true
+          }, null, 32 /* NEED_HYDRATION */),
+          (__props.filters.length)
+            ? (openBlock(), createElementBlock("eox-itemfilter", {
+                key: 0,
+                ".inlineMode": true,
+                showResults: false,
+                ".filterProperties": __props.filters
+              }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_3))
+            : createCommentVNode("v-if", true),
+          createElementVNode("eox-timecontrol-timelapse", { onExport: onExport }, null, 32 /* NEED_HYDRATION */)
+        ]),
+        _cache[1] || (_cache[1] = createElementVNode("eox-timecontrol-timeline", { class: "mt-2" }, null, -1 /* CACHED */))
+      ], 40 /* PROPS, NEED_HYDRATION */, _hoisted_1))
+    : createCommentVNode("v-if", true)
+}
+}
+
+};
+const index = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-2fc72058"]]);
+
+export { index as default };

package/dist/client/{index-CYz6dT7K.js → index-CUjl-ZsI.js}

@@ -1,6 +1,6 @@
 import { resolveComponent, render, h, mergeProps } from 'vue';
-import { a0 as consoleError, a1 as isObject } from './asWebComponent-DfULAbpq.js';
-import { V as VTooltip } from './VTooltip-DbBu-ky3.js';
+import { $ as consoleError, a0 as isObject } from './asWebComponent-BHWpMuE3.js';
+import { V as VTooltip } from './VTooltip-CJw2FyWk.js';
 
 // Utilities
 function useDirectiveComponent(component, props) {

package/dist/client/{index-Bu8BMA9q.js → index-Cu3-13Xg.js}

@@ -1,15 +1,14 @@
-import { onMounted, watch, nextTick, ref, useTemplateRef, computed, openBlock, createElementBlock, createVNode, unref, createCommentVNode, createBlock, createElementVNode, withCtx, createTextVNode } from 'vue';
+import { onMounted, watch, nextTick, onUnmounted, ref, useTemplateRef, computed, openBlock, createElementBlock, createVNode, unref, createCommentVNode, createBlock, createElementVNode, withCtx, createTextVNode } from 'vue';
 import '@eox/chart';
 import '@eox/drawtools';
 import '@eox/jsonform';
-import { U as eoxLayersKey, N as useOnLayersUpdate, _ as _export_sfc, H as useSTAcStore, J as VBtn } from './asWebComponent-DfULAbpq.js';
+import { N as useOnLayersUpdate, _ as _export_sfc, H as useSTAcStore, J as VBtn } from './asWebComponent-BHWpMuE3.js';
 import { storeToRefs } from 'pinia';
-import { P as ProcessList, c as compareJobs, j as jobs } from './ProcessList-kf3olI7W.js';
-import EodashChart from './EodashChart-PkUQfH0k.js';
-import { i as initProcess, u as updateJsonformIdentifier, h as handleProcesses } from './handling-s8xt2JwF.js';
-import { useEventBus } from '@vueuse/core';
-import { u as updateJobsStatus, d as download, g as getDrawToolsProperties } from './async-CIbKXEEe.js';
-import { I as compareIndicator, F as indicator, S as mapCompareEl, i as mapEl, M as areChartsSeparateLayout, O as compareChartSpec, N as chartSpec } from './helpers-DAVGYl_f.js';
+import { P as ProcessList, c as compareJobs, j as jobs } from './ProcessList-CTTIZa06.js';
+import EodashChart from './EodashChart-CLDqE93C.js';
+import { i as initProcess, u as updateJsonformIdentifier, h as handleProcesses } from './handling-BrcDDlgS.js';
+import { Y as getCompareLayers, v as getLayers, H as compareIndicator, E as indicator, R as mapCompareEl, i as mapEl, L as areChartsSeparateLayout, N as compareChartSpec, M as chartSpec } from './helpers-DjZVl_WF.js';
+import { u as updateJobsStatus, d as download, g as getDrawToolsProperties } from './async-DSKj6g1f.js';
 import { mdiCogPlayOutline, mdiDownloadCircleOutline } from '@mdi/js';
 
 /**
@@ -24,7 +23,7 @@ import { mdiCogPlayOutline, mdiDownloadCircleOutline } from '@mdi/js';
  * @param {import("vue").Ref<boolean>} params.isProcessed
  * @param {import("vue").Ref<boolean>} params.loading
  * @param {import("vue").Ref<boolean>} params.isPolling
- * @param {import("@eox/map").EOxMap | null} params.mapElement
+ * @param {import("vue").Ref<import("@eox/map").EOxMap | null>} params.mapElement
  */
 const useInitProcess = ({
   selectedStac,
@@ -35,60 +34,45 @@ const useInitProcess = ({
   isPolling,
   mapElement,
 }) => {
-  const layersEvents = useEventBus(eoxLayersKey);
-
   onMounted(async () => {
-    // wait for the layers to be rendered
-    if ((mapElement?.layers.length ?? 0) > 1) {
-      await initProcess({
-        enableCompare: mapElement?.id === "compare",
-        selectedStac,
-        jsonformSchema,
-        isProcessed,
-        processResults,
-        loading,
-        isPolling,
-      });
-    } else {
-      layersEvents.once(async () => {
-        await initProcess({
-          enableCompare: mapElement?.id === "compare",
-          selectedStac,
-          jsonformSchema,
-          isProcessed,
-          loading,
-          processResults,
-          isPolling,
-        });
-      });
-    }
+    await initProcess({
+      enableCompare: mapElement.value?.id === "compare",
+      selectedStac,
+      jsonformSchema,
+      isProcessed,
+      processResults,
+      loading,
+      isPolling,
+      mapElement: mapElement.value,
+    });
   });
-  const enableCompare = mapElement?.id === "compare";
-  const evtKey = enableCompare ? "compareLayers:updated" : "layers:updated";
-  useOnLayersUpdate(async (evt, _payload) => {
-    if (
-      evt == "layertime:updated" ||
-      evt == "compareLayertime:updated" ||
-      evt == "time:updated" ||
-      evt == "compareTime:updated"
-    ) {
-      const shouldMainJsonFormUpdate =
-        ["layertime:updated", "time:updated"].includes(evt) && !enableCompare;
-      const shouldCompareJsonFormUpdate =
-        ["compareLayertime:updated", "compareTime:updated"].includes(evt) &&
-        enableCompare;
-      // we need to update jsonform on time change in cases when the feature selection layer was time-based, so that it attaches to a correct new layer
-      if (shouldMainJsonFormUpdate || shouldCompareJsonFormUpdate) {
-        const newJsonForm = await updateJsonformIdentifier({
-          jsonformSchema: jsonformSchema.value,
-          // @ts-expect-error TODO payload coming from time update events is not an object with layers property
-          newLayers: _payload,
-          enableCompare,
-        });
+
+  useOnLayersUpdate(async (evt) => {
+    const enableCompare = mapElement.value?.id === "compare";
+    const layerUpdatedKey = enableCompare
+      ? "compareLayers:updated"
+      : "layers:updated";
+    const timeUpdatedKeys = enableCompare
+      ? ["compareLayertime:updated", "compareTime:updated"]
+      : ["layertime:updated", "time:updated"];
+
+    if (timeUpdatedKeys.includes(evt)) {
+      // we need to update jsonform on time change in cases
+      // when the feature selection layer was time-based,
+      // so that it attaches to a correct new layer
+      const newJsonForm = await updateJsonformIdentifier({
+        jsonformSchema: jsonformSchema.value,
+        newLayers: enableCompare ? getCompareLayers() : getLayers(),
+        enableCompare,
+        mapElement: mapElement.value,
+      });
+
+      if (newJsonForm) {
         jsonformSchema.value = newJsonForm;
       }
     }
-    if (evt !== evtKey) {
+
+    if (evt !== layerUpdatedKey) {
       return;
     }
     await initProcess({
@@ -99,6 +83,7 @@ const useInitProcess = ({
       processResults,
       loading,
       isPolling,
+      mapElement: mapElement.value,
     });
   });
 };
@@ -118,39 +103,40 @@ function useAutoExec(
   startProcess,
 ) {
   /**
-   * @param {CustomEvent} _e
+   * @param {any} _e
    **/
   const onJsonFormChange = async (_e) => {
     await startProcess();
   };
 
-  const addEventListener = async () => {
-    await nextTick(() => {
-      //@ts-expect-error TODO
-      jsonformEl.value?.addEventListener("change", onJsonFormChange);
-    });
-  };
-  const removeEventListener = () => {
-    //@ts-expect-error TODO
-    jsonformEl.value?.removeEventListener("change", onJsonFormChange);
-  };
-
   watch(jsonformSchema, (updatedSchema) => {
     autoExec.value = updatedSchema?.options?.["execute"] || false;
   });
 
-  onMounted(() => {
-    watch(
-      autoExec,
-      async (exec) => {
-        if (exec) {
-          await addEventListener();
-        } else {
-          removeEventListener();
-        }
-      },
-      { immediate: true },
-    );
+  // Re-attach listener whenever the element or autoExec changes
+  const stop = watch(
+    [autoExec, jsonformEl],
+    async ([exec, el], [_prevExec, prevEl]) => {
+      // Cleanup if previous element existed
+      if (prevEl) {
+        prevEl.removeEventListener("change", onJsonFormChange);
+      }
+      // Add if enabled and we have an element
+      if (exec && el) {
+        // remove listener before adding to avoid duplicates in case of element change
+        el.removeEventListener("change", onJsonFormChange);
+        await nextTick();
+        el.addEventListener("change", onJsonFormChange);
+      }
+    },
+    { immediate: true },
+  );
+
+  onUnmounted(() => {
+    if (jsonformEl.value) {
+      jsonformEl.value.removeEventListener("change", onJsonFormChange);
+    }
+    stop();
   });
 }
 
@@ -224,7 +210,7 @@ const jsonformKey = computed(
 
 useInitProcess({
   selectedStac: currentSelectedStac,
-  mapElement: mapElement.value,
+  mapElement,
   jsonformSchema,
   isProcessed,
   processResults,

package/dist/client/templates.js

@@ -1,5 +1,5 @@
 import { mdiViewDashboardVariant, mdiViewDashboard } from '@mdi/js';
-import { P as includesProcess, Q as shouldShowChartWidget } from './helpers-DAVGYl_f.js';
+import { O as includesProcess, P as shouldShowChartWidget } from './helpers-DjZVl_WF.js';
 
 /**
  * Special values that tell deepmerge to perform a certain action.

package/dist/client/{transition-DaOsiD4u.js → transition-OHcz5Qq1.js}

@@ -1,5 +1,5 @@
 import { mergeProps, h, TransitionGroup, Transition } from 'vue';
-import { p as propsFactory, a1 as isObject, aH as onlyDefinedProps } from './asWebComponent-DfULAbpq.js';
+import { p as propsFactory, a0 as isObject, aH as onlyDefinedProps } from './asWebComponent-BHWpMuE3.js';
 
 // Utilities
 const makeTransitionProps = propsFactory({