@morscherlab/mld-sdk 0.6.0

package/dist/components/WellPlate.vue.d.ts

@@ -0,0 +1,69 @@
+import { WellPlateFormat, WellPlateSelectionMode, WellPlateSize, Well, HeatmapConfig, WellShape, WellEditField, WellEditData, WellLegendItem } from '../types';
+interface Props {
+    modelValue?: string[];
+    format?: WellPlateFormat;
+    wells?: Record<string, Partial<Well>>;
+    selectionMode?: WellPlateSelectionMode;
+    showLabels?: boolean;
+    showWellIds?: boolean;
+    showSampleTypeIndicator?: boolean;
+    heatmap?: HeatmapConfig;
+    sampleColors?: Record<string, string>;
+    zoom?: number;
+    disabled?: boolean;
+    readonly?: boolean;
+    size?: WellPlateSize;
+    wellShape?: WellShape;
+    showWellLabels?: boolean;
+    showBadges?: boolean;
+    editable?: boolean;
+    editFields?: WellEditField[];
+    defaultInjectionVolume?: number;
+    showLegend?: boolean;
+    legendItems?: WellLegendItem[];
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (wellIds: string[]) => any;
+    "well-click": (wellId: string, event: MouseEvent) => any;
+    "well-hover": (wellId: string | null, event?: MouseEvent | undefined) => any;
+    "selection-change": (wellIds: string[]) => any;
+    "context-menu": (wellId: string, event: MouseEvent) => any;
+    "well-move": (sourceWellId: string, targetWellId: string) => any;
+    "well-edit": (wellId: string, data: WellEditData) => any;
+    "well-clear": (wellId: string) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((wellIds: string[]) => any) | undefined;
+    "onWell-click"?: ((wellId: string, event: MouseEvent) => any) | undefined;
+    "onWell-hover"?: ((wellId: string | null, event?: MouseEvent | undefined) => any) | undefined;
+    "onSelection-change"?: ((wellIds: string[]) => any) | undefined;
+    "onContext-menu"?: ((wellId: string, event: MouseEvent) => any) | undefined;
+    "onWell-move"?: ((sourceWellId: string, targetWellId: string) => any) | undefined;
+    "onWell-edit"?: ((wellId: string, data: WellEditData) => any) | undefined;
+    "onWell-clear"?: ((wellId: string) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: WellPlateSize;
+    modelValue: string[];
+    readonly: boolean;
+    showLabels: boolean;
+    selectionMode: WellPlateSelectionMode;
+    format: WellPlateFormat;
+    editFields: WellEditField[];
+    defaultInjectionVolume: number;
+    wells: Record<string, Partial<Well>>;
+    showWellIds: boolean;
+    showSampleTypeIndicator: boolean;
+    heatmap: HeatmapConfig;
+    sampleColors: Record<string, string>;
+    zoom: number;
+    wellShape: WellShape;
+    showWellLabels: boolean;
+    showBadges: boolean;
+    editable: boolean;
+    showLegend: boolean;
+    legendItems: WellLegendItem[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    plateRef: HTMLDivElement;
+    tableRef: HTMLTableElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/components/WellPlate.vue.js

@@ -0,0 +1,531 @@
+import { defineComponent, ref, computed, onMounted, onUnmounted, openBlock, createElementBlock, normalizeStyle, normalizeClass, createElementVNode, Fragment, renderList, toDisplayString, createCommentVNode, withKeys, withModifiers, createBlock } from "vue";
+import _sfc_main$1 from "./WellEditPopup.vue.js";
+/* empty css                   */
+const _hoisted_1 = { class: "mld-well-plate__scroll" };
+const _hoisted_2 = { class: "mld-well-plate__content" };
+const _hoisted_3 = ["aria-label"];
+const _hoisted_4 = { key: 0 };
+const _hoisted_5 = ["aria-label", "aria-selected", "aria-disabled", "draggable", "title", "onClick", "onMousedown", "onMouseenter", "onContextmenu", "onDragstart", "onDragover", "onDrop", "onKeydown"];
+const _hoisted_6 = {
+  key: 0,
+  class: "mld-well-plate__label"
+};
+const _hoisted_7 = {
+  key: 1,
+  class: "mld-well-plate__indicator"
+};
+const _hoisted_8 = {
+  key: 2,
+  class: "mld-well-plate__well-id"
+};
+const _hoisted_9 = ["title"];
+const _hoisted_10 = {
+  key: 0,
+  class: "mld-well-plate__legend"
+};
+const _hoisted_11 = { class: "mld-well-plate__legend-label" };
+const _hoisted_12 = { class: "mld-well-plate__legend-bar" };
+const _hoisted_13 = { class: "mld-well-plate__legend-label" };
+const _hoisted_14 = {
+  key: 1,
+  class: "mld-well-plate__sample-legend"
+};
+const _hoisted_15 = { class: "mld-well-plate__sample-legend-text" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "WellPlate",
+  props: {
+    modelValue: { default: () => [] },
+    format: { default: 96 },
+    wells: { default: () => ({}) },
+    selectionMode: { default: "multiple" },
+    showLabels: { type: Boolean, default: true },
+    showWellIds: { type: Boolean, default: false },
+    showSampleTypeIndicator: { type: Boolean, default: false },
+    heatmap: { default: () => ({ enabled: false }) },
+    sampleColors: { default: () => ({}) },
+    zoom: { default: 1 },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    size: { default: "md" },
+    wellShape: { default: "rounded" },
+    showWellLabels: { type: Boolean, default: false },
+    showBadges: { type: Boolean, default: false },
+    editable: { type: Boolean, default: false },
+    editFields: { default: () => ["label", "sampleType", "injectionVolume", "injectionCount", "customMethod"] },
+    defaultInjectionVolume: { default: 5 },
+    showLegend: { type: Boolean, default: false },
+    legendItems: { default: void 0 }
+  },
+  emits: ["update:modelValue", "well-click", "well-hover", "selection-change", "context-menu", "well-move", "well-edit", "well-clear"],
+  setup(__props, { emit: __emit }) {
+    const dragSourceWell = ref(null);
+    const dragTargetWell = ref(null);
+    const props = __props;
+    const emit = __emit;
+    const plateRef = ref(null);
+    const tableRef = ref(null);
+    const isDragging = ref(false);
+    const dragStart = ref(null);
+    const dragEnd = ref(null);
+    const hoveredWell = ref(null);
+    const editingWellId = ref(null);
+    const editPopupPosition = ref({ x: 0, y: 0 });
+    const PLATE_CONFIGS = {
+      6: { rows: 2, cols: 3 },
+      12: { rows: 3, cols: 4 },
+      24: { rows: 4, cols: 6 },
+      48: { rows: 6, cols: 8 },
+      54: { rows: 6, cols: 9 },
+      96: { rows: 8, cols: 12 },
+      384: { rows: 16, cols: 24 }
+    };
+    const plateConfig = computed(() => PLATE_CONFIGS[props.format]);
+    const rowLabels = computed(
+      () => Array.from({ length: plateConfig.value.rows }, (_, i) => String.fromCharCode(65 + i))
+    );
+    const colLabels = computed(
+      () => Array.from({ length: plateConfig.value.cols }, (_, i) => i + 1)
+    );
+    const wellGrid = computed(() => {
+      const grid = [];
+      for (let row = 0; row < plateConfig.value.rows; row++) {
+        const rowWells = [];
+        for (let col = 0; col < plateConfig.value.cols; col++) {
+          const id = `${rowLabels.value[row]}${col + 1}`;
+          const wellData = props.wells[id] || {};
+          rowWells.push({
+            id,
+            row,
+            col,
+            state: wellData.state || "empty",
+            sampleType: wellData.sampleType,
+            value: wellData.value,
+            metadata: wellData.metadata
+          });
+        }
+        grid.push(rowWells);
+      }
+      return grid;
+    });
+    const selectedWellSet = computed(() => new Set(props.modelValue));
+    const dragSelectedWells = computed(() => {
+      if (!isDragging.value || !dragStart.value || !dragEnd.value) return /* @__PURE__ */ new Set();
+      const minRow = Math.min(dragStart.value.row, dragEnd.value.row);
+      const maxRow = Math.max(dragStart.value.row, dragEnd.value.row);
+      const minCol = Math.min(dragStart.value.col, dragEnd.value.col);
+      const maxCol = Math.max(dragStart.value.col, dragEnd.value.col);
+      const wells = /* @__PURE__ */ new Set();
+      for (let row = minRow; row <= maxRow; row++) {
+        for (let col = minCol; col <= maxCol; col++) {
+          const id = `${rowLabels.value[row]}${col + 1}`;
+          wells.add(id);
+        }
+      }
+      return wells;
+    });
+    const sizeConfig = computed(() => {
+      const sizes = {
+        sm: { cellWidth: "40px", cellHeight: "40px", headerWidth: "32px", headerHeight: "32px", fontSize: "0.625rem", gap: "2px" },
+        md: { cellWidth: "56px", cellHeight: "32px", headerWidth: "32px", headerHeight: "24px", fontSize: "0.75rem", gap: "3px" },
+        lg: { cellWidth: "80px", cellHeight: "40px", headerWidth: "40px", headerHeight: "32px", fontSize: "0.875rem", gap: "4px" },
+        xl: { cellWidth: "96px", cellHeight: "48px", headerWidth: "48px", headerHeight: "40px", fontSize: "1rem", gap: "4px" },
+        fill: { cellWidth: "100%", cellHeight: "32px", headerWidth: "32px", headerHeight: "24px", fontSize: "0.75rem", gap: "2px" }
+      };
+      return sizes[props.size];
+    });
+    const isFillMode = computed(() => props.size === "fill");
+    const defaultLegendItems = [
+      { type: "sample", label: "Sample", color: "#10b981" },
+      { type: "blank", label: "Blank", color: "#f97316" },
+      { type: "qc", label: "QC", color: "#8b5cf6" }
+    ];
+    const activeLegendItems = computed(() => props.legendItems ?? defaultLegendItems);
+    const defaultSampleTypeColors = {
+      sample: { bg: "rgba(16, 185, 129, 0.15)", border: "rgba(16, 185, 129, 0.4)" },
+      control: { bg: "rgba(59, 130, 246, 0.15)", border: "rgba(59, 130, 246, 0.4)" },
+      blank: { bg: "rgba(249, 115, 22, 0.15)", border: "rgba(249, 115, 22, 0.4)" },
+      qc: { bg: "rgba(139, 92, 246, 0.15)", border: "rgba(139, 92, 246, 0.4)" }
+    };
+    const heatmapColors = {
+      viridis: ["#440154", "#482878", "#3e4989", "#31688e", "#26828e", "#1f9e89", "#35b779", "#6ece58", "#b5de2b", "#fde725"],
+      plasma: ["#0d0887", "#46039f", "#7201a8", "#9c179e", "#bd3786", "#d8576b", "#ed7953", "#fb9f3a", "#fdca26", "#f0f921"],
+      turbo: ["#30123b", "#4145ab", "#4675ed", "#39a2fc", "#1bcfd4", "#24e79e", "#71f05f", "#c1f034", "#f1c83c", "#f99538", "#e45a31", "#ba2512", "#7a0403"]
+    };
+    function getHeatmapColor(value) {
+      var _a, _b;
+      if (!((_a = props.heatmap) == null ? void 0 : _a.enabled) || value === void 0) return null;
+      const min = props.heatmap.min ?? 0;
+      const max = props.heatmap.max ?? 1;
+      const normalized = Math.max(0, Math.min(1, (value - min) / (max - min)));
+      const colors = props.heatmap.colorScale === "custom" && ((_b = props.heatmap.customColors) == null ? void 0 : _b.length) ? props.heatmap.customColors : heatmapColors[props.heatmap.colorScale || "viridis"];
+      const index = Math.min(Math.floor(normalized * (colors.length - 1)), colors.length - 1);
+      return colors[index];
+    }
+    function getWellClasses(well) {
+      const isWellSelected = isSelected(well.id);
+      const isDragOver = dragSelectedWells.value.has(well.id);
+      const isHovered = hoveredWell.value === well.id;
+      const isDisabled = props.disabled || well.state === "disabled";
+      const isDragSource = dragSourceWell.value === well.id;
+      const isDragTarget = dragTargetWell.value === well.id;
+      const classes = [
+        "mld-well-plate__well",
+        props.wellShape === "circle" ? "mld-well-plate__well--circle" : "mld-well-plate__well--rounded"
+      ];
+      if (props.selectionMode === "drag" && well.sampleType) {
+        classes.push("mld-well-plate__well--draggable");
+      }
+      if (isDragSource) classes.push("mld-well-plate__well--drag-source");
+      else if (isDragTarget) classes.push("mld-well-plate__well--drag-target");
+      else if (isWellSelected) classes.push("mld-well-plate__well--selected");
+      else if (isDragOver) classes.push("mld-well-plate__well--drag-over");
+      else if (isHovered && !props.readonly) classes.push("mld-well-plate__well--hovered");
+      if (isDisabled) classes.push("mld-well-plate__well--disabled");
+      if (well.state === "filled") classes.push("mld-well-plate__well--filled");
+      return classes;
+    }
+    function getWellStyle(well) {
+      const heatmapColor = getHeatmapColor(well.value);
+      if (heatmapColor) {
+        return { backgroundColor: heatmapColor, border: "1px solid transparent" };
+      }
+      if (well.sampleType && props.sampleColors[well.sampleType]) {
+        const color = props.sampleColors[well.sampleType];
+        return {
+          backgroundColor: `${color}26`,
+          border: `1px solid ${color}66`
+        };
+      }
+      if (well.sampleType && defaultSampleTypeColors[well.sampleType]) {
+        const colors = defaultSampleTypeColors[well.sampleType];
+        return {
+          backgroundColor: colors.bg,
+          border: `1px solid ${colors.border}`
+        };
+      }
+      const borderStyle = well.state === "filled" ? "solid" : "dashed";
+      return {
+        backgroundColor: "var(--bg-tertiary)",
+        border: `1px ${borderStyle} var(--border-color)`
+      };
+    }
+    function getSampleTypeIndicator(well) {
+      if (!props.showSampleTypeIndicator || !well.sampleType) return null;
+      const typeMap = {
+        sample: "S",
+        control: "C",
+        blank: "B",
+        qc: "Q"
+      };
+      return typeMap[well.sampleType] || well.sampleType.charAt(0).toUpperCase();
+    }
+    function getWellLabel(well) {
+      var _a;
+      if (!props.showWellLabels) return void 0;
+      return (_a = well.metadata) == null ? void 0 : _a.label;
+    }
+    function getWellBadge(well) {
+      if (!props.showBadges || !well.metadata) return null;
+      const count = well.metadata.injectionCount;
+      if (count && count > 1) {
+        return { text: String(count), color: "#6366f1" };
+      }
+      if (well.metadata.customMethod) {
+        return { text: "+", color: "#ec4899" };
+      }
+      return null;
+    }
+    function isSelected(wellId) {
+      return selectedWellSet.value.has(wellId) || dragSelectedWells.value.has(wellId);
+    }
+    function handleWellClick(well, event) {
+      if (props.disabled || props.readonly) return;
+      emit("well-click", well.id, event);
+      if (props.editable) {
+        openEditPopup(well.id, event);
+        return;
+      }
+      if (props.selectionMode === "none") return;
+      const isCurrentlySelected = selectedWellSet.value.has(well.id);
+      const isMultiSelect = event.shiftKey || event.metaKey || event.ctrlKey;
+      let newSelection;
+      if (props.selectionMode === "single") {
+        newSelection = isCurrentlySelected ? [] : [well.id];
+      } else if (isMultiSelect) {
+        newSelection = isCurrentlySelected ? props.modelValue.filter((id) => id !== well.id) : [...props.modelValue, well.id];
+      } else {
+        newSelection = isCurrentlySelected && props.modelValue.length === 1 ? [] : [well.id];
+      }
+      emit("update:modelValue", newSelection);
+      emit("selection-change", newSelection);
+    }
+    function openEditPopup(wellId, event) {
+      const target = event.currentTarget;
+      const rect = target.getBoundingClientRect();
+      editPopupPosition.value = {
+        x: rect.right + 8,
+        y: rect.top
+      };
+      editingWellId.value = wellId;
+    }
+    function handleEditSave(data) {
+      emit("well-edit", data.wellId, data);
+      editingWellId.value = null;
+    }
+    function handleEditClear() {
+      if (editingWellId.value) {
+        emit("well-clear", editingWellId.value);
+      }
+      editingWellId.value = null;
+    }
+    function handleEditClose() {
+      editingWellId.value = null;
+    }
+    function handleWellMouseDown(well, event) {
+      if (props.disabled || props.readonly || props.selectionMode !== "rectangle") return;
+      if (props.editable) return;
+      if (event.button !== 0) return;
+      isDragging.value = true;
+      dragStart.value = { row: well.row, col: well.col };
+      dragEnd.value = { row: well.row, col: well.col };
+    }
+    function handleWellMouseEnter(well, event) {
+      hoveredWell.value = well.id;
+      emit("well-hover", well.id, event);
+      if (isDragging.value && props.selectionMode === "rectangle") {
+        dragEnd.value = { row: well.row, col: well.col };
+      }
+    }
+    function handleWellMouseLeave() {
+      hoveredWell.value = null;
+      emit("well-hover", null);
+    }
+    function handleMouseUp() {
+      if (!isDragging.value || props.selectionMode !== "rectangle") return;
+      const newSelection = Array.from(dragSelectedWells.value);
+      isDragging.value = false;
+      dragStart.value = null;
+      dragEnd.value = null;
+      if (newSelection.length > 0) {
+        emit("update:modelValue", newSelection);
+        emit("selection-change", newSelection);
+      }
+    }
+    function handleContextMenu(well, event) {
+      event.preventDefault();
+      emit("context-menu", well.id, event);
+    }
+    function handleDragStart(well, event) {
+      if (props.disabled || props.readonly || props.selectionMode !== "drag") return;
+      if (!well.sampleType) return;
+      dragSourceWell.value = well.id;
+      if (event.dataTransfer) {
+        event.dataTransfer.effectAllowed = "move";
+        event.dataTransfer.setData("text/plain", well.id);
+      }
+    }
+    function handleDragOver(well, event) {
+      if (props.selectionMode !== "drag" || !dragSourceWell.value) return;
+      event.preventDefault();
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = "move";
+      }
+      dragTargetWell.value = well.id;
+    }
+    function handleDragLeave() {
+      dragTargetWell.value = null;
+    }
+    function handleDrop(well, event) {
+      event.preventDefault();
+      if (props.selectionMode !== "drag" || !dragSourceWell.value) return;
+      const sourceId = dragSourceWell.value;
+      const targetId = well.id;
+      if (sourceId !== targetId) {
+        emit("well-move", sourceId, targetId);
+      }
+      dragSourceWell.value = null;
+      dragTargetWell.value = null;
+    }
+    function handleDragEnd() {
+      dragSourceWell.value = null;
+      dragTargetWell.value = null;
+    }
+    function handleKeyDown(event) {
+      if (props.disabled || props.readonly) return;
+      if (event.key === "Escape") {
+        if (editingWellId.value) {
+          editingWellId.value = null;
+          return;
+        }
+        emit("update:modelValue", []);
+        emit("selection-change", []);
+      }
+      if ((event.key === "a" || event.key === "A") && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        const allWells = wellGrid.value.flat().map((w) => w.id);
+        emit("update:modelValue", allWells);
+        emit("selection-change", allWells);
+      }
+    }
+    onMounted(() => {
+      document.addEventListener("mouseup", handleMouseUp);
+      document.addEventListener("keydown", handleKeyDown);
+    });
+    onUnmounted(() => {
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("keydown", handleKeyDown);
+    });
+    const containerStyle = computed(
+      () => isFillMode.value ? {} : {
+        transform: `scale(${props.zoom})`,
+        transformOrigin: "top left"
+      }
+    );
+    const tableStyle = computed(() => ({
+      borderCollapse: "separate",
+      borderSpacing: sizeConfig.value.gap,
+      ...isFillMode.value ? { width: "100%", tableLayout: "fixed" } : {}
+    }));
+    return (_ctx, _cache) => {
+      var _a, _b;
+      return openBlock(), createElementBlock("div", {
+        ref_key: "plateRef",
+        ref: plateRef,
+        class: normalizeClass(["mld-well-plate", isFillMode.value ? "mld-well-plate--fill" : "mld-well-plate--inline"]),
+        style: normalizeStyle(containerStyle.value)
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", _hoisted_2, [
+            createElementVNode("table", {
+              ref_key: "tableRef",
+              ref: tableRef,
+              class: "mld-well-plate__table",
+              role: "grid",
+              "aria-label": `${props.format}-well plate`,
+              style: normalizeStyle(tableStyle.value)
+            }, [
+              props.showLabels ? (openBlock(), createElementBlock("thead", _hoisted_4, [
+                createElementVNode("tr", null, [
+                  createElementVNode("th", {
+                    style: normalizeStyle({ width: sizeConfig.value.headerWidth, height: sizeConfig.value.headerHeight })
+                  }, null, 4),
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(colLabels.value, (col) => {
+                    return openBlock(), createElementBlock("th", {
+                      key: col,
+                      class: "mld-well-plate__col-header",
+                      style: normalizeStyle({ height: sizeConfig.value.headerHeight, fontSize: sizeConfig.value.fontSize })
+                    }, toDisplayString(col), 5);
+                  }), 128))
+                ])
+              ])) : createCommentVNode("", true),
+              createElementVNode("tbody", null, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(wellGrid.value, (row, rowIndex) => {
+                  return openBlock(), createElementBlock("tr", {
+                    key: rowIndex,
+                    role: "row"
+                  }, [
+                    props.showLabels ? (openBlock(), createElementBlock("td", {
+                      key: 0,
+                      class: "mld-well-plate__row-header",
+                      style: normalizeStyle({ width: sizeConfig.value.headerWidth, height: sizeConfig.value.cellHeight, minWidth: sizeConfig.value.headerWidth, minHeight: sizeConfig.value.cellHeight, fontSize: sizeConfig.value.fontSize })
+                    }, toDisplayString(rowLabels.value[rowIndex]), 5)) : createCommentVNode("", true),
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(row, (well) => {
+                      return openBlock(), createElementBlock("td", {
+                        key: well.id,
+                        class: "mld-well-plate__cell"
+                      }, [
+                        createElementVNode("div", {
+                          role: "gridcell",
+                          tabindex: "0",
+                          "aria-label": `Well ${well.id}${well.sampleType ? `, Sample type: ${well.sampleType}` : ""}${well.value !== void 0 ? `, Value: ${well.value}` : ""}`,
+                          "aria-selected": isSelected(well.id),
+                          "aria-disabled": props.disabled || well.state === "disabled",
+                          draggable: props.selectionMode === "drag" && !!well.sampleType,
+                          class: normalizeClass(getWellClasses(well)),
+                          style: normalizeStyle({
+                            width: isFillMode.value ? "100%" : sizeConfig.value.cellWidth,
+                            height: sizeConfig.value.cellHeight,
+                            minWidth: isFillMode.value ? "0" : sizeConfig.value.cellWidth,
+                            minHeight: sizeConfig.value.cellHeight,
+                            boxSizing: "border-box",
+                            fontSize: sizeConfig.value.fontSize,
+                            ...getWellStyle(well)
+                          }),
+                          title: `${well.id}${well.sampleType ? `: ${well.sampleType}` : ""}${getWellLabel(well) ? ` - ${getWellLabel(well)}` : ""}`,
+                          onClick: ($event) => handleWellClick(well, $event),
+                          onMousedown: ($event) => handleWellMouseDown(well, $event),
+                          onMouseenter: ($event) => handleWellMouseEnter(well, $event),
+                          onMouseleave: handleWellMouseLeave,
+                          onContextmenu: ($event) => handleContextMenu(well, $event),
+                          onDragstart: ($event) => handleDragStart(well, $event),
+                          onDragover: withModifiers(($event) => handleDragOver(well, $event), ["prevent"]),
+                          onDragleave: handleDragLeave,
+                          onDrop: withModifiers(($event) => handleDrop(well, $event), ["prevent"]),
+                          onDragend: handleDragEnd,
+                          onKeydown: [
+                            withKeys(($event) => handleWellClick(well, $event), ["enter"]),
+                            withKeys(withModifiers(($event) => handleWellClick(well, $event), ["prevent"]), ["space"])
+                          ]
+                        }, [
+                          getWellLabel(well) ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(getWellLabel(well)), 1)) : getSampleTypeIndicator(well) ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(getSampleTypeIndicator(well)), 1)) : props.showWellIds ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(well.id), 1)) : createCommentVNode("", true),
+                          getWellBadge(well) ? (openBlock(), createElementBlock("span", {
+                            key: 3,
+                            class: "mld-well-plate__badge",
+                            style: normalizeStyle({ backgroundColor: getWellBadge(well).color }),
+                            title: getWellBadge(well).text === "+" ? "Custom method" : `${getWellBadge(well).text}x injections`
+                          }, toDisplayString(getWellBadge(well).text), 13, _hoisted_9)) : createCommentVNode("", true)
+                        ], 46, _hoisted_5)
+                      ]);
+                    }), 128))
+                  ]);
+                }), 128))
+              ])
+            ], 12, _hoisted_3),
+            ((_a = props.heatmap) == null ? void 0 : _a.enabled) && props.heatmap.showLegend ? (openBlock(), createElementBlock("div", _hoisted_10, [
+              createElementVNode("span", _hoisted_11, toDisplayString(props.heatmap.min ?? 0), 1),
+              createElementVNode("div", _hoisted_12, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(props.heatmap.colorScale === "custom" && ((_b = props.heatmap.customColors) == null ? void 0 : _b.length) ? props.heatmap.customColors : heatmapColors[props.heatmap.colorScale || "viridis"], (color, index) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: index,
+                    class: "mld-well-plate__legend-segment",
+                    style: normalizeStyle({ backgroundColor: color })
+                  }, null, 4);
+                }), 128))
+              ]),
+              createElementVNode("span", _hoisted_13, toDisplayString(props.heatmap.max ?? 1), 1)
+            ])) : createCommentVNode("", true),
+            props.showLegend ? (openBlock(), createElementBlock("div", _hoisted_14, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(activeLegendItems.value, (item) => {
+                return openBlock(), createElementBlock("div", {
+                  key: item.type,
+                  class: "mld-well-plate__sample-legend-item"
+                }, [
+                  createElementVNode("span", {
+                    class: "mld-well-plate__sample-legend-dot",
+                    style: normalizeStyle({ backgroundColor: `${item.color}26`, border: `1px solid ${item.color}66` })
+                  }, null, 4),
+                  createElementVNode("span", _hoisted_15, toDisplayString(item.label), 1)
+                ]);
+              }), 128))
+            ])) : createCommentVNode("", true)
+          ])
+        ]),
+        __props.editable && editingWellId.value ? (openBlock(), createBlock(_sfc_main$1, {
+          key: 0,
+          "well-id": editingWellId.value,
+          "well-data": __props.wells[editingWellId.value],
+          "edit-fields": __props.editFields,
+          "default-injection-volume": __props.defaultInjectionVolume,
+          position: editPopupPosition.value,
+          onSave: handleEditSave,
+          onClear: handleEditClear,
+          onClose: handleEditClose
+        }, null, 8, ["well-id", "well-data", "edit-fields", "default-injection-volume", "position"])) : createCommentVNode("", true)
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=WellPlate.vue.js.map