@abi-software/mapintegratedvuer 1.17.1 → 1.17.3-simulation.1

package/src/assets/styles.scss

@@ -1,5 +1,5 @@
-@import '_variables';
 
+@import '_variables.scss';
 @import url('https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap');
 
 /* icon font path, required */

package/src/components/ContextCard.vue

@@ -94,7 +94,6 @@
   </div>
 </template>
 
-
 <script>
 /* eslint-disable no-alert, no-console */
 import { CopyToClipboard } from "@abi-software/map-utilities";

package/src/components/DummyRouteComponent.vue

@@ -0,0 +1 @@
+<template></template>

package/src/components/EventBus.ts

@@ -0,0 +1,13 @@
+import mitt from 'mitt';
+import type { SimulationRequest, SimulationResponse } from '../types/simulation';
+
+// Define the mapping of Event Name -> Event Payload
+type Events = {
+  'simulation-data-request': SimulationRequest;
+  'simulation-data-ready': SimulationResponse;
+  [key: string]: any; // Allow for other events with any payload.
+};
+
+// Pass the type to mitt
+const EventBus = mitt<Events>();
+export default EventBus;

package/src/components/FloatingWindow.vue

@@ -0,0 +1,142 @@
+<script setup>
+import { ref, toRefs, watch } from 'vue'
+import { useDraggable } from '@vueuse/core'
+
+const props = defineProps(['windowData', 'offsetX', 'offsetY'])
+const emit = defineEmits(['closeWindow', 'mouseDown'])
+const { windowData } = toRefs(props)
+
+// 1. Create a template ref for the DOM element
+const el = ref(null)
+
+// 2. Create a "handle" ref so the user can only drag by the header
+const handle = ref(null)
+
+const transform = ref('translate(0px, 0px)')
+const isMinimized = ref(false)
+const toggleMinimize = () => {
+  isMinimized.value = !isMinimized.value
+}
+
+const getTitle = () => {
+  if (windowData.value.label) {
+    let title = windowData.value.label;
+    if (windowData.value.data?.title) {
+      title += ` (${windowData.value.data?.title})`;
+    }
+    return title;
+  } else {
+    return windowData.value.data?.title;
+  }
+}
+
+watch(
+  [() => props.offsetX, () => props.offsetY],
+  ([newX, newY]) => {
+    transform.value = `translate(-${newX}px, -${newY}px)`
+  },
+  { immediate: true }
+)
+
+// 3. Activate draggable logic
+// We set initialValue to the props so it opens where we want
+const { x, y, style } = useDraggable(el, {
+  initialValue: { x: windowData.value.x, y: windowData.value.y },
+  handle: handle, // Only drag when clicking the header
+  preventDefault: true,
+})
+</script>
+
+<template>
+  <div
+    ref="el"
+    class="floating-window"
+    :class="{ 'is-minimized': isMinimized }"
+    :style="[style, { zIndex: windowData.zIndex, transform: transform }]"
+    @mousedown="emit('mouseDown', windowData.id)"
+  >
+    <div ref="handle" class="window-header">
+      <span class="title">{{ getTitle() }}</span>
+      <div class="window-controls">
+        <button @click.stop="toggleMinimize" class="control-btn">
+          {{ isMinimized ? '□' : '_' }}
+        </button>
+        <button @click.stop="emit('closeWindow', windowData.id)">×</button>
+      </div>
+    </div>
+
+    <div class="window-body" v-show="!isMinimized">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.floating-window {
+  position: absolute; /* Fixed relative to viewport */
+  width: 400px;
+  min-width: 200px;
+  height: 300px;
+  min-height: 150px;
+  background: white;
+  border: 1px solid #ccc;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  resize: both; /* Allow resizing */
+  overflow: hidden; /* Prevent content overflow */
+  transition: height 0.2s ease, width 0.2s ease;
+
+  .title {
+    align-content: center;
+    font-size: 12px;
+  }
+}
+
+.window-header {
+  background: #f0f0f0;
+  padding: 8px;
+  cursor: grab; /* Shows user it is draggable */
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #ddd;
+  user-select: none;
+}
+
+.window-header:active {
+  cursor: grabbing;
+}
+
+.window-body {
+  flex-grow: 1;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  padding: 10px;
+  /* overflow: hidden; Important for Plotly resizing */
+}
+
+.floating-window.is-minimized {
+  height: auto !important;
+  min-height: 0 !important;
+  resize: none; /* Disable resizing when minimized */
+  width: 250px; /* Optional: shrink the width to make a neat little bar */
+}
+
+.window-controls {
+  display: flex;
+  gap: 5px;
+}
+
+.control-btn {
+  background: transparent;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  padding: 0 5px;
+  border-radius: 3px;
+}
+
+.control-btn:hover {
+  background: #e0e0e0;
+}
+</style>

package/src/components/MapContent.vue

@@ -25,6 +25,7 @@ import SplitFlow from './SplitFlow.vue';
 import EventBus from './EventBus';
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '../stores/settings';
+import { useSimulationPlotStore } from '../stores/simulationPlotStore'
 import { useSplitFlowStore } from '../stores/splitFlow';
 import { defaultSpecies, findSpeciesKey } from './scripts/utilities.js';
 import { MapSvgSpriteColor} from '@abi-software/svg-sprite';
@@ -334,7 +335,7 @@ export default {
                     this.$refs.flow.setState(currentState);
                     //Do not create a new entry, instead set the multiflatmap viewer
                     //to the primary slot
-                    this.$refs.flow.setIdToPrimaryPane(entry.id);
+                    this.$refs.flow.setIdToPane(entry.id);
                     break;
                   }
                 }
@@ -389,7 +390,7 @@ export default {
     },
   },
   computed: {
-    ...mapStores(useSettingsStore, useSplitFlowStore),
+    ...mapStores(useSettingsStore, useSimulationPlotStore, useSplitFlowStore),
     stateToSet() {
       return this.state ? this.state : this.initialState;
     },
@@ -412,6 +413,7 @@ export default {
       this.options.pennsieveApi ? this.settingsStore.updatePennsieveApi(this.options.pennsieveApi) : null;
       this.options.flatmapAPI ? this.settingsStore.updateFlatmapAPI(this.options.flatmapAPI) : null;
       this.options.rootUrl ? this.settingsStore.updateRootUrl(this.options.rootUrl) : null;
+      this.options.testDataLocation ? this.settingsStore.updateTestDataLocation(this.options.testDataLocation) : null;
     }
     this.settingsStore.updateAllClosable(this.allClosable);
     this.splitFlowStore?.reset();
@@ -450,13 +452,16 @@ export default {
     this.settingsStore.updateUseHelpModeDialog(this.useHelpModeDialog);
     this.settingsStore.updateConnectivityInfoSidebar(this.connectivityInfoSidebar);
     this.settingsStore.updateAnnotationSidebar(this.annotationSidebar);
-  }
+    this.simulationPlotStore.initListeners();
+  },
+  beforeUnmount: function () {
+    this.simulationPlotStore.cleanupListeners();
+  },
 }
 
 </script>
 
 <style scoped lang="scss">
-
 :deep(.el-loading-spinner) {
   .path {
     stroke: $app-primary-color;

package/src/components/PlotComponent.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import Plotly from 'plotly.js-dist-min';
+import { useResizeObserver, useDebounceFn } from '@vueuse/core';
+
+const props = defineProps(['data']);
+const plotContainer = ref(null);
+
+const drawPlot = () => {
+  if (!plotContainer.value) return;
+  
+  const plotData = [{
+    x: props.data?.x || [],
+    y: props.data?.y || [],
+    type: 'scatter'
+  }];
+
+  const layout = {
+    margin: { t: 20, r: 20, b: 40, l: 40 }, // Tight margins for small windows
+    autosize: true 
+  };
+  
+  const config = { responsive: true }; // Helps with window resize, but not enough for container resize
+
+  Plotly.newPlot(plotContainer.value, plotData, layout, config);
+};
+
+// Debounce this so we don't spam Plotly while the user is actively dragging
+const handleResize = useDebounceFn(() => {
+  if (plotContainer.value) {
+    Plotly.Plots.resize(plotContainer.value);
+  }
+}, 50); // 50ms delay
+
+// Observe resizes, useResizeObserver automatically cleans up when component unmounts
+useResizeObserver(plotContainer, () => {
+  handleResize();
+});
+
+onMounted(() => {
+  drawPlot();
+});
+
+watch(() => props.data, drawPlot, { deep: true });
+</script>
+
+<template>
+  <div ref="plotContainer" class="plot-container"></div>
+</template>
+
+<style scoped>
+.plot-container {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/components/SplitDialog.vue

@@ -109,12 +109,7 @@ export default {
       return activeContents;
     },
     isIdVisible: function(id) {
-      const paneName = this.splitFlowStore.getPaneNameById(id);
-      let visible = false;
-      if (paneName !== undefined) {
-        visible = this.splitFlowStore.isPaneActive(paneName);
-      }
-      return visible;
+      return this.splitFlowStore.isIdVisible(id);
     },
     getContentsWithId: function(id) {
       let contents = this.$refs["content"];