@teselagen/ove 0.7.27 → 0.7.28

package/viewSubmenu.js

@@ -0,0 +1,479 @@
+import { MenuItem } from "@blueprintjs/core";
+import React from "react";
+import { InfoHelper } from "@teselagen/ui";
+import useAAColorType from "../utils/useAAColorType";
+import { LimitAnnotations } from "../utils/useAnnotationLimits";
+import { chromatogramMenu } from "../utils/useChromatogramPrefs";
+import useMeltingTemp from "../utils/useMeltingTemp";
+
+export const translationsSubmenu = [
+  {
+    cmd: "toggleTranslations",
+    shouldDismissPopover: false
+  },
+  {
+    cmd: "toggleCdsFeatureTranslations",
+    shouldDismissPopover: false
+  },
+  {
+    cmd: "toggleOrfTranslations",
+    shouldDismissPopover: false
+  },
+  { cmd: "toggleAminoAcidNumbers_dna", shouldDismissPopover: false }
+];
+export const orfsSubmenu = [
+  {
+    cmd: "toggleOrfs",
+    shouldDismissPopover: false
+  },
+  {
+    cmd: "toggleOrfTranslations",
+    shouldDismissPopover: false
+  },
+  {
+    cmd: "useGtgAndCtgAsStartCodons",
+    shouldDismissPopover: false
+  },
+  {
+    cmd: "minOrfSizeCmd",
+    shouldDismissPopover: false
+  }
+];
+export const cutsitesSubmenu = [
+  {
+    cmd: "toggleCutsites",
+    shouldDismissPopover: false
+  }
+];
+export const featuresSubmenu = [
+  {
+    cmd: "toggleFeatures",
+    shouldDismissPopover: false
+  },
+  "onConfigureFeatureTypesClick",
+  {
+    cmd: "featureTypesCmd",
+    shouldDismissPopover: false
+  },
+  {
+    cmd: "featureFilterIndividualCmd",
+    shouldDismissPopover: false
+  },
+  {
+    cmd: "filterFeatureLengthsCmd",
+    shouldDismissPopover: false
+  }
+];
+export const partsSubmenu = props => {
+  return [
+    {
+      cmd: "toggleParts",
+      shouldDismissPopover: false
+    },
+    {
+      cmd: "partFilterIndividualCmd",
+      shouldDismissPopover: false
+    },
+    ...(props.allPartTags
+      ? [
+          {
+            cmd: "filterPartsByTagCmd",
+            shouldDismissPopover: false
+          }
+        ]
+      : []),
+    {
+      cmd: "filterPartLengthsCmd",
+      shouldDismissPopover: false
+    }
+  ];
+};
+export const primersSubmenu = [
+  {
+    cmd: "togglePrimers",
+    shouldDismissPopover: false
+  },
+  {
+    cmd: "primerFilterIndividualCmd",
+    shouldDismissPopover: false
+  },
+  {
+    cmd: "filterPrimerLengthsCmd",
+    shouldDismissPopover: false
+  }
+];
+
+export const fullSequenceTranslationMenu = {
+  text: "Full Sequence Translation",
+  cmd: "fullSequenceTranslations",
+  submenu: [
+    {
+      shouldDismissPopover: false,
+      cmd: "sequenceAA_allFrames",
+      text: "All Frames"
+      // frameNumber: "all" // TODO ?
+    },
+    {
+      shouldDismissPopover: false,
+      cmd: "sequenceAA_frame1",
+      text: "Frame 1"
+      // frameNumber: 1 // TODO ?
+    },
+    {
+      shouldDismissPopover: false,
+      cmd: "sequenceAA_frame2",
+      text: "Frame 2"
+      // frameNumber: 2 // TODO ?
+    },
+    {
+      shouldDismissPopover: false,
+      cmd: "sequenceAA_frame3",
+      text: "Frame 3"
+      // frameNumber: 3 // TODO ?
+    },
+    {
+      shouldDismissPopover: false,
+      cmd: "sequenceAAReverse_allFrames",
+      text: "All Reverse Frames"
+      // frameNumber: "all" // TODO ?
+    },
+    {
+      shouldDismissPopover: false,
+      cmd: "sequenceAAReverse_frame1",
+      text: "Frame -1"
+      // frameNumber: 1 // TODO ?
+    },
+    {
+      shouldDismissPopover: false,
+      cmd: "sequenceAAReverse_frame2",
+      text: "Frame -2"
+      // frameNumber: 2 // TODO ?
+    },
+    {
+      shouldDismissPopover: false,
+      cmd: "sequenceAAReverse_frame3",
+      text: "Frame -3"
+      // frameNumber: 3 // TODO ?
+    }
+  ]
+};
+export default [
+  // { cmd: "mapCaret" },
+  { cmd: "showAll", shouldDismissPopover: false },
+  { cmd: "hideAll", shouldDismissPopover: false },
+  {
+    cmd: "toggleChromatogram",
+    shouldDismissPopover: false,
+    submenu: [
+      { cmd: "toggleChromatogram", shouldDismissPopover: false },
+      chromatogramMenu
+    ]
+  },
+  { cmd: "toggleWarnings", shouldDismissPopover: false },
+  { cmd: "toggleAssemblyPieces", shouldDismissPopover: false },
+  { cmd: "toggleLineageAnnotations", shouldDismissPopover: false },
+  //deprecating
+  //{ cmd: "toggleFeatures", shouldDismissPopover: false },
+  {
+    cmd: "toggleFeatures",
+    // onClick: () => {}, //commenting this out to allow top level clicking -- https://github.com/TeselaGen/openVectorEditor/issues/865)
+    shouldDismissPopover: false,
+    submenu: featuresSubmenu
+  },
+  {
+    cmd: "toggleTranslations",
+    // onClick: () => {}, //commenting this out to allow top level clicking -- https://github.com/TeselaGen/openVectorEditor/issues/865)
+    shouldDismissPopover: false,
+    submenu: translationsSubmenu
+  },
+  { cmd: "togglePrimers", shouldDismissPopover: false },
+  // {
+  //   // TODO preprocess this as needed
+  //   cmd: "featureTypes",
+  //   itemId: "featureTypes",
+  //   //submenu of checklist of all feature types here
+  //   submenu: [{ text: "TO DO...", disabled: true }]
+  // },
+  {
+    cmd: "togglePartsWithSubmenu",
+    // onClick: () => {}, //commenting this out to allow top level clicking -- https://github.com/TeselaGen/openVectorEditor/issues/865)
+    shouldDismissPopover: false
+  },
+  { cmd: "toggleCutsites", shouldDismissPopover: false },
+  // TODO translations, cds feature translations?
+  {
+    cmd: "toggleOrfs",
+    // onClick: () => {}, //commenting this out to allow top level clicking -- https://github.com/TeselaGen/openVectorEditor/issues/865)
+    shouldDismissPopover: false,
+    submenu: orfsSubmenu
+  },
+  // { cmd: "complementary" },
+  // { cmd: "spaces" },
+  { divider: "" },
+  {
+    cmd: "toggleShowGCContent",
+    shouldDismissPopover: false,
+    text: "Percent GC Content of Selection"
+  },
+  {
+    text: "Melting Temp of Selection",
+    component: ToggleShowMeltingTemp
+  },
+  { divider: "" },
+  fullSequenceTranslationMenu,
+  { divider: "" },
+
+  { cmd: "toggleAxis", shouldDismissPopover: false },
+  { cmd: "toggleAxisNumbers", shouldDismissPopover: false },
+  {
+    cmd: "toggleAminoAcidNumbers_protein",
+    shouldDismissPopover: false
+  },
+  {
+    text: "Amino Acid Colors (by Hydrophobicity/by Family)",
+    component: function AAColorType(props) {
+      const [aaColorType, setAAColorType] = useAAColorType();
+      return (
+        <MenuItem
+          {...props}
+          text="Amino Acid Colors"
+          shouldDismissPopover={false}
+        >
+          <MenuItem
+            {...props}
+            text={
+              <div style={{ display: "flex" }}>
+                <span style={{ marginRight: 10 }}>Color By Hydrophobicity</span>
+                <InfoHelper
+                  content={
+                    <div style={{ color: "white" }}>
+                      <div
+                        style={{
+                          padding: 2,
+                          backgroundColor: "hsl(258.1, 100%, 69%)"
+                        }}
+                      >
+                        More Hydrophilic (4.5)
+                      </div>
+                      <div
+                        style={{
+                          padding: 2,
+                          backgroundColor: "hsl(356.9, 100%, 69%)"
+                        }}
+                      >
+                        More Hydrophobic (-4.5)
+                      </div>
+                    </div>
+                  }
+                ></InfoHelper>
+              </div>
+            }
+            shouldDismissPopover={false}
+            onClick={() => {
+              setAAColorType("byHydrophobicity");
+            }}
+            icon={aaColorType === "byHydrophobicity" ? "small-tick" : "blank"}
+          ></MenuItem>
+          <MenuItem
+            {...props}
+            text={
+              <div style={{ display: "flex" }}>
+                <span style={{ marginRight: 10 }}>Color By Family</span>
+                <InfoHelper
+                  content={
+                    <div style={{ color: "black" }}>
+                      <div style={{ padding: 2, backgroundColor: "#FFC0CB" }}>
+                        Positive: K, H, R
+                      </div>
+                      <div style={{ padding: 2, backgroundColor: "#EE82EE" }}>
+                        Negative: D, E
+                      </div>
+                      <div style={{ padding: 2, backgroundColor: "#D3D3D3" }}>
+                        Amidic: N, Q
+                      </div>
+                      <div style={{ padding: 2, backgroundColor: "#00FFFF" }}>
+                        Aliphatic: A, G, L, I, P, V
+                      </div>
+                      <div style={{ padding: 2, backgroundColor: "#FFA500" }}>
+                        Aromatic: F, W, Y
+                      </div>
+                      <div style={{ padding: 2, backgroundColor: "#FFFF00" }}>
+                        Sulfur: C, M
+                      </div>
+                      <div style={{ padding: 2, backgroundColor: "#90EE90" }}>
+                        Hydroxylic: S, T
+                      </div>
+                    </div>
+                  }
+                ></InfoHelper>
+              </div>
+            }
+            shouldDismissPopover={false}
+            onClick={() => {
+              setAAColorType("byFamily");
+            }}
+            icon={aaColorType === "byFamily" ? "small-tick" : "blank"}
+          ></MenuItem>
+        </MenuItem>
+      );
+    },
+    shouldDismissPopover: false
+  },
+  { cmd: "toggleDnaColors", shouldDismissPopover: false },
+  {
+    text: "Sequence",
+    submenu: [
+      { cmd: "toggleSequence", shouldDismissPopover: false },
+      { cmd: "toggleFivePrimeThreePrimeHints", shouldDismissPopover: false },
+      { cmd: "toggleReverseSequence", shouldDismissPopover: false },
+
+      {
+        text: "Case",
+        cmd: "sequenceCase",
+        submenu: [
+          {
+            cmd: "toggleSequenceMapFontUpper",
+            text: "Upper Case",
+            shouldDismissPopover: false
+          },
+          {
+            cmd: "toggleSequenceMapFontRaw",
+            text: "No Preference",
+            shouldDismissPopover: false
+          },
+          {
+            cmd: "toggleSequenceMapFontLower",
+            text: "Lower Case",
+            shouldDismissPopover: false
+          }
+        ]
+      },
+      {
+        cmd: "setRowViewSequenceSpacing",
+        shouldDismissPopover: false
+      }
+    ]
+  },
+
+  { divider: "" },
+  {
+    text: "Limits",
+    cmd: "limitsMenu",
+    submenu: [
+      {
+        text: "Max Features To Show",
+        component: LimitAnnotations,
+        type: "features"
+      },
+      {
+        text: "Max Parts To Show",
+        type: "parts",
+        component: LimitAnnotations
+      },
+      {
+        text: "Max Cut Sites To Show",
+        component: LimitAnnotations,
+        type: "cutsites"
+      },
+      {
+        text: "Max Primers To Show",
+        component: LimitAnnotations,
+        type: "primers"
+      },
+      {
+        text: "Max Warnings To Show",
+        component: LimitAnnotations,
+        type: "warnings"
+      },
+      {
+        text: "Max Assembly Pieces To Show",
+        component: LimitAnnotations,
+        type: "assemblyPieces"
+      },
+      {
+        text: "Max Lineage Annotations To Show",
+        component: LimitAnnotations,
+        type: "lineageAnnotations"
+      }
+    ]
+  },
+  {
+    text: "Labels",
+    submenu: [
+      { divider: "External Labels:" },
+      {
+        text: "Show All",
+        hiddenButSearchableText: "labels",
+        cmd: "showAllLabels",
+        shouldDismissPopover: false
+      },
+      {
+        text: "Hide All",
+        hiddenButSearchableText: "labels",
+        cmd: "hideAllLabels",
+        shouldDismissPopover: false
+      },
+      {
+        text: "Features",
+        hiddenButSearchableText: "labels",
+        cmd: "toggleFeatureLabels",
+        shouldDismissPopover: false
+      },
+      {
+        text: "Parts",
+        hiddenButSearchableText: "labels",
+        cmd: "togglePartLabels",
+        shouldDismissPopover: false
+      },
+      {
+        text: "Cutsites",
+        hiddenButSearchableText: "labels",
+        cmd: "toggleCutsiteLabels",
+        shouldDismissPopover: false
+      },
+      {
+        text: "Assembly Pieces",
+        hiddenButSearchableText: "labels",
+        cmd: "toggleAssemblyPieceLabels",
+        shouldDismissPopover: false
+      },
+      {
+        text: "LineageAnnotations",
+        hiddenButSearchableText: "labels",
+        cmd: "toggleLineageAnnotationLabels",
+        shouldDismissPopover: false
+      },
+      {
+        text: "Warnings",
+        hiddenButSearchableText: "labels",
+        cmd: "toggleWarningLabels",
+        shouldDismissPopover: false
+      },
+      {
+        text: "Primers",
+        hiddenButSearchableText: "labels",
+        cmd: "togglePrimerLabels",
+        shouldDismissPopover: false
+      },
+
+      { divider: "" },
+
+      { cmd: "adjustLabelLineIntensity", shouldDismissPopover: false },
+      { cmd: "adjustLabelSize", shouldDismissPopover: false }
+    ]
+  }
+];
+
+function ToggleShowMeltingTemp(props) {
+  const [showMeltingTemp, setShowMeltingTemp] = useMeltingTemp();
+  return (
+    <MenuItem
+      {...props}
+      shouldDismissPopover={false}
+      onClick={() => {
+        setShowMeltingTemp(!showMeltingTemp);
+      }}
+      icon={showMeltingTemp ? "small-tick" : "blank"}
+    ></MenuItem>
+  );
+}

package/visibilityTool.js

@@ -0,0 +1,39 @@
+import { Icon, Menu } from "@blueprintjs/core";
+import React from "react";
+import { createCommandMenu } from "@teselagen/ui";
+import viewSubmenu from "../MenuBar/viewSubmenu";
+import getCommands from "../commands";
+import ToolbarItem from "./ToolbarItem";
+import { connectToEditor } from "../withEditorProps";
+import withEditorProps from "../withEditorProps";
+
+export default connectToEditor(({ toolBar = {} }) => {
+  return {
+    isOpen: toolBar.openItem === "visibilityTool"
+  };
+})(({ toolbarItemProps, isOpen }) => {
+  return (
+    <ToolbarItem
+      {...{
+        Icon: <Icon icon="eye-open" />,
+        onIconClick: "toggleDropdown",
+        Dropdown: VisibilityOptions,
+        noDropdownIcon: true,
+        toggled: isOpen,
+        tooltip: isOpen ? "Hide Visibility Options" : "Show Visibility Options",
+        ...toolbarItemProps
+      }}
+    />
+  );
+});
+
+const VisibilityOptions = withEditorProps(function (props) {
+  return (
+    <Menu>
+      {createCommandMenu(viewSubmenu, getCommands({ props }), {
+        useTicks: true,
+        omitIcons: true
+      })}
+    </Menu>
+  );
+});

package/withEditorInteractions/getBpsPerRow.d.ts

@@ -1,9 +1,7 @@
 export default function getBpsPerRow({ charWidth, width, dimensions: { width: width2 }, marginWidth, sequenceData }: {
     charWidth?: number | undefined;
     width?: number | undefined;
-    dimensions?: {
-        width: any;
-    } | undefined;
+    dimensions?: {} | undefined;
     marginWidth?: number | undefined;
     sequenceData: any;
 }): number;

package/withHover.js

@@ -0,0 +1,113 @@
+import classnames from "classnames";
+import { compose } from "redux";
+import { connect } from "react-redux";
+import React from "react";
+import { store } from "@risingstack/react-easy-state";
+import * as hoveredAnnotationActions from "../redux/hoveredAnnotation";
+import { withHandlers, branch } from "recompose";
+import { modifiableTypes } from "@teselagen/sequence-utils";
+
+export const HoveredIdContext = React.createContext({
+  hoveredId: "" // default value
+});
+
+export function withHoveredIdFromContext(Component) {
+  return function HoveredIdComponent(props) {
+    return (
+      <HoveredIdContext.Consumer>
+        {contexts => <Component {...props} {...contexts} />}
+      </HoveredIdContext.Consumer>
+    );
+  };
+}
+export const hoveredAnnEasyStore = store({
+  hoveredAnn: undefined,
+  selectedAnn: undefined
+});
+
+export default compose(
+  withHoveredIdFromContext,
+  branch(
+    ({ noRedux }) => !noRedux,
+    connect(function (
+      state,
+      {
+        id,
+        editorName = "StandaloneEditor",
+        className,
+        hoveredId: hoveredIdFromContext,
+        passHoveredId
+      }
+    ) {
+      if (!editorName) {
+        console.warn(
+          "please pass an editorName to the withHover() wrapped component"
+        );
+      }
+      const editorState = state.VectorEditor[editorName] || {};
+      const hoveredId = editorState.hoveredAnnotation || hoveredIdFromContext; //we can pass a hoveredId from context in order to still use the hover functionality without being connected to redux! see http://localhost:3344/#/SimpleCircularOrLinearView for an example
+      const isIdHashmap = typeof id === "object";
+
+      const hovered = !!(isIdHashmap ? id[hoveredId] : hoveredId === id);
+      const newClassName = classnames(className, "hoverHelper", {
+        veAnnotationHovered: hovered
+      });
+      const toReturn = {
+        hovered,
+        className: newClassName
+      };
+      if (hovered && passHoveredId) {
+        //only pass hoveredId if it is hovered
+        toReturn.hoveredId = hoveredId;
+      }
+      return toReturn;
+    }, hoveredAnnotationActions)
+  ),
+  withHandlers({
+    onMouseOver: props =>
+      function (e) {
+        // loop through the target element and the parents and see if any of them have the hoverHelper class
+        // if they do, then we don't want to trigger the hover event
+        // if they don't, then we do want to trigger the hover event
+        // we should stop the loop if the target element is implementing this onMouseOver event
+        // e.stopPropagation(); //this is important otherwise hovering labels inside circular view label groups won't work
+        const target = e.target;
+        let alreadyHandled = false;
+        let currentElement = target;
+        while (currentElement) {
+          if (currentElement === e.currentTarget) {
+            break;
+          }
+          // console.log(`currentElement:`, currentElement)
+
+          if (currentElement.classList.contains("hoverHelper")) {
+            alreadyHandled = true;
+            break;
+          }
+          currentElement = currentElement.parentElement;
+        }
+        if (alreadyHandled) return;
+
+        // const alreadyHandled = e.target.classList.contains("hoverHelper");
+        const { editorName, id, hoveredAnnotationUpdate } = props;
+        const isIdHashmap = typeof id === "object";
+        const idToPass = isIdHashmap ? Object.keys(id)[0] : id;
+        const annot = props?.annotation || props?.label?.annotation;
+        if (modifiableTypes.includes(annot?.annotationTypePlural)) {
+          hoveredAnnEasyStore.hoveredAnn = annot;
+        }
+        //because the calling onHover can slow things down, we disable it if dragging or scrolling
+        if (window.__veDragging || window.__veScrolling) return;
+
+        hoveredAnnotationUpdate &&
+          hoveredAnnotationUpdate(idToPass, { editorName });
+      },
+    onMouseLeave: props => e => {
+      hoveredAnnEasyStore.hoveredAnn = undefined;
+      const { editorName, hoveredAnnotationClear } = props;
+      e.stopPropagation();
+      if (window.__veDragging || window.__veScrolling) return;
+      hoveredAnnotationClear && hoveredAnnotationClear(true, { editorName });
+    }
+  })
+);

package/withRestrictionEnzymes.js

@@ -0,0 +1,15 @@
+import { connectToEditor } from "../withEditorProps";
+import restrictionEnzymesSelector from "../selectors/restrictionEnzymesSelector";
+
+export const withRestrictionEnzymes = connectToEditor(
+  (editorState, ownProps) => {
+    const allRestrictionEnzymes = restrictionEnzymesSelector(
+      editorState,
+      ownProps.additionalEnzymes,
+      ownProps.enzymeGroupsOverride
+    );
+    return {
+      allRestrictionEnzymes
+    };
+  }
+);