@teselagen/ove 0.8.6 → 0.8.8

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.8",
   "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

@@ -41,7 +41,7 @@ import LinearView from "../LinearView";
 import RowView from "../RowView";
 import StatusBar from "../StatusBar";
 import DropHandler from "./DropHandler";
-import Properties from "../helperComponents/PropertiesDialog";
+import PropertiesDialog from "../helperComponents/PropertiesDialog";
 import "./style.css";
 import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
 import DigestTool from "../DigestTool/DigestTool";
@@ -76,7 +76,7 @@ const _panelMap = {
   digestTool: DigestTool,
   pcrTool: PCRTool,
   properties: {
-    comp: Properties,
+    comp: PropertiesDialog,
     panelSpecificProps: ["PropertiesProps"]
   },
   mismatches: Mismatches

package/src/Editor/userDefinedHandlersAndOpts.js

@@ -11,6 +11,8 @@ export const userDefinedHandlersAndOpts = [
   "allowPrimerBasesToBeEdited",
   "truncateLabelsThatDoNotFit",
   "smartCircViewLabelRender",
+  "on_setPanelAsActive",
+  "on_propertiesViewTabUpdate",
   "onConfigureFeatureTypesClick",
   "allPartTags",
   "bpLimit",

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;

package/src/redux/panelsShown.js

@@ -17,7 +17,7 @@ export const togglePanelFullScreen = createAction("togglePanelFullScreen");
 export const collapsePanel = createAction("collapsePanel");
 export const closePanel = createAction("closePanel");
 export const _collapseSplitScreen = createAction("_collapseSplitScreen");
-export const setPanelAsActive = createAction("setPanelAsActive");
+export const setPanelAsActive = createAction("SET_PANEL_AS_ACTIVE");
 export const flipActiveTabFromLinearOrCircularIfNecessary = createAction(
   "flipActiveTabFromLinearOrCircularIfNecessary"
 );

package/src/withEditorProps/index.js

@@ -677,7 +677,8 @@ export function mapDispatchToActions(dispatch, ownProps) {
     editorName,
     actions,
     actionOverrides,
-    dispatch
+    dispatch,
+    ownProps
   );
   const updateSel =
     ownProps.selectionLayerUpdate || actionsToPass.selectionLayerUpdate;
@@ -717,7 +718,8 @@ export function getCombinedActions(
   editorName,
   actions,
   actionOverrides,
-  dispatch
+  dispatch,
+  ownProps
 ) {
   const meta = { editorName };
 
@@ -758,6 +760,21 @@ export function getCombinedActions(
     ...metaActions
     // ...metaOverrides
   };
+  function addGenericHook(hookName) {
+    const oldHook = actionsToPass[hookName];
+    actionsToPass[hookName] = (...args) => {
+      const toRet = oldHook(...args);
+      const newHookName = `on_${hookName}`;
+      if (ownProps[newHookName]) {
+        setTimeout(() => {
+          ownProps[newHookName](...args);
+        }, 0);
+      }
+      return toRet;
+    };
+  }
+  ["setPanelAsActive", "propertiesViewTabUpdate"].forEach(addGenericHook);
+
   return bindActionCreators(actionsToPass, dispatch);
 }
 

package/withEditorProps/index.d.ts

@@ -4,7 +4,7 @@ export function mapDispatchToActions(dispatch: any, ownProps: any): {
     dispatch: any;
 };
 export function fakeActionOverrides(): {};
-export function getCombinedActions(editorName: any, actions: any, actionOverrides: any, dispatch: any): {};
+export function getCombinedActions(editorName: any, actions: any, actionOverrides: any, dispatch: any, ownProps: any): {};
 export function getShowGCContent(state: any, ownProps: any): any;
 export function handleSave(props: any): (opts?: {}) => Promise<any>;
 export function handleInverse(props: any): () => false | undefined;