@teselagen/ove 0.8.5 → 0.8.7

package/BarPlot/index.d.ts

@@ -1,16 +1,9 @@
-/**
- * Minimal SVG BarPlot component
- * @param {Object} props
- * @param {number[]} props.data - Array of numbers to plot
- * @param {number} [props.width=300]
- * @param {number} [props.height=150]
- * @param {string[]} [props.barColors]
- */
 export function BarPlot({ data, width, height, barColors, className }: {
-    data: number[];
+    data: any;
     width?: number | undefined;
     height?: number | undefined;
-    barColors?: string[] | undefined;
+    barColors: any;
+    className: any;
 }): import("react/jsx-runtime").JSX.Element | null;
 export function AminoAcidCirclePlot({ data, width, className }: {
     data: any;

package/helperComponents/PropertiesDialog/index.d.ts

@@ -1,5 +1,3 @@
 export function PropertiesDialog(props: any): import("react/jsx-runtime").JSX.Element;
-declare const _default: import('../../../../../node_modules/react-redux').ConnectedComponent<(props: any) => import("react/jsx-runtime").JSX.Element, {
-    [x: string]: any;
-}>;
+declare const _default: any;
 export default _default;

package/index.cjs.js

@@ -109747,14 +109747,21 @@ function getAnnotationNameAndStartStopString({
     end2 = start2 - 1;
     start2 = oldEnd + 1;
   }
-  return `${startText ? startText : ""} ${typeToUse ? typeToUse + " -" : ""} ${name2 ? name2 : ""} - Start: ${isProtein2 ? (start2 + 3) / 3 : start2 + 1} End: ${isProtein2 ? (end2 + 1) / 3 : end2 + 1} ${overlapsSelf ? "(Overlaps Self) " : ""}${message ? "\n" + message : ""} ${readOnly2 ? "" : annotationTypePlural === "cutsites" ? `
+  const interactionInstructions = readOnly2 ? "" : annotationTypePlural === "cutsites" ? `
 
- click --> top cut position
- alt/option+click --> bottom cut position
- cmd/ctrl+click --> recognition range` : `
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  INTERACTIONS:
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   click → top cut position
+   alt/option+click → bottom cut position
+   cmd/ctrl+click → recognition range` : `
 
-alt/option+click --> jump row view to start/end
-double click --> edit`}`;
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  INTERACTIONS:
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   alt/option+click → jump row view to start/end
+   double click → edit`;
+  return `${startText ? startText : ""} ${typeToUse ? typeToUse + " -" : ""} ${name2 ? name2 : ""} - Start: ${isProtein2 ? (start2 + 3) / 3 : start2 + 1} End: ${isProtein2 ? (end2 + 1) / 3 : end2 + 1} ${overlapsSelf ? "(Overlaps Self) " : ""}${message ? "\n" + message : ""}${interactionInstructions}`;
 }
 __name(getAnnotationNameAndStartStopString, "getAnnotationNameAndStartStopString");
 const orfFrameToColorMap = {
@@ -116604,7 +116611,7 @@ function showFileDialog({ multiple = false, onSelect }) {
   input.click();
 }
 __name(showFileDialog, "showFileDialog");
-const version = "0.8.4";
+const version = "0.8.6";
 const packageJson = {
   version
 };
@@ -123906,9 +123913,9 @@ function BarPlot({
   if (!data || data.length === 0) return null;
   const maxVal = Math.max(...data);
   const barWidth = width / data.length;
-  return /* @__PURE__ */ React.createElement("svg", { width, height, className }, data.map((val2, i) => {
+  return /* @__PURE__ */ React$1.createElement("svg", { width, height, className }, data.map((val2, i) => {
     const barHeight = val2 / maxVal * (height - 2);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React$1.createElement(
       "rect",
       {
         "data-tip": `${val2 == null ? void 0 : val2.toFixed(1)}%`,
@@ -123921,7 +123928,7 @@ function BarPlot({
         rx: 2
       }
     );
-  }), /* @__PURE__ */ React.createElement(
+  }), /* @__PURE__ */ React$1.createElement(
     "line",
     {
       x1: 1,
@@ -123932,7 +123939,7 @@ function BarPlot({
       strokeDasharray: "4,2",
       strokeWidth: 1
     }
-  ), /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React$1.createElement(
     "line",
     {
       x1: 0,
@@ -123954,7 +123961,7 @@ function AminoAcidCirclePlot({ data, width, className }) {
   const maxRadius = spacing / 2 - 2 > 0 ? spacing / 2 - 2 : 8;
   const radius = Math.max(8, Math.min(maxRadius, 20));
   const svgHeight = radius * 2 + 10;
-  return /* @__PURE__ */ React.createElement("svg", { width, height: svgHeight, className }, data.map((d2, idx) => /* @__PURE__ */ React.createElement("g", { key: idx }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React$1.createElement("svg", { width, height: svgHeight, className }, data.map((d2, idx) => /* @__PURE__ */ React$1.createElement("g", { key: idx }, /* @__PURE__ */ React$1.createElement(
     "circle",
     {
       "data-tip": d2.group,
@@ -143562,7 +143569,7 @@ const genericAnnotationProperties = /* @__PURE__ */ __name(({
       this.commands = getCommands(this);
     }
     render() {
-      var _a2;
+      var _a2, _b2;
       const {
         readOnly: readOnly2,
         annotations = {},
@@ -143573,7 +143580,8 @@ const genericAnnotationProperties = /* @__PURE__ */ __name(({
         isProtein: isProtein2,
         allPartTags,
         annotationPropertiesSelectedEntities: _annotationPropertiesSelectedEntities,
-        selectedAnnotationId
+        selectedAnnotationId,
+        PropertiesProps
       } = this.props;
       const annotationPropertiesSelectedEntities = _annotationPropertiesSelectedEntities.filter((a2) => annotations[a2.id]);
       const deleteAnnotation = this.props[`delete${annotationTypeUpper}`];
@@ -143585,6 +143593,7 @@ const genericAnnotationProperties = /* @__PURE__ */ __name(({
         });
       });
       const keyedPartTags = (_a2 = getKeyedTagsAndTagOptions(allPartTags)) != null ? _a2 : {};
+      const additionalColumns = ((_b2 = PropertiesProps == null ? void 0 : PropertiesProps[annotationType]) == null ? void 0 : _b2.additionalColumns) || [];
       this.schema = {
         fields: [
           {
@@ -143670,7 +143679,8 @@ const genericAnnotationProperties = /* @__PURE__ */ __name(({
               }, "render")
             }
           ] : [],
-          { path: "strand", type: "number" }
+          { path: "strand", type: "number" },
+          ...additionalColumns
         ]
       };
       return /* @__PURE__ */ React$1.createElement(
@@ -143812,8 +143822,9 @@ const genericAnnotationProperties = /* @__PURE__ */ __name(({
         selectionLayer: selectionLayer2,
         featureLengthsToHide: featureLengthsToHide2,
         primerLengthsToHide: primerLengthsToHide2,
-        partLengthsToHide: partLengthsToHide2
-      }) => {
+        partLengthsToHide: partLengthsToHide2,
+        PropertiesProps
+      }, ownProps) => {
         return {
           annotationVisibility: annotationVisibility2,
           selectionLayer: selectionLayer2,
@@ -143825,7 +143836,8 @@ const genericAnnotationProperties = /* @__PURE__ */ __name(({
           sequence: sequenceData2.sequence,
           annotations: sequenceData2[annotationType + "s"],
           [annotationType + "s"]: sequenceData2[annotationType + "s"],
-          sequenceLength: sequenceData2.sequence.length
+          sequenceLength: sequenceData2.sequence.length,
+          PropertiesProps: ownProps.PropertiesProps || PropertiesProps
         };
       }
     ),
@@ -144415,6 +144427,19 @@ const PropertiesDialog = /* @__PURE__ */ __name((props) => {
   if (propertiesList.map((nameOrOverride) => nameOrOverride.name || nameOrOverride).indexOf(tabId) === -1) {
     tabId = propertiesList[0].name || propertiesList[0];
   }
+  const getAnnotationCount = /* @__PURE__ */ __name((name2) => {
+    const annotations = props[name2] || props.sequenceData[name2];
+    let count2;
+    if (Array.isArray(annotations)) {
+      count2 = annotations.length;
+    } else if (annotations && typeof annotations === "object") {
+      count2 = Object.keys(annotations).length;
+    }
+    if (isNumber$2(count2)) {
+      return /* @__PURE__ */ React$1.createElement(core.Tag, { className: "tg-smallTag", round: true, style: { marginLeft: 1 } }, count2);
+    }
+    return null;
+  }, "getAnnotationCount");
   const propertiesTabs = flatMap(propertiesList, (nameOrOverride) => {
     if (annotationsToSupport2[nameOrOverride] === false) {
       return [];
@@ -144426,12 +144451,16 @@ const PropertiesDialog = /* @__PURE__ */ __name((props) => {
         return null;
       }
     }
-    const title = (() => {
+    const count2 = getAnnotationCount(name2);
+    let title = (() => {
       if (nameOrOverride.Comp) return name2;
       if (name2 === "orfs") return "ORFs";
       if (name2 === "cutsites") return "Cut Sites";
       return startCase(name2);
     })();
+    if (count2) {
+      title = /* @__PURE__ */ React$1.createElement("div", { style: { display: "flex", alignItems: "center" } }, title, count2);
+    }
     return /* @__PURE__ */ React$1.createElement(
       core.Tab,
       {
@@ -144447,7 +144476,8 @@ const PropertiesDialog = /* @__PURE__ */ __name((props) => {
             showReadOnly,
             showAvailability,
             disableSetReadOnly,
-            selectedAnnotationId
+            selectedAnnotationId,
+            PropertiesProps: props.PropertiesProps
           }), nameOrOverride.name && nameOrOverride))
         )
       }
@@ -144490,11 +144520,7 @@ const PropertiesDialog = /* @__PURE__ */ __name((props) => {
     )
   );
 }, "PropertiesDialog");
-const Properties = redux.compose(
-  connectToEditor(({ propertiesTool: propertiesTool2, annotationsToSupport: annotationsToSupport2 }) => {
-    return { propertiesTool: propertiesTool2, annotationsToSupport: annotationsToSupport2 };
-  })
-)(PropertiesDialog);
+const Properties = withEditorProps(PropertiesDialog);
 const useLadders = /* @__PURE__ */ __name(() => {
   return useLocalStorageState("tg-additional-ladder", { defaultValue: [] });
 }, "useLadders");
@@ -145397,7 +145423,7 @@ const _panelMap = {
   pcrTool: PCRTool$1,
   properties: {
     comp: Properties,
-    panelSpecificPropsToSpread: ["PropertiesProps"]
+    panelSpecificProps: ["PropertiesProps"]
   },
   mismatches: Mismatches$1
 };

package/index.es.js

@@ -109729,14 +109729,21 @@ function getAnnotationNameAndStartStopString({
     end2 = start2 - 1;
     start2 = oldEnd + 1;
   }
-  return `${startText ? startText : ""} ${typeToUse ? typeToUse + " -" : ""} ${name2 ? name2 : ""} - Start: ${isProtein2 ? (start2 + 3) / 3 : start2 + 1} End: ${isProtein2 ? (end2 + 1) / 3 : end2 + 1} ${overlapsSelf ? "(Overlaps Self) " : ""}${message ? "\n" + message : ""} ${readOnly2 ? "" : annotationTypePlural === "cutsites" ? `
+  const interactionInstructions = readOnly2 ? "" : annotationTypePlural === "cutsites" ? `
 
- click --> top cut position
- alt/option+click --> bottom cut position
- cmd/ctrl+click --> recognition range` : `
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  INTERACTIONS:
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   click → top cut position
+   alt/option+click → bottom cut position
+   cmd/ctrl+click → recognition range` : `
 
-alt/option+click --> jump row view to start/end
-double click --> edit`}`;
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  INTERACTIONS:
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   alt/option+click → jump row view to start/end
+   double click → edit`;
+  return `${startText ? startText : ""} ${typeToUse ? typeToUse + " -" : ""} ${name2 ? name2 : ""} - Start: ${isProtein2 ? (start2 + 3) / 3 : start2 + 1} End: ${isProtein2 ? (end2 + 1) / 3 : end2 + 1} ${overlapsSelf ? "(Overlaps Self) " : ""}${message ? "\n" + message : ""}${interactionInstructions}`;
 }
 __name(getAnnotationNameAndStartStopString, "getAnnotationNameAndStartStopString");
 const orfFrameToColorMap = {
@@ -116586,7 +116593,7 @@ function showFileDialog({ multiple = false, onSelect }) {
   input.click();
 }
 __name(showFileDialog, "showFileDialog");
-const version = "0.8.4";
+const version = "0.8.6";
 const packageJson = {
   version
 };
@@ -123888,9 +123895,9 @@ function BarPlot({
   if (!data || data.length === 0) return null;
   const maxVal = Math.max(...data);
   const barWidth = width / data.length;
-  return /* @__PURE__ */ React.createElement("svg", { width, height, className }, data.map((val2, i) => {
+  return /* @__PURE__ */ React__default.createElement("svg", { width, height, className }, data.map((val2, i) => {
     const barHeight = val2 / maxVal * (height - 2);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       "rect",
       {
         "data-tip": `${val2 == null ? void 0 : val2.toFixed(1)}%`,
@@ -123903,7 +123910,7 @@ function BarPlot({
         rx: 2
       }
     );
-  }), /* @__PURE__ */ React.createElement(
+  }), /* @__PURE__ */ React__default.createElement(
     "line",
     {
       x1: 1,
@@ -123914,7 +123921,7 @@ function BarPlot({
       strokeDasharray: "4,2",
       strokeWidth: 1
     }
-  ), /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React__default.createElement(
     "line",
     {
       x1: 0,
@@ -123936,7 +123943,7 @@ function AminoAcidCirclePlot({ data, width, className }) {
   const maxRadius = spacing / 2 - 2 > 0 ? spacing / 2 - 2 : 8;
   const radius = Math.max(8, Math.min(maxRadius, 20));
   const svgHeight = radius * 2 + 10;
-  return /* @__PURE__ */ React.createElement("svg", { width, height: svgHeight, className }, data.map((d2, idx) => /* @__PURE__ */ React.createElement("g", { key: idx }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement("svg", { width, height: svgHeight, className }, data.map((d2, idx) => /* @__PURE__ */ React__default.createElement("g", { key: idx }, /* @__PURE__ */ React__default.createElement(
     "circle",
     {
       "data-tip": d2.group,
@@ -143544,7 +143551,7 @@ const genericAnnotationProperties = /* @__PURE__ */ __name(({
       this.commands = getCommands(this);
     }
     render() {
-      var _a2;
+      var _a2, _b2;
       const {
         readOnly: readOnly2,
         annotations = {},
@@ -143555,7 +143562,8 @@ const genericAnnotationProperties = /* @__PURE__ */ __name(({
         isProtein: isProtein2,
         allPartTags,
         annotationPropertiesSelectedEntities: _annotationPropertiesSelectedEntities,
-        selectedAnnotationId
+        selectedAnnotationId,
+        PropertiesProps
       } = this.props;
       const annotationPropertiesSelectedEntities = _annotationPropertiesSelectedEntities.filter((a2) => annotations[a2.id]);
       const deleteAnnotation = this.props[`delete${annotationTypeUpper}`];
@@ -143567,6 +143575,7 @@ const genericAnnotationProperties = /* @__PURE__ */ __name(({
         });
       });
       const keyedPartTags = (_a2 = getKeyedTagsAndTagOptions(allPartTags)) != null ? _a2 : {};
+      const additionalColumns = ((_b2 = PropertiesProps == null ? void 0 : PropertiesProps[annotationType]) == null ? void 0 : _b2.additionalColumns) || [];
       this.schema = {
         fields: [
           {
@@ -143652,7 +143661,8 @@ const genericAnnotationProperties = /* @__PURE__ */ __name(({
               }, "render")
             }
           ] : [],
-          { path: "strand", type: "number" }
+          { path: "strand", type: "number" },
+          ...additionalColumns
         ]
       };
       return /* @__PURE__ */ React__default.createElement(
@@ -143794,8 +143804,9 @@ const genericAnnotationProperties = /* @__PURE__ */ __name(({
         selectionLayer: selectionLayer2,
         featureLengthsToHide: featureLengthsToHide2,
         primerLengthsToHide: primerLengthsToHide2,
-        partLengthsToHide: partLengthsToHide2
-      }) => {
+        partLengthsToHide: partLengthsToHide2,
+        PropertiesProps
+      }, ownProps) => {
         return {
           annotationVisibility: annotationVisibility2,
           selectionLayer: selectionLayer2,
@@ -143807,7 +143818,8 @@ const genericAnnotationProperties = /* @__PURE__ */ __name(({
           sequence: sequenceData2.sequence,
           annotations: sequenceData2[annotationType + "s"],
           [annotationType + "s"]: sequenceData2[annotationType + "s"],
-          sequenceLength: sequenceData2.sequence.length
+          sequenceLength: sequenceData2.sequence.length,
+          PropertiesProps: ownProps.PropertiesProps || PropertiesProps
         };
       }
     ),
@@ -144397,6 +144409,19 @@ const PropertiesDialog = /* @__PURE__ */ __name((props) => {
   if (propertiesList.map((nameOrOverride) => nameOrOverride.name || nameOrOverride).indexOf(tabId) === -1) {
     tabId = propertiesList[0].name || propertiesList[0];
   }
+  const getAnnotationCount = /* @__PURE__ */ __name((name2) => {
+    const annotations = props[name2] || props.sequenceData[name2];
+    let count2;
+    if (Array.isArray(annotations)) {
+      count2 = annotations.length;
+    } else if (annotations && typeof annotations === "object") {
+      count2 = Object.keys(annotations).length;
+    }
+    if (isNumber$2(count2)) {
+      return /* @__PURE__ */ React__default.createElement(Tag, { className: "tg-smallTag", round: true, style: { marginLeft: 1 } }, count2);
+    }
+    return null;
+  }, "getAnnotationCount");
   const propertiesTabs = flatMap(propertiesList, (nameOrOverride) => {
     if (annotationsToSupport2[nameOrOverride] === false) {
       return [];
@@ -144408,12 +144433,16 @@ const PropertiesDialog = /* @__PURE__ */ __name((props) => {
         return null;
       }
     }
-    const title = (() => {
+    const count2 = getAnnotationCount(name2);
+    let title = (() => {
       if (nameOrOverride.Comp) return name2;
       if (name2 === "orfs") return "ORFs";
       if (name2 === "cutsites") return "Cut Sites";
       return startCase(name2);
     })();
+    if (count2) {
+      title = /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex", alignItems: "center" } }, title, count2);
+    }
     return /* @__PURE__ */ React__default.createElement(
       Tab,
       {
@@ -144429,7 +144458,8 @@ const PropertiesDialog = /* @__PURE__ */ __name((props) => {
             showReadOnly,
             showAvailability,
             disableSetReadOnly,
-            selectedAnnotationId
+            selectedAnnotationId,
+            PropertiesProps: props.PropertiesProps
           }), nameOrOverride.name && nameOrOverride))
         )
       }
@@ -144472,11 +144502,7 @@ const PropertiesDialog = /* @__PURE__ */ __name((props) => {
     )
   );
 }, "PropertiesDialog");
-const Properties = compose$1(
-  connectToEditor(({ propertiesTool: propertiesTool2, annotationsToSupport: annotationsToSupport2 }) => {
-    return { propertiesTool: propertiesTool2, annotationsToSupport: annotationsToSupport2 };
-  })
-)(PropertiesDialog);
+const Properties = withEditorProps(PropertiesDialog);
 const useLadders = /* @__PURE__ */ __name(() => {
   return useLocalStorageState("tg-additional-ladder", { defaultValue: [] });
 }, "useLadders");
@@ -145379,7 +145405,7 @@ const _panelMap = {
   pcrTool: PCRTool$1,
   properties: {
     comp: Properties,
-    panelSpecificPropsToSpread: ["PropertiesProps"]
+    panelSpecificProps: ["PropertiesProps"]
   },
   mismatches: Mismatches$1
 };

package/index.umd.js

@@ -137895,14 +137895,21 @@ ${seq.sequence}
       end2 = start2 - 1;
       start2 = oldEnd + 1;
     }
-    return `${startText ? startText : ""} ${typeToUse ? typeToUse + " -" : ""} ${name2 ? name2 : ""} - Start: ${isProtein2 ? (start2 + 3) / 3 : start2 + 1} End: ${isProtein2 ? (end2 + 1) / 3 : end2 + 1} ${overlapsSelf ? "(Overlaps Self) " : ""}${message ? "\n" + message : ""} ${readOnly2 ? "" : annotationTypePlural === "cutsites" ? `
+    const interactionInstructions = readOnly2 ? "" : annotationTypePlural === "cutsites" ? `
 
- click --> top cut position
- alt/option+click --> bottom cut position
- cmd/ctrl+click --> recognition range` : `
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  INTERACTIONS:
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   click → top cut position
+   alt/option+click → bottom cut position
+   cmd/ctrl+click → recognition range` : `
 
-alt/option+click --> jump row view to start/end
-double click --> edit`}`;
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  INTERACTIONS:
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+   alt/option+click → jump row view to start/end
+   double click → edit`;
+    return `${startText ? startText : ""} ${typeToUse ? typeToUse + " -" : ""} ${name2 ? name2 : ""} - Start: ${isProtein2 ? (start2 + 3) / 3 : start2 + 1} End: ${isProtein2 ? (end2 + 1) / 3 : end2 + 1} ${overlapsSelf ? "(Overlaps Self) " : ""}${message ? "\n" + message : ""}${interactionInstructions}`;
   }
   __name(getAnnotationNameAndStartStopString, "getAnnotationNameAndStartStopString");
   const orfFrameToColorMap = {
@@ -144702,7 +144709,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     input.click();
   }
   __name(showFileDialog, "showFileDialog");
-  const version = "0.8.4";
+  const version = "0.8.6";
   const packageJson = {
     version
   };
@@ -150402,9 +150409,9 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     if (!data || data.length === 0) return null;
     const maxVal = Math.max(...data);
     const barWidth = width / data.length;
-    return /* @__PURE__ */ React.createElement("svg", { width, height, className }, data.map((val2, i2) => {
+    return /* @__PURE__ */ React$1.createElement("svg", { width, height, className }, data.map((val2, i2) => {
       const barHeight = val2 / maxVal * (height - 2);
-      return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ React$1.createElement(
         "rect",
         {
           "data-tip": `${val2 == null ? void 0 : val2.toFixed(1)}%`,
@@ -150417,7 +150424,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
           rx: 2
         }
       );
-    }), /* @__PURE__ */ React.createElement(
+    }), /* @__PURE__ */ React$1.createElement(
       "line",
       {
         x1: 1,
@@ -150428,7 +150435,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
         strokeDasharray: "4,2",
         strokeWidth: 1
       }
-    ), /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React$1.createElement(
       "line",
       {
         x1: 0,
@@ -150450,7 +150457,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     const maxRadius = spacing / 2 - 2 > 0 ? spacing / 2 - 2 : 8;
     const radius = Math.max(8, Math.min(maxRadius, 20));
     const svgHeight = radius * 2 + 10;
-    return /* @__PURE__ */ React.createElement("svg", { width, height: svgHeight, className }, data.map((d2, idx) => /* @__PURE__ */ React.createElement("g", { key: idx }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React$1.createElement("svg", { width, height: svgHeight, className }, data.map((d2, idx) => /* @__PURE__ */ React$1.createElement("g", { key: idx }, /* @__PURE__ */ React$1.createElement(
       "circle",
       {
         "data-tip": d2.group,
@@ -170058,7 +170065,7 @@ ${seqDataToCopy}\r
         this.commands = getCommands(this);
       }
       render() {
-        var _a2;
+        var _a2, _b2;
         const {
           readOnly: readOnly2,
           annotations = {},
@@ -170069,7 +170076,8 @@ ${seqDataToCopy}\r
           isProtein: isProtein2,
           allPartTags,
           annotationPropertiesSelectedEntities: _annotationPropertiesSelectedEntities,
-          selectedAnnotationId
+          selectedAnnotationId,
+          PropertiesProps
         } = this.props;
         const annotationPropertiesSelectedEntities = _annotationPropertiesSelectedEntities.filter((a2) => annotations[a2.id]);
         const deleteAnnotation = this.props[`delete${annotationTypeUpper}`];
@@ -170081,6 +170089,7 @@ ${seqDataToCopy}\r
           });
         });
         const keyedPartTags = (_a2 = getKeyedTagsAndTagOptions(allPartTags)) != null ? _a2 : {};
+        const additionalColumns = ((_b2 = PropertiesProps == null ? void 0 : PropertiesProps[annotationType]) == null ? void 0 : _b2.additionalColumns) || [];
         this.schema = {
           fields: [
             {
@@ -170166,7 +170175,8 @@ ${seqDataToCopy}\r
                 }, "render")
               }
             ] : [],
-            { path: "strand", type: "number" }
+            { path: "strand", type: "number" },
+            ...additionalColumns
           ]
         };
         return /* @__PURE__ */ React$1.createElement(
@@ -170308,8 +170318,9 @@ ${seqDataToCopy}\r
           selectionLayer: selectionLayer2,
           featureLengthsToHide: featureLengthsToHide2,
           primerLengthsToHide: primerLengthsToHide2,
-          partLengthsToHide: partLengthsToHide2
-        }) => {
+          partLengthsToHide: partLengthsToHide2,
+          PropertiesProps
+        }, ownProps) => {
           return {
             annotationVisibility: annotationVisibility2,
             selectionLayer: selectionLayer2,
@@ -170321,7 +170332,8 @@ ${seqDataToCopy}\r
             sequence: sequenceData2.sequence,
             annotations: sequenceData2[annotationType + "s"],
             [annotationType + "s"]: sequenceData2[annotationType + "s"],
-            sequenceLength: sequenceData2.sequence.length
+            sequenceLength: sequenceData2.sequence.length,
+            PropertiesProps: ownProps.PropertiesProps || PropertiesProps
           };
         }
       ),
@@ -170911,6 +170923,19 @@ ${seqDataToCopy}\r
     if (propertiesList.map((nameOrOverride) => nameOrOverride.name || nameOrOverride).indexOf(tabId) === -1) {
       tabId = propertiesList[0].name || propertiesList[0];
     }
+    const getAnnotationCount = /* @__PURE__ */ __name((name2) => {
+      const annotations = props[name2] || props.sequenceData[name2];
+      let count2;
+      if (Array.isArray(annotations)) {
+        count2 = annotations.length;
+      } else if (annotations && typeof annotations === "object") {
+        count2 = Object.keys(annotations).length;
+      }
+      if (isNumber$2(count2)) {
+        return /* @__PURE__ */ React$1.createElement(Tag, { className: "tg-smallTag", round: true, style: { marginLeft: 1 } }, count2);
+      }
+      return null;
+    }, "getAnnotationCount");
     const propertiesTabs = flatMap(propertiesList, (nameOrOverride) => {
       if (annotationsToSupport2[nameOrOverride] === false) {
         return [];
@@ -170922,12 +170947,16 @@ ${seqDataToCopy}\r
           return null;
         }
       }
-      const title = (() => {
+      const count2 = getAnnotationCount(name2);
+      let title = (() => {
         if (nameOrOverride.Comp) return name2;
         if (name2 === "orfs") return "ORFs";
         if (name2 === "cutsites") return "Cut Sites";
         return startCase(name2);
       })();
+      if (count2) {
+        title = /* @__PURE__ */ React$1.createElement("div", { style: { display: "flex", alignItems: "center" } }, title, count2);
+      }
       return /* @__PURE__ */ React$1.createElement(
         Tab,
         {
@@ -170943,7 +170972,8 @@ ${seqDataToCopy}\r
               showReadOnly,
               showAvailability,
               disableSetReadOnly,
-              selectedAnnotationId
+              selectedAnnotationId,
+              PropertiesProps: props.PropertiesProps
             }), nameOrOverride.name && nameOrOverride))
           )
         }
@@ -170986,11 +171016,7 @@ ${seqDataToCopy}\r
       )
     );
   }, "PropertiesDialog");
-  const Properties = compose$1(
-    connectToEditor(({ propertiesTool: propertiesTool2, annotationsToSupport: annotationsToSupport2 }) => {
-      return { propertiesTool: propertiesTool2, annotationsToSupport: annotationsToSupport2 };
-    })
-  )(PropertiesDialog);
+  const Properties = withEditorProps(PropertiesDialog);
   const useLadders = /* @__PURE__ */ __name(() => {
     return useLocalStorageState("tg-additional-ladder", { defaultValue: [] });
   }, "useLadders");
@@ -171893,7 +171919,7 @@ ${seqDataToCopy}\r
     pcrTool: PCRTool$1,
     properties: {
       comp: Properties,
-      panelSpecificPropsToSpread: ["PropertiesProps"]
+      panelSpecificProps: ["PropertiesProps"]
     },
     mismatches: Mismatches$1
   };

package/ove.css

@@ -10391,7 +10391,16 @@ body:not(.drag-active)
     0 1px 3px rgba(0, 0, 0, 0.12),
     0 1px 2px rgba(0, 0, 0, 0.18);
 }
-
+.no-card .tg-card {
+  border-radius: unset;
+  box-shadow: none;
+  padding: 0;
+  margin-bottom: 0;
+  background: inherit;
+}
+.bp3-dark .no-card .tg-card {
+  background: inherit !important;
+}
 .tg-card-header {
   display: flex;
   flex-direction: row;
@@ -11790,9 +11799,6 @@ h5 {
   width: fit-content;
 }
 
-.ve-propertiesPanel .data-table-container {
-  min-height: 250px;
-}
 .ve-propertiesPanel .data-table-footer {
   margin-top: 5px;
   margin-bottom: 5px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.8.5",
+  "version": "0.8.7",
   "main": "./src/index.js",
   "type": "module",
   "exports": {
@@ -19,7 +19,7 @@
     "@teselagen/range-utils": "0.3.13",
     "@teselagen/react-list": "0.8.18",
     "@teselagen/sequence-utils": "0.3.35",
-    "@teselagen/ui": "0.10.7",
+    "@teselagen/ui": "0.10.8",
     "@use-gesture/react": "10.3.0",
     "biomsa": "^0.2.4",
     "classnames": "^2.3.2",

package/src/BarPlot/index.js

@@ -6,6 +6,7 @@
  * @param {number} [props.height=150]
  * @param {string[]} [props.barColors]
  */
+import React from 'react'
 export function BarPlot({
   data,
   width = 300,

package/src/Editor/index.js

@@ -77,7 +77,7 @@ const _panelMap = {
   pcrTool: PCRTool,
   properties: {
     comp: Properties,
-    panelSpecificPropsToSpread: ["PropertiesProps"]
+    panelSpecificProps: ["PropertiesProps"]
   },
   mismatches: Mismatches
 };

package/src/helperComponents/PropertiesDialog/GenericAnnotationProperties.js

@@ -68,7 +68,8 @@ const genericAnnotationProperties = ({
         allPartTags,
         annotationPropertiesSelectedEntities:
           _annotationPropertiesSelectedEntities,
-        selectedAnnotationId
+        selectedAnnotationId,
+        PropertiesProps
       } = this.props;
       const annotationPropertiesSelectedEntities =
         _annotationPropertiesSelectedEntities.filter(a => annotations[a.id]);
@@ -87,6 +88,9 @@ const genericAnnotationProperties = ({
 
       const keyedPartTags = getKeyedTagsAndTagOptions(allPartTags) ?? {};
 
+      const additionalColumns =
+        PropertiesProps?.[annotationType]?.additionalColumns || [];
+
       this.schema = {
         fields: [
           {
@@ -194,7 +198,8 @@ const genericAnnotationProperties = ({
                 }
               ]
             : []),
-          { path: "strand", type: "number" }
+          { path: "strand", type: "number" },
+          ...additionalColumns
         ]
       };
 
@@ -351,15 +356,19 @@ const genericAnnotationProperties = ({
 
   return compose(
     connectToEditor(
-      ({
-        readOnly,
-        annotationVisibility = {},
-        sequenceData,
-        selectionLayer,
-        featureLengthsToHide,
-        primerLengthsToHide,
-        partLengthsToHide
-      }) => {
+      (
+        {
+          readOnly,
+          annotationVisibility = {},
+          sequenceData,
+          selectionLayer,
+          featureLengthsToHide,
+          primerLengthsToHide,
+          partLengthsToHide,
+          PropertiesProps
+        },
+        ownProps
+      ) => {
         return {
           annotationVisibility,
           selectionLayer,
@@ -371,7 +380,8 @@ const genericAnnotationProperties = ({
           sequence: sequenceData.sequence,
           annotations: sequenceData[annotationType + "s"],
           [annotationType + "s"]: sequenceData[annotationType + "s"],
-          sequenceLength: sequenceData.sequence.length
+          sequenceLength: sequenceData.sequence.length,
+          PropertiesProps: ownProps.PropertiesProps || PropertiesProps
         };
       }
     ),

package/src/helperComponents/PropertiesDialog/index.js

@@ -1,7 +1,6 @@
 import React from "react";
-import { compose } from "redux";
-import { Tab, Tabs } from "@blueprintjs/core";
-import { flatMap, startCase } from "lodash-es";
+import { Tab, Tabs, Tag } from "@blueprintjs/core";
+import { flatMap, isNumber, startCase } from "lodash-es";
 import FeatureProperties from "./FeatureProperties";
 import GeneralProperties from "./GeneralProperties";
 import CutsiteProperties from "./CutsiteProperties";
@@ -10,13 +9,14 @@ import GenbankView from "./GenbankView";
 import TranslationProperties from "./TranslationProperties";
 import PrimerProperties from "./PrimerProperties";
 import PartProperties from "./PartProperties";
-import { connectToEditor } from "../../withEditorProps";
+import withEditorProps from "../../withEditorProps";
 import "./style.css";
 import { userDefinedHandlersAndOpts } from "../../Editor/userDefinedHandlersAndOpts";
 import { pick } from "lodash-es";
 
 const PropertiesContainer = Comp => props => {
-  const { additionalFooterEls, additionalHeaderEls, overrideEl, ...rest } = props;
+  const { additionalFooterEls, additionalHeaderEls, overrideEl, ...rest } =
+    props;
   return (
     <>
       {additionalHeaderEls}
@@ -73,6 +73,26 @@ export const PropertiesDialog = props => {
     tabId = propertiesList[0].name || propertiesList[0];
   }
 
+  // Helper to get count for each annotation type
+  const getAnnotationCount = name => {
+    // Try to get from props, fallback to 0 if not found or not array
+    const annotations = props[name] || props.sequenceData[name];
+    let count;
+    if (Array.isArray(annotations)) {
+      count = annotations.length;
+    } else if (annotations && typeof annotations === "object") {
+      count = Object.keys(annotations).length;
+    }
+    if (isNumber(count)) {
+      return (
+        <Tag className="tg-smallTag" round style={{ marginLeft: 1 }}>
+          {count}
+        </Tag>
+      );
+    }
+    return null;
+  };
+
   const propertiesTabs = flatMap(propertiesList, nameOrOverride => {
     if (annotationsToSupport[nameOrOverride] === false) {
       return [];
@@ -90,12 +110,21 @@ export const PropertiesDialog = props => {
         return null;
       }
     }
-    const title = (() => {
+    const count = getAnnotationCount(name);
+    let title = (() => {
       if (nameOrOverride.Comp) return name; //just use the user supplied name because this is a custom panel
       if (name === "orfs") return "ORFs";
       if (name === "cutsites") return "Cut Sites";
       return startCase(name);
     })();
+    if (count) {
+      title = (
+        <div style={{ display: "flex", alignItems: "center" }}>
+          {title}
+          {count}
+        </div>
+      );
+    }
 
     return (
       <Tab
@@ -113,6 +142,7 @@ export const PropertiesDialog = props => {
               showAvailability,
               disableSetReadOnly,
               selectedAnnotationId,
+              PropertiesProps: props.PropertiesProps,
               ...(nameOrOverride.name && nameOrOverride)
             }}
           />
@@ -160,8 +190,4 @@ export const PropertiesDialog = props => {
   );
 };
 
-export default compose(
-  connectToEditor(({ propertiesTool, annotationsToSupport }) => {
-    return { propertiesTool, annotationsToSupport };
-  })
-)(PropertiesDialog);
+export default withEditorProps(PropertiesDialog);

package/src/helperComponents/PropertiesDialog/style.css

@@ -45,9 +45,6 @@
   width: fit-content;
 }
 
-.ve-propertiesPanel .data-table-container {
-  min-height: 250px;
-}
 .ve-propertiesPanel .data-table-footer {
   margin-top: 5px;
   margin-bottom: 5px;

package/src/utils/getAnnotationNameAndStartStopString.js

@@ -40,22 +40,16 @@ export default function getAnnotationNameAndStartStopString(
     end = start - 1;
     start = oldEnd + 1;
   }
+
+  const interactionInstructions = readOnly
+    ? ""
+    : annotationTypePlural === "cutsites"
+      ? `\n\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n  INTERACTIONS:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n   click → top cut position\n   alt/option+click → bottom cut position\n   cmd/ctrl+click → recognition range`
+      : `\n\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n  INTERACTIONS:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n   alt/option+click → jump row view to start/end\n   double click → edit`;
+
   return `${startText ? startText : ""} ${typeToUse ? typeToUse + " -" : ""} ${
     name ? name : ""
   } - Start: ${isProtein ? (start + 3) / 3 : start + 1} End: ${
     isProtein ? (end + 1) / 3 : end + 1
-  } ${overlapsSelf ? "(Overlaps Self) " : ""}${message ? "\n" + message : ""} ${
-    readOnly
-      ? ""
-      : annotationTypePlural === "cutsites"
-        ? `
-
- click --> top cut position
- alt/option+click --> bottom cut position
- cmd/ctrl+click --> recognition range`
-        : `
-
-alt/option+click --> jump row view to start/end
-double click --> edit`
-  }`;
+  } ${overlapsSelf ? "(Overlaps Self) " : ""}${message ? "\n" + message : ""}${interactionInstructions}`;
 }