@teselagen/ove 0.0.14 → 0.0.15

package/src/MenuBar/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/src/PCRTool/PCRTool.js

@@ -0,0 +1,173 @@
+import { compose } from "recompose";
+import React from "react";
+
+import withEditorInteractions from "../withEditorInteractions";
+import { ReactSelectField, tgFormValues } from "@teselagen/ui";
+import { reduxForm } from "redux-form";
+import { flatMap, forEach, keyBy } from "lodash";
+import SimpleCircularOrLinearView from "../SimpleCircularOrLinearView";
+import {
+  getReverseComplementSequenceString,
+  getSequenceDataBetweenRange,
+  tidyUpSequenceData,
+  shiftAnnotationsByLen
+} from "@teselagen/sequence-utils";
+import { getRangeLength, getSequenceWithinRange } from "@teselagen/range-utils";
+
+function PCRTool(props) {
+  const {
+    sequenceData,
+    dimensions: { width, height },
+    forwardPrimer,
+    reversePrimer,
+    primerClicked
+  } = props;
+  const origSeqLen = sequenceData.sequence.length;
+  forEach(sequenceData.primers, (p) => (p.originalId = p.id));
+  const fPrimer = sequenceData.primers[forwardPrimer];
+  const rPrimer = sequenceData.primers[reversePrimer];
+  let seqBetween;
+  if (fPrimer && rPrimer) {
+    const r = {
+      start: fPrimer.start,
+      end: rPrimer.end
+    };
+
+    const newSeqData = getSequenceDataBetweenRange(sequenceData, r);
+
+    if (rPrimer.bases) {
+      // remove rPrimer length from end of seq
+      const rPrimerLen = getRangeLength(rPrimer, origSeqLen);
+
+      newSeqData.sequence = getSequenceWithinRange(
+        { start: 0, end: newSeqData.sequence.length - rPrimerLen - 1 },
+        newSeqData.sequence
+      );
+      // tack back in the rPrimer.bases
+      newSeqData.sequence =
+        newSeqData.sequence + getReverseComplementSequenceString(rPrimer.bases);
+      const newRPrimer = keyBy(newSeqData.primers, "id")[reversePrimer];
+
+      newRPrimer.end = newSeqData.sequence.length - 1;
+    }
+    if (fPrimer.bases) {
+      const fPrimerLength = getRangeLength(fPrimer, origSeqLen);
+      const newSeqLen1 = newSeqData.sequence.length;
+      // remove fPrimer length from start of seq
+      newSeqData.sequence = getSequenceWithinRange(
+        { start: fPrimerLength, end: newSeqData.sequence.length },
+        newSeqData.sequence
+      );
+      // add back in the fPrimer.bases
+      newSeqData.sequence = fPrimer.bases + newSeqData.sequence;
+      // shift the existing annotations by the difference in seqLen before and after that operation
+      const newSeqLen2 = newSeqData.sequence.length;
+      const diff = newSeqLen2 - newSeqLen1;
+      shiftAnnotationsByLen({
+        seqData: newSeqData,
+        insertLength: diff,
+        caretPosition: 0
+      });
+      const newFPrimer = keyBy(newSeqData.primers, "id")[forwardPrimer];
+      newFPrimer.start = 0;
+    }
+
+    seqBetween = tidyUpSequenceData(newSeqData, {
+      provideNewIdsForAnnotations: true
+    });
+    seqBetween.name = `PCR Product from ${sequenceData.name} `;
+  }
+  const getPrimers = (opts) => {
+    return flatMap(
+      sequenceData.primers,
+      ({ name, id, forward, start, end }) => {
+        if (opts.forward && !forward) return [];
+        if (!opts.forward && forward) return [];
+        return {
+          label: (
+            <div
+              style={{
+                width: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between"
+              }}
+            >
+              <div>{name}</div>
+              <div
+                style={{
+                  marginLeft: 8,
+                  fontStyle: "italic",
+                  color: "grey",
+                  fontSize: 11
+                }}
+              >
+                ({start + 1} - {end + 1})
+              </div>
+            </div>
+          ),
+          value: id
+        };
+      }
+    );
+  };
+  const forwardPrimers = getPrimers({ forward: true });
+  const reversePrimers = getPrimers({ forward: false });
+  return (
+    <div
+      className="createPcrTool"
+      style={{ padding: 10, overflowY: "auto", height }}
+    >
+      <ReactSelectField
+        noResultsText="Create a new primer in the forward direction to use it in this tool"
+        inlineLabel
+        tooltipError
+        options={forwardPrimers}
+        defaultValue={forwardPrimers[0] ? forwardPrimers[0].value : undefined}
+        name="forwardPrimer"
+        label="Forward Primer:"
+      />
+      <ReactSelectField
+        noResultsText="Create a new primer in the reverse direction to use it in this tool"
+        inlineLabel
+        tooltipError
+        options={reversePrimers}
+        defaultValue={reversePrimers[0] ? reversePrimers[0].value : undefined}
+        name="reversePrimer"
+        label="Reverse Primer:"
+      />
+      <div style={{ fontWeight: "600", fontSize: 13 }}>Output Product:</div>
+      {seqBetween ? (
+        <SimpleCircularOrLinearView
+            noWarnings
+            withZoomLinearView
+            withZoomCircularView
+            withChoosePreviewType
+            withDownload
+            smallSlider
+            withCaretEnabled
+            width={width - 50}
+            height={Math.max(height - 250, 400)}
+            sequenceData={seqBetween}
+            primerClicked={(args) => {
+              primerClicked({
+                ...args,
+                annotation: sequenceData.primers[args.annotation.originalId]
+              });
+            }}
+          ></SimpleCircularOrLinearView>
+      ) : (
+        <div style={{ marginTop: 5, fontStyle: "italic", color: "grey" }}>
+          Please choose a forward and reverse primer to see the resulting PCR
+          sequence
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default compose(
+  withEditorInteractions,
+  reduxForm({ form: "PCRTool" }),
+  tgFormValues("forwardPrimer", "reversePrimer")
+)(PCRTool);