@abi-software/mapintegratedvuer 1.17.3-simulation.2 → 1.17.4

package/dist/Scaffold-Czz8X5kL.js

@@ -1,310 +0,0 @@
-import { _ as p, z as m, E as c } from "./index-_b4VBGHk.js";
-import { C as v } from "./ContentMixin-DIqgKIz6.js";
-import { ScaffoldVuer as w } from "@abi-software/scaffoldvuer";
-import { resolveComponent as u, openBlock as g, createElementBlock as y, createVNode as b, createBlock as S, createCommentVNode as M } from "vue";
-async function k(e) {
-  const t = sessionStorage.getItem("flatmap-knowledge");
-  if (t) {
-    const i = JSON.parse(t).filter((s) => s.references && s.references.length).filter((s) => s.references.includes(e));
-    if (i.length)
-      return i.map((l) => l.id);
-  }
-  return [];
-}
-async function I(e, t, n) {
-  const i = `select knowledge from knowledge
-    where source="${N(e)}" and
-    knowledge like "%${t}%" order by source desc`;
-  return (await n.queryKnowledge(i)).map((a) => JSON.parse(a)).map((a) => a.id);
-}
-function N(e) {
-  return $(e.mapMetadata);
-}
-function $(e) {
-  let t = "";
-  if (e != null && e.connectivity) {
-    const n = e.connectivity;
-    "knowledge-source" in n ? t = n["knowledge-source"] : "npo" in n && (t = `${n.npo.release}-npo`);
-  }
-  return t;
-}
-const C = {
-  name: "Scaffold",
-  mixins: [v],
-  components: {
-    ScaffoldVuer: w,
-    HelpModeDialog: m
-  },
-  methods: {
-    showConnectivitiesByReference: async function(e) {
-      const t = sessionStorage.getItem("flatmap-knowledge");
-      let n = [];
-      t ? n = await k(e) : n = await I(this.flatmapService.mapImp, e, this.flatmapService.flatmapQueries);
-      const o = [];
-      for (const i of n) {
-        const s = this.nervesKnowledge.find((r) => r.id === i);
-        if (!s) continue;
-        const l = s["nerve-label"];
-        if (l) {
-          const r = l.flatMap((a) => a.subNerves);
-          o.push(...r);
-        }
-      }
-      this.$refs.scaffold.changeHighlightedByName(o, "", !1);
-    },
-    setNerveGreyScale: function() {
-      if (this.nervesKnowledge.length) {
-        const t = this.nervesKnowledge.reduce((n, o) => n.concat(o["nerve-label"] || []), []).reduce((n, o) => n.concat(o.subNerves || []), []);
-        this.$refs.scaffold.setGreyScale(!0, t);
-      }
-    },
-    setVisibilityFilter: function(e) {
-      let t = [];
-      const n = !!e;
-      if (e) {
-        const o = [];
-        e.OR.forEach((i) => {
-          "AND" in i && i.AND.length >= 2 && "models" in i.AND[1] && o.push(...i.AND[1].models);
-        });
-        for (const i of o) {
-          const s = this.nervesKnowledge.find((l) => l.id === i);
-          if (s) {
-            const l = s["nerve-label"].map((r) => r.subNerves).flat(1 / 0);
-            t.push(...l);
-          }
-        }
-      }
-      this.$refs.scaffold.zoomToNerves(t, n);
-    },
-    syncFilter: function(e) {
-      this.$refs.scaffold.viewingMode === "Neuron Connection" && (this.filter = e.filter((t) => {
-        var n;
-        return ((n = t.facet) == null ? void 0 : n.toLowerCase()) !== "show all";
-      }));
-    },
-    scaffoldResourceSelected: async function(e, t) {
-      if (this.resourceSelected(e, t, !0), t.length === 1) {
-        if (this.clickedObject = t[0].data, this.clickedObject.isNerves || this.clickedObject.anatomicalId) {
-          const n = this.clickedObject.id.toLowerCase();
-          if (this.$refs.scaffold.viewingMode === "Neuron Connection") {
-            const o = this.settingsStore.globalSettings.connectionType;
-            if (this.clickedObject.isNerves)
-              this.filter.push({
-                facet: n,
-                term: "Nerves",
-                facetPropPath: "scaffold.connectivity.nerve"
-              });
-            else {
-              const i = o.toLowerCase();
-              let s = this.clickedObject.anatomicalId || "";
-              if (s)
-                this.filter.push({
-                  facet: `["${s}",[]]`,
-                  facetPropPath: `flatmap.connectivity.source.${i}`,
-                  tagLabel: n.charAt(0).toUpperCase() + n.slice(1),
-                  term: o
-                });
-              else {
-                const r = this.connectivitiesStore.filterOptions[this.entry.resource].find((f) => f.key === `flatmap.connectivity.source.${i}`);
-                let a;
-                r == null || r.children.forEach((f) => {
-                  var d;
-                  f.label.toLowerCase() === n && (a = f), (d = f.children) == null || d.forEach((h) => {
-                    h.label.toLowerCase() === n && (a = h);
-                  });
-                }), a && (s = a.key.replace(`flatmap.connectivity.source.${i}.`, ""), this.filter.push({
-                  facet: s,
-                  facetPropPath: `flatmap.connectivity.source.${i}`,
-                  tagLabel: a.tagLabel,
-                  term: o
-                }));
-              }
-            }
-            c.emit("neuron-connection-feature-click", {
-              filters: this.filter,
-              search: this.filter.length ? "" : n
-            });
-          } else if (this.$refs.scaffold.viewingMode === "Exploration") {
-            const o = this.nervesKnowledge.filter((i) => JSON.stringify(i["nerve-label"]).includes(n));
-            o.length && this.getKnowledgeTooltip({ data: o, type: this.entry });
-          }
-        }
-      } else t.length > 1 ? this.$refs.scaffold.viewingMode === "Exploration" && this.clickedObject && this.$refs.scaffold.$module.setIgnorePicking(!1) : (this.clickedObject = void 0, c.emit("connectivity-info-close"));
-    },
-    onResize: function() {
-      this.scaffoldCamera.onResize();
-    },
-    getState: function() {
-      return this.$refs.scaffold.getState();
-    },
-    /**
-     * Perform a local search on this contentvuer
-     */
-    search: function(e) {
-      return this.$refs.scaffold.search(e, !0);
-    },
-    searchSuggestions: function(e, t) {
-      if (e === "" || !this.$refs.scaffold)
-        return t;
-      this.$refs.scaffold.fetchSuggestions(e).forEach((o) => {
-        o.suggestion && t.push(o.suggestion);
-      });
-    },
-    showConnectivityTooltips: function(e) {
-      if (e.label)
-        this.$refs.scaffold.changeHighlightedByName([e.label], "", !1), this.$refs.scaffold.showRegionTooltip(e.label, !1, !1);
-      else {
-        const t = e.connectivityInfo["nerve-label"];
-        if (t) {
-          const n = t.flatMap((o) => o.subNerves);
-          this.$refs.scaffold.changeHighlightedByName(n, "", !1);
-        }
-        this.$refs.scaffold.hideRegionTooltip();
-      }
-    },
-    zoomToFeatures: function(e, t) {
-      let n;
-      Array.isArray(e) ? n = e : n = [e.name], t && this.$refs.scaffold.changeActiveByName(n, "", !1), this.$refs.scaffold.viewRegion(n);
-    },
-    scaffoldIsReady: function() {
-      this.scaffoldLoaded = !0, this.$refs.scaffold.$module.graphicsHighlight.highlightColour = [1, 0, 1], this.visible && this.entry.rotation && this.entry.rotation, this.updateViewerSettings(), c.emit("mapLoaded", this.$refs.scaffold), setTimeout(() => {
-        this.setNerveGreyScale();
-      }, 500);
-    },
-    /**
-     * Callback when the vuers emit a selected event.
-     */
-    scaffoldHighlighted: function(e, t) {
-      var o, i, s;
-      const n = {
-        paneIndex: this.entry.id,
-        type: e,
-        resource: t,
-        internalName: void 0
-      };
-      t && t[0] && ((((o = t[0].data) == null ? void 0 : o.id) === void 0 || ((i = t[0].data) == null ? void 0 : i.id) === "") && (t[0].data.id = (s = t[0].data) == null ? void 0 : s.group), n.internalName = t[0].data.id, n.eventType = "highlighted"), this.$emit("resource-selected", n);
-    },
-    /**
-     * Callback when the vuers emit a selected event.
-     */
-    scaffoldNavigated: function(e, t) {
-      if (this.mouseHovered) {
-        const n = {
-          paneIndex: this.entry.id,
-          eventType: "panZoom",
-          payload: t,
-          type: e
-        };
-        this.$emit("resource-selected", n);
-      }
-    },
-    updateWithViewUrl: function(e) {
-      this.$refs.scaffold.updateViewURL(e);
-    },
-    /**
-     * Change the view mode of the current scaffold
-     */
-    changeViewingMode: function(e) {
-      this.$refs.scaffold.changeViewingMode(e);
-    },
-    updateViewerSettings: function() {
-      const {
-        backgroundDisplay: e,
-        organsDisplay: t,
-        outlinesDisplay: n,
-        viewingMode: o
-      } = this.settingsStore.globalSettings;
-      this.$refs.scaffold.backgroundChangeCallback(e), this.$refs.scaffold.changeViewingMode(o), this.$refs.scaffold.setColour(t), this.$refs.scaffold.setOutlines(n);
-    }
-  },
-  computed: {
-    warningMessage: function() {
-      return this.entry.discoverId === "307" || this.entry.discoverId === 307 ? "This map displays the anatomical location and connectivity of nerves, through which the neuron populations from the ApiNATOMY models available in SCKAN can be routed." : "Under active development";
-    },
-    markerLabels: function() {
-      return this.settingsStore.globalSettings.displayMarkers ? this.settingsStore.numberOfDatasetsForFacets : {};
-    }
-  },
-  watch: {
-    connectivityKnowledge: {
-      handler(e, t) {
-        if (this.entry.resource in e) {
-          const n = e[this.entry.resource];
-          n.length !== this.nervesKnowledge.length && (this.nervesKnowledge = n, this.scaffoldLoaded && this.setNerveGreyScale());
-        }
-      },
-      deep: !0,
-      immediate: !0
-    }
-  },
-  data: function() {
-    return {
-      apiLocation: process.env.VUE_APP_API_LOCATION,
-      scaffoldCamera: void 0,
-      scaffoldLoaded: !1,
-      nervesKnowledge: [],
-      clickedObject: void 0,
-      filter: [],
-      query: ""
-    };
-  },
-  mounted: function() {
-    this.scaffoldCamera = this.$refs.scaffold.$module.scene.getZincCameraControls();
-  }
-}, O = { class: "viewer-container" };
-function L(e, t, n, o, i, s) {
-  const l = u("ScaffoldVuer"), r = u("HelpModeDialog");
-  return g(), y("div", O, [
-    b(l, {
-      state: e.entry.state,
-      url: e.entry.resource,
-      region: e.entry.region,
-      onScaffoldSelected: t[0] || (t[0] = (a) => s.scaffoldResourceSelected(e.entry.type, a)),
-      onScaffoldHighlighted: t[1] || (t[1] = (a) => s.scaffoldHighlighted(e.entry.type, a)),
-      onScaffoldNavigated: t[2] || (t[2] = (a) => s.scaffoldNavigated(e.entry.type, a)),
-      onOnReady: s.scaffoldIsReady,
-      onOpenMap: e.openMap,
-      ref: "scaffold",
-      "background-toggle": !0,
-      traditional: !0,
-      helpMode: e.helpMode,
-      helpModeActiveItem: e.helpModeActiveItem,
-      helpModeDialog: e.useHelpModeDialog,
-      onAnnotationOpen: e.onAnnotationOpen,
-      onAnnotationClose: e.onAnnotationClose,
-      onUpdateOfflineAnnotationEnabled: e.updateOfflineAnnotationEnabled,
-      annotationSidebar: e.annotationSidebar,
-      onHelpModeLastItem: e.onHelpModeLastItem,
-      onShownTooltip: e.onTooltipShown,
-      onShownMapTooltip: e.onMapTooltipShown,
-      render: e.visible,
-      "display-latest-message": !0,
-      "warning-message": s.warningMessage,
-      "display-minimap": !1,
-      "display-markers": !1,
-      enableOpenMapUI: !0,
-      "view-u-r-l": e.entry.viewUrl,
-      markerCluster: !0,
-      markerLabels: s.markerLabels,
-      flatmapAPI: e.flatmapAPI,
-      showLocalSettings: e.showLocalSettings,
-      showOpenMapButton: e.showOpenMapButton,
-      usageConfig: {
-        showTubeLinesControls: !1,
-        tubeLines: e.entry.discoverId === "307" || e.entry.discoverId === 307
-      }
-    }, null, 8, ["state", "url", "region", "onOnReady", "onOpenMap", "helpMode", "helpModeActiveItem", "helpModeDialog", "onAnnotationOpen", "onAnnotationClose", "onUpdateOfflineAnnotationEnabled", "annotationSidebar", "onHelpModeLastItem", "onShownTooltip", "onShownMapTooltip", "render", "warning-message", "view-u-r-l", "markerLabels", "flatmapAPI", "showLocalSettings", "showOpenMapButton", "usageConfig"]),
-    e.helpMode && e.useHelpModeDialog ? (g(), S(r, {
-      key: 0,
-      ref: "scaffoldHelp",
-      scaffoldRef: e.scaffoldRef,
-      lastItem: e.helpModeLastItem,
-      onShowNext: e.onHelpModeShowNext,
-      onFinishHelpMode: e.onFinishHelpMode
-    }, null, 8, ["scaffoldRef", "lastItem", "onShowNext", "onFinishHelpMode"])) : M("", !0)
-  ]);
-}
-const H = /* @__PURE__ */ p(C, [["render", L], ["__scopeId", "data-v-5de11cee"]]);
-export {
-  H as default
-};

package/dist/Simulation-BKmz8zwm.js

@@ -1,107 +0,0 @@
-import { _ as r, E as i } from "./index-_b4VBGHk.js";
-import { C as l } from "./ContentMixin-DIqgKIz6.js";
-import { SimulationVuer as d } from "@abi-software/simulationvuer";
-import { resolveComponent as u, openBlock as c, createBlock as f } from "vue";
-const h = {
-  name: "Simulation",
-  mixins: [l],
-  components: {
-    SimulationVuer: d
-  },
-  computed: {
-    id: function() {
-      return this.entry.resource ? this.entry.resource : this.entry.discoverId;
-    }
-  },
-  data: function() {
-    return {
-      columns: void 0,
-      csv: void 0,
-      fileOpened: !1
-    };
-  },
-  methods: {
-    handleDataNotification: function(t) {
-      i.emit("simulation-response", t);
-    },
-    handleDataRequest(t) {
-      this.processRequest(t);
-    },
-    handleExternalEvent(t) {
-      console.log("handleExternalEvent", t);
-    },
-    handleFileEvent(t) {
-      (t == null ? void 0 : t.type) === "opened" && this.$nextTick(() => {
-        this.fileOpened = !0, (this.entry.csv_file || this.csv_file) && this.addExternalData(
-          {
-            targetEntryId: this.entry.id,
-            action: this.entry
-          }
-        );
-      });
-    },
-    handleWindowClosed(t) {
-      var e;
-      (e = this.$refs.simulation) == null || e.removeDataSubscription(t.id);
-    },
-    processRequest: function(t) {
-      var a, n;
-      if (t.id !== "nz.ac.auckland.simulation-data-request") return;
-      if (parseInt(t.version.split(".")[0]) !== 0) {
-        console.warn("Unsupported simulation request version:", t.version);
-        return;
-      }
-      ((a = t.payload.protocol) == null ? void 0 : a.resource) === this.id && ((n = this.$refs.simulation) == null || n.addDataSubscription({
-        id: t.id,
-        version: t.version,
-        payload: {
-          windowId: t.payload.windowId,
-          ownerId: t.payload.ownerId,
-          component: t.payload.component,
-          variable: t.payload.variable,
-          withVOI: !0
-        }
-      }));
-    },
-    addExternalData: function(t) {
-      if (this.entry.id === t.targetEntryId) {
-        const e = t.action;
-        if (e.csv_file && (this.csv_file = e.csv_file, this.columns = e.columns), this.csv_file && this.fileOpened) {
-          const a = [];
-          this.columns && this.columns.forEach((n) => {
-            n.cellml_variable && n.cellml_variable !== "main/t" && a.push(n.cellml_variable);
-          }), this.$refs.simulation.addExternalData(this.csv_file, void 0, a);
-        }
-      }
-    }
-  },
-  mounted: function() {
-    i.on("simulation-external-data", this.addExternalData), i.on("simulation-data-request", this.handleDataRequest), i.on("plot-window-closed", this.handleWindowClosed), i.emit("simulation-ready", {
-      resourceId: this.id,
-      entryId: this.entry.id,
-      ready: !0
-    }), console.log(this.entry);
-  },
-  beforeUnmount: function() {
-    i.emit("simulation-ready", {
-      resourceId: this.id,
-      entryId: this.entry.id,
-      ready: !1
-    }), i.off("simulation-data-request", this.handleDataRequest), i.off("plot-window-closed", this.handleWindowClosed);
-  }
-};
-function m(t, e, a, n, p, o) {
-  const s = u("SimulationVuer");
-  return c(), f(s, {
-    apiLocation: t.apiLocation,
-    id: o.id,
-    ref: "simulation",
-    onDataNotification: o.handleDataNotification,
-    onExternalData: o.handleExternalEvent,
-    onFile: o.handleFileEvent
-  }, null, 8, ["apiLocation", "id", "onDataNotification", "onExternalData", "onFile"]);
-}
-const w = /* @__PURE__ */ r(h, [["render", m]]);
-export {
-  w as default
-};

package/dist/style-CM86xE3J.js

@@ -1,119 +0,0 @@
-import { mapStores as l } from "pinia";
-import { c as p } from "./index-_b4VBGHk.js";
-import { markRaw as u } from "vue";
-const f = (e, t) => new URL(e, t).href, m = async (e, t) => {
-  var r;
-  if (e && ((r = e.resource) != null && r.url)) {
-    const a = f(e.resource.url, t), o = await (await fetch(a)).json(), i = ["csv_file", "protocol", "thumbnail"];
-    return o.forEach((s) => {
-      i.forEach((c) => {
-        c in s && (s[c] = f(s[c], a));
-      });
-    }), o;
-  }
-}, d = async (e, t) => {
-  if (e["simulation-protocols"]) {
-    const r = [];
-    for (const a of e["simulation-protocols"]) {
-      const n = await m(a, t);
-      n && r.push(...n);
-    }
-    return r;
-  }
-}, h = async (e, t, r) => {
-  var n;
-  const a = [];
-  for (const o of t) {
-    let i = !1;
-    if (o.flatmaps)
-      for (const s of o.flatmaps)
-        ((n = s.associated_flatmap) == null ? void 0 : n.identifier) === e && (i = !0);
-    if (i) {
-      const s = await d(o, r);
-      s && a.push(...s);
-    }
-  }
-  return a;
-}, g = async (e, t) => {
-  if (e) {
-    const a = await (await fetch(e)).json();
-    return await h(t, a, e);
-  }
-}, k = function(e) {
-  return e ? [...new Set(e.map((t) => JSON.stringify(t)))].map(
-    (t) => JSON.parse(t)
-  ) : [];
-}, M = {
-  computed: {
-    ...l(p)
-  },
-  data: function() {
-    return {
-      protocolData: void 0,
-      markerToUberonID: {}
-    };
-  },
-  methods: {
-    flatmapPanZoomCallback: function(e) {
-      if (this.mouseHovered) {
-        const t = {
-          paneIndex: this.entry.id,
-          eventType: "panZoom",
-          payload: e,
-          type: this.entry.type
-        };
-        this.$emit("resource-selected", t);
-      }
-    },
-    /**
-     * Function used for updating the flatmap markers.
-     * We set the markers based on what was searched and the flatmap clusters them.
-     */
-    flatmapMarkerUpdate(e) {
-      if (this.flatmapReady && !this.protocolData) {
-        let t = e;
-        if (t || (t = this.getFlatmapImp()), t) {
-          let r = this.settingsStore.globalSettings.displayMarkers ? this.settingsStore.markers : [];
-          r = k(r), t.clearMarkers(), t.clearDatasetMarkers(), t.addDatasetMarkers(r), this.entry.type === "MultiFlatmap" && this.restoreFeaturedMarkers(t);
-        }
-      }
-    },
-    // removeMarkersNotOnFlatmap: rewrites the dataset marker list to only include markers that are on the flatmap
-    removeMarkersNotOnFlatmap(e, t) {
-      let r = e.anatomicalIdentifiers, a = [];
-      for (let n = 0; n < t.length; n++) {
-        let o = t[n], i = { id: o.id, terms: [] };
-        for (let s = 0; s < o.terms.length; s++)
-          r.includes(o.terms[s]) && i.terms.push(o.terms[s]);
-        a.push(i);
-      }
-      return a;
-    },
-    updateProtocolMarkers: function(e, t) {
-      e.clearMarkers(), t.length > 0 && t.forEach((r) => {
-        const o = e.sparqlQuery(`
-            prefix bgf: <https://bg-rdf.org/ontologies/bondgraph-framework#>
-            prefix UBERON: <http://purl.obolibrary.org/obo/UBERON_>
-            select ?featureUri where {
-                ?featureUri bgf:hasLocation ?region
-                filter (?region in (${r}))
-            }`)[0].get("featureUri").value, i = e.addMarkerByFeatureUri(o);
-        this.markerToUberonID[i] = r;
-      });
-    },
-    flatmapReadyForMarkerUpdates: async function(e) {
-      if (e) {
-        e.enablePanZoomEvents(!0), this.flatmapReady = !0;
-        const t = e.mapImp;
-        if (t) {
-          const r = t.mapMetadata.uuid;
-          this.protocolData = u(await g(this.settingsStore.testDataLocation, r)), this.protocolData || this.flatmapMarkerUpdate(t);
-        }
-      }
-    }
-  }
-};
-export {
-  M as D,
-  g as r
-};

package/src/components/DummyRouteComponent.vue

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

package/src/components/EventBus.ts

@@ -1,13 +0,0 @@
-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

@@ -1,142 +0,0 @@
-<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>