@teselagen/ove 0.8.6 → 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

@@ -116611,7 +116611,7 @@ function showFileDialog({ multiple = false, onSelect }) {
   input.click();
 }
 __name(showFileDialog, "showFileDialog");
-const version = "0.8.5";
+const version = "0.8.6";
 const packageJson = {
   version
 };
@@ -123913,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)}%`,
@@ -123928,7 +123928,7 @@ function BarPlot({
         rx: 2
       }
     );
-  }), /* @__PURE__ */ React.createElement(
+  }), /* @__PURE__ */ React$1.createElement(
     "line",
     {
       x1: 1,
@@ -123939,7 +123939,7 @@ function BarPlot({
       strokeDasharray: "4,2",
       strokeWidth: 1
     }
-  ), /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React$1.createElement(
     "line",
     {
       x1: 0,
@@ -123961,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,
@@ -144427,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 [];
@@ -144438,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,
       {
@@ -144503,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");

package/index.es.js

@@ -116593,7 +116593,7 @@ function showFileDialog({ multiple = false, onSelect }) {
   input.click();
 }
 __name(showFileDialog, "showFileDialog");
-const version = "0.8.5";
+const version = "0.8.6";
 const packageJson = {
   version
 };
@@ -123895,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)}%`,
@@ -123910,7 +123910,7 @@ function BarPlot({
         rx: 2
       }
     );
-  }), /* @__PURE__ */ React.createElement(
+  }), /* @__PURE__ */ React__default.createElement(
     "line",
     {
       x1: 1,
@@ -123921,7 +123921,7 @@ function BarPlot({
       strokeDasharray: "4,2",
       strokeWidth: 1
     }
-  ), /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React__default.createElement(
     "line",
     {
       x1: 0,
@@ -123943,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,
@@ -144409,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 [];
@@ -144420,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,
       {
@@ -144485,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");

package/index.umd.js

@@ -144709,7 +144709,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     input.click();
   }
   __name(showFileDialog, "showFileDialog");
-  const version = "0.8.5";
+  const version = "0.8.6";
   const packageJson = {
     version
   };
@@ -150409,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)}%`,
@@ -150424,7 +150424,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
           rx: 2
         }
       );
-    }), /* @__PURE__ */ React.createElement(
+    }), /* @__PURE__ */ React$1.createElement(
       "line",
       {
         x1: 1,
@@ -150435,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,
@@ -150457,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,
@@ -170923,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 [];
@@ -170934,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,
         {
@@ -170999,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");

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.6",
+  "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/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,7 +9,7 @@ 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";
@@ -74,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 [];
@@ -91,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
@@ -162,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;