@teselagen/ove 0.0.13 → 0.0.15

package/src/DigestTool/DigestTool.js

@@ -0,0 +1,223 @@
+// import uniqid from "shortid";
+// import Ladder from "./Ladder";
+import { compose, withProps } from "recompose";
+// import selectionLayer from "../redux/selectionLayer";
+import React from "react";
+import { DataTable } from "@teselagen/ui";
+import { getCutsiteType, getVirtualDigest } from "@teselagen/sequence-utils";
+import CutsiteFilter from "../CutsiteFilter";
+import Ladder from "./Ladder";
+// import getCutsiteType from "./getCutsiteType";
+import {
+  Tabs,
+  Tab,
+  Button,
+  InputGroup,
+  Intent,
+  Checkbox
+} from "@blueprintjs/core";
+import withEditorInteractions from "../withEditorInteractions";
+import { userDefinedHandlersAndOpts } from "../Editor/userDefinedHandlersAndOpts";
+import { noop, pick } from "lodash";
+
+const MAX_DIGEST_CUTSITES = 50;
+const MAX_PARTIAL_DIGEST_CUTSITES = 10;
+export class DigestTool extends React.Component {
+  state = { selectedTab: "virtualDigest" };
+  render() {
+    const {
+      editorName,
+      // height = 100,
+      dimensions = {},
+      lanes,
+      digestTool: { selectedFragment, computePartialDigest },
+      onDigestSave,
+      computePartialDigestDisabled,
+      computeDigestDisabled,
+      updateComputePartialDigest
+    } = this.props;
+    const { selectedTab } = this.state;
+    return (
+      <div
+        style={{
+          height:
+            typeof dimensions.height === "string" ? 100 : dimensions.height,
+          overflowY: "auto",
+          padding: 10
+        }}
+      >
+        {onDigestSave && (
+          <div style={{ display: "flex", marginBottom: 10 }}>
+            <InputGroup placeholder="My Digest" />
+            <Button
+              intent={Intent.PRIMARY}
+              onClick={() => {
+                onDigestSave({});
+              }}
+              style={{ marginLeft: 5 }}
+            >
+              {" "}
+              Save
+            </Button>
+          </div>
+        )}
+        <div style={{ display: "flex", justifyContent: "space-between" }}>
+          <Checkbox
+            onChange={() => {
+              updateComputePartialDigest(!computePartialDigest);
+            }}
+            checked={computePartialDigest}
+            label={
+              <span>
+                Show Partial Digests{" "}
+                {computePartialDigestDisabled ? (
+                  <span style={{ fontSize: 10 }}>
+                    {" "}
+                    -- Disabled (only supports {MAX_PARTIAL_DIGEST_CUTSITES} or
+                    fewer cut sites){" "}
+                  </span>
+                ) : null}
+              </span>
+            }
+            disabled={computePartialDigestDisabled}
+          ></Checkbox>
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="http://docs.teselagen.com/en/articles/5489322-restriction-digest-in-the-vector-editor"
+          >
+            Read the docs
+          </a>
+        </div>
+        Choose your enzymes:
+        <CutsiteFilter
+          {...pick(this.props, userDefinedHandlersAndOpts)}
+          editorName={editorName}
+        />
+        <br />
+        {computeDigestDisabled && (
+          <div
+            style={{
+              color: "red",
+              marginBottom: "6px",
+              fontSize: "15px"
+            }}
+          >
+            {`>${MAX_DIGEST_CUTSITES} cut sites detected. Filter out additional
+            restriction enzymes to visualize digest results`}
+          </div>
+        )}
+        <Tabs
+          selectedTabId={selectedTab}
+          onChange={(id) => {
+            this.setState({ selectedTab: id });
+          }}
+        >
+          <Tab
+            title="Virtual Digest"
+            id="virtualDigest"
+            panel={<Ladder {...this.props} editorName={editorName} />}
+          />
+          <Tab
+            title="Digest Info"
+            id="table"
+            panel={
+              <DataTable
+                noRouter
+                isSimple
+                maxHeight={400}
+                // noFooter
+                withSearch={false}
+                onSingleRowSelect={({ onFragmentSelect }) => {
+                  onFragmentSelect();
+                }}
+                reduxFormSelectedEntityIdMap={{
+                  input: {
+                    value: {
+                      [selectedFragment]: true
+                    },
+                    onChange: noop
+                  }
+                }}
+                formName="digestInfoTable"
+                entities={lanes[0].map(
+                  ({ id, cut1, cut2, start, end, size, ...rest }) => {
+                    return {
+                      ...rest,
+                      id,
+                      start,
+                      end,
+                      length: size,
+                      leftCutter: cut1.restrictionEnzyme.name,
+                      rightCutter: cut2.restrictionEnzyme.name,
+                      leftOverhang: getCutsiteType(cut1.restrictionEnzyme),
+                      rightOverhang: getCutsiteType(cut2.restrictionEnzyme)
+                    };
+                  }
+                )}
+                schema={schema}
+              />
+            }
+          />
+        </Tabs>
+        <br />
+      </div>
+    );
+  }
+}
+const schema = {
+  fields: [
+    { width: 60, path: "start", displayName: "Start", type: "string" },
+    { width: 60, path: "end", displayName: "End", type: "string" },
+    { width: 70, path: "length", displayName: "Length", type: "string" },
+    { path: "leftCutter", displayName: "Left Cutter", type: "string" },
+    { path: "leftOverhang", displayName: "Left Overhang", type: "string" },
+    { path: "rightCutter", displayName: "Right Cutter", type: "string" },
+    { path: "rightOverhang", displayName: "Right Overhang", type: "string" }
+  ]
+};
+
+export default compose(
+  withEditorInteractions,
+  withProps((props) => {
+    const {
+      sequenceData,
+      sequenceLength,
+      selectionLayerUpdate,
+      updateSelectedFragment,
+      digestTool: { computePartialDigest }
+    } = props;
+    const isCircular = sequenceData.circular;
+    const cutsites = sequenceData.cutsites;
+    const computePartialDigestDisabled =
+      cutsites.length > MAX_PARTIAL_DIGEST_CUTSITES;
+    const computeDigestDisabled = cutsites.length > MAX_DIGEST_CUTSITES;
+
+    const { fragments, overlappingEnzymes } = getVirtualDigest({
+      cutsites,
+      sequenceLength,
+      isCircular,
+      computePartialDigest,
+      computePartialDigestDisabled,
+      computeDigestDisabled
+    });
+    return {
+      computePartialDigestDisabled,
+      computeDigestDisabled,
+      lanes: [
+        fragments.map((f) => ({
+          ...f,
+          onFragmentSelect: () => {
+            selectionLayerUpdate({
+              start: f.start,
+              end: f.end,
+              name: f.name
+            });
+            updateSelectedFragment(f.Intentid);
+          }
+        }))
+      ],
+      overlappingEnzymes
+    };
+  })
+)(DigestTool);

package/src/DigestTool/Ladder.css

@@ -0,0 +1,20 @@
+.ve-digest-column {
+  position: relative;
+  width: 90px;
+}
+.ve-digest-header {
+  height: 40px;
+  padding-left: 10px;
+  padding-top: 10px;
+}
+.ve-digest-container {
+  display: flex;
+  width: fit-content;
+}
+.ve-digest-fragment-tooltip {
+  height: 100%;
+  width: 100%;
+}
+.tg-ladder-selector .tg-select-value .bp3-button {
+  display: none;
+}

package/src/DigestTool/Ladder.js

@@ -0,0 +1,303 @@
+/* eslint-disable react/jsx-no-bind */
+import React, { useState } from "react";
+import { showConfirmationDialog, TgSelect } from "@teselagen/ui";
+import html2canvas from "html2canvas";
+
+import "./Ladder.css";
+import { Button, Tooltip } from "@blueprintjs/core";
+import { showDialog } from "../GlobalDialogUtils";
+import { AddLaddersDialog } from "./AddLaddersDialog";
+import { ladderDefaults } from "./ladderDefaults";
+import useLadders from "../utils/useLadders";
+import { map } from "lodash";
+import { filter } from "lodash";
+
+export default function Ladder({
+  // gelDigestEnzymes = [],
+  boxHeight = 550,
+  lanes = [],
+  digestLaneRightClicked,
+  selectedFragment,
+  ladders = ladderDefaults
+}) {
+  const [additionalLadders, setLadders] = useLadders();
+  const laddersToUse = [
+    ...ladders,
+    ...map(additionalLadders, (l, i) => ({
+      ...l,
+      label: (
+        <div
+          key={i}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            width: "100%"
+          }}
+        >
+          {l.label}{" "}
+          <Button
+            onClick={async (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              const confirm = await showConfirmationDialog({
+                text: "Are you sure you want to delete this custom ladder? You cannot undo this action",
+                intent: "danger",
+                confirmButtonText: "Delete",
+                cancelButtonText: "Cancel",
+                canEscapeKeyCancel: true
+              });
+              if (!confirm) {
+                return;
+              }
+              setSelectedLadder(ladders[0].value);
+              setLadders(
+                filter(additionalLadders, (lad) => lad.value !== l.value)
+              );
+            }}
+            intent="danger"
+            small
+            minimal
+            icon="trash"
+          ></Button>
+        </div>
+      )
+    }))
+  ];
+  const [highlightedFragment, setHighlightedFragment] = useState();
+  const [selectedLadder, setSelectedLadder] = useState(ladders[0].value);
+  let ladderInfo;
+  laddersToUse.forEach((ladder) => {
+    if (ladder.value === selectedLadder)
+      ladderInfo = {
+        ...ladder,
+        markings: ladder.markings.sort((a, b) => {
+          return b - a;
+        })
+      };
+  });
+  if (!ladderInfo) {
+    return console.error("Uh oh there needs to be ladder info here!");
+  }
+  const sharedStyle = { color: "white", background: "black" }; //use a shared style to get the copy image to look nice
+  const upperBoundary = ladderInfo.markings[0];
+  return (
+    <div>
+      Ladder:
+      <div style={{ display: "flex" }}>
+        <TgSelect
+          className="tg-ladder-selector"
+          value={selectedLadder}
+          onChange={(val) => setSelectedLadder(val.value)}
+          options={laddersToUse}
+        />
+        <Button
+          onClick={() => {
+            showDialog({
+              ModalComponent: AddLaddersDialog,
+              props: {
+                setSelectedLadder
+              }
+            });
+          }}
+          style={{ minWidth: 150 }}
+          minimal
+          small
+          icon="plus"
+          intent="primary"
+        >
+          Add Ladder
+        </Button>
+      </div>
+      <br />
+      <div
+        className="ve-digest-outer-container"
+        style={{
+          position: "relative",
+          width: "fit-content",
+          ...sharedStyle
+        }}
+      >
+        {navigator.clipboard && window.isSecureContext && (
+          <Button
+            icon="duplicate"
+            minimal
+            style={{ position: "absolute", top: 5, right: 5, color: "white" }}
+            onClick={() => {
+              try {
+                html2canvas(
+                  document.querySelector(".ve-digest-container")
+                ).then((canvas) => {
+                  canvas.toBlob((blob) =>
+                    navigator.clipboard.write([
+                      new window.ClipboardItem({ "image/png": blob })
+                    ])
+                  );
+                  window.toastr.success("Image copied to clipboard!");
+                });
+              } catch (e) {
+                window.toastr.error(
+                  "Error copying the image, try just taking a screenshot instead ;)"
+                );
+              }
+            }}
+          ></Button>
+        )}
+        <div style={{ padding: 3, paddingLeft: 7, width: 290 }}>
+          Highlighted Fragment:{" "}
+          {highlightedFragment ? highlightedFragment.size : "--"}{" "}
+        </div>
+        <div
+          style={{ height: boxHeight, ...sharedStyle }}
+          className="ve-digest-container"
+        >
+          <div
+            style={{ width: 100 }}
+            className="ve-digest-column ve-digest-ladder"
+          >
+            <div className="ve-digest-header"> </div>
+            {ladderInfo.markings.map((val, index) => {
+              return (
+                <div
+                  key={index}
+                  style={{
+                    fontSize: 12,
+                    position: "absolute",
+                    width: "100%",
+                    display: "flex",
+                    alignItems: "center",
+                    color: "white",
+                    bottom: calculateOffset(boxHeight, val, upperBoundary) - 3 //subtract 3 to get the labels to align better
+                  }}
+                >
+                  <span
+                    style={{
+                      color: "white",
+                      paddingLeft: 6,
+                      paddingRight: 4
+                    }}
+                  >
+                    {val}{" "}
+                  </span>
+                  <span style={{ color: "white", paddingRight: 4 }}> bp </span>
+                </div>
+              );
+            })}
+          </div>
+          <div className="ve-digest-column ve-digest-ladder">
+            <div className="ve-digest-header">Ladder </div>
+            {ladderInfo.markings.map((val, index) => {
+              return (
+                <div
+                  key={index}
+                  style={{
+                    fontSize: 12,
+                    position: "absolute",
+                    width: "100%",
+                    display: "flex",
+                    alignItems: "center",
+                    color: "white",
+                    height: "2px",
+                    background: "white",
+                    bottom: calculateOffset(boxHeight, val, upperBoundary)
+                  }}
+                />
+              );
+            })}
+          </div>
+          {lanes.map((fragments, index) => {
+            return (
+              <Lane
+                key={index}
+                {...{
+                  onMouseOver: (fragment) => setHighlightedFragment(fragment),
+                  onMouseOut: () => setHighlightedFragment(undefined),
+                  digestLaneRightClicked,
+                  laneNumber: index + 1,
+                  fragments,
+                  highlightedFragment,
+                  selectedFragment,
+                  boxHeight,
+                  upperBoundary
+                }}
+              />
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Lane({
+  laneNumber,
+  onMouseOver,
+  onMouseOut,
+  digestLaneRightClicked,
+  fragments,
+  highlightedFragment,
+  selectedFragment,
+  boxHeight,
+  upperBoundary
+}) {
+  return (
+    <div
+      style={{ marginLeft: 20, marginRight: 20 }}
+      className="ve-digest-column ve-digest-lane"
+    >
+      <div className="ve-digest-header">Lane {laneNumber} </div>
+      {fragments.map((fragment, index) => {
+        const { size, id, name } = fragment;
+        const isHighlighted =
+          (highlightedFragment && id === highlightedFragment.id) ||
+          (selectedFragment && id === highlightedFragment.id);
+        return (
+          <div
+            key={index}
+            onMouseOver={() => {
+              onMouseOver(fragment);
+            }}
+            onMouseOut={() => {
+              onMouseOut(fragment);
+            }}
+            onClick={() => {
+              fragment.onFragmentSelect();
+            }}
+            onContextMenu={(e) => {
+              fragment.onFragmentSelect();
+              digestLaneRightClicked(e);
+            }}
+            data-test={name}
+            style={{
+              fontSize: 12,
+              position: "absolute",
+              display: "flex",
+              alignItems: "center",
+              color: isHighlighted ? "#fdffdd" : "white",
+              width: "90%",
+              height: isHighlighted ? "3px" : "2px",
+              background: "white",
+              bottom: calculateOffset(boxHeight, size, upperBoundary)
+            }}
+          >
+            <Tooltip
+              className="ve-digest-fragment-tooltip"
+              content={<div>{name}</div>}
+            >
+              <div
+                style={{
+                  width: "100%",
+                  height: isHighlighted ? "3px" : "2px"
+                }}
+              />
+            </Tooltip>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function calculateOffset(boxHeight, size, upperBoundary) {
+  return (boxHeight * Math.log(size)) / Math.log(upperBoundary) - 55;
+}

package/src/DigestTool/createFragmentLines.js

@@ -0,0 +1,120 @@
+// let {getCutsitesFromSequence} = require('@teselagen/sequence-utils');
+// let {assign} = require('lodash');
+
+// module.exports = function createFragmentsLines({input: {geneRuler, enzymes}, state, output}) {
+//     if (geneRuler === "geneRuler1kb") {
+//         geneRuler = [20000, 10000, 7000, 5000, 4000, 3000, 2000, 1500, 1000, 700, 500, 400, 300, 200, 75];
+//     } else {
+//         geneRuler = [3000, 2000, 1500, 1200, 1000, 900, 800, 700, 600, 500, 400, 300, 200, 100];
+//     }
+
+//     let cutsites = state.get('digestCutsites');
+//     if (cutsites.length === 0) {
+//         state.set('fragmentsNum', 0);
+//         state.set('fragments', []);
+//         return;
+//     }
+
+//     let sequenceLength = state.get(['sequenceData', 'sequence']).length;
+//     let circular = state.get(['sequenceData', 'circular']);
+
+//     function sortNumber(a,b) {
+//         if (a.position) {
+//             return a.position - b.position;
+//         }
+//         if (a.segmentLength) {
+//             return a.segmentLength - b.segmentLength;
+//         }
+//     }
+
+//     let cutsitesData = [];
+//     let position;
+//     let cutsite;
+//     for (let i = 0; i < cutsites.length; i++) {
+//         cutsite = Object.assign({}, cutsites[i]);
+//         position = Math.floor((cutsite.end + cutsite.start)/2);
+//         cutsite.position = position;
+//         cutsitesData.push(cutsite);
+//     }
+
+//     // circular or linear
+//     cutsitesData = cutsitesData.sort(sortNumber);
+//     if (circular) {
+//         var lines = [ // if circular, fragment wraps around origin
+//             {
+//                 segmentLength: sequenceLength - cutsitesData[cutsitesData.length-1].start + cutsitesData[0].end,
+//                 enzyme1: cutsitesData[cutsitesData.length-1].start + '('+cutsitesData[cutsitesData.length-1].name+')',
+//                 enzyme2: cutsitesData[0].end + '('+cutsitesData[0].name+')'
+//             }
+//         ];
+//     } else {
+//         var lines = [ // if not ciruclar, need to split into two seperate fragments
+//             {
+//                 segmentLength: sequenceLength - cutsitesData[cutsitesData.length-1].start,
+//                 enzyme1: cutsitesData[cutsitesData.length-1].start + '('+cutsitesData[cutsitesData.length-1].name+')',
+//                 enzyme2: sequenceLength
+//             },
+//             {
+//                 segmentLength: cutsitesData[0].end,
+//                 enzyme1: 0,
+//                 enzyme2: cutsitesData[0].end + '('+cutsitesData[0].name+')'
+//             }
+//         ];
+//     }
+
+//     // get fragments
+//     for (let i=0; i<cutsitesData.length-1; i++) {
+//         lines.push({
+//             segmentLength: Math.abs(cutsitesData[i+1].end - cutsitesData[i].start),
+//             enzyme1: cutsitesData[i].start + ' ('+cutsitesData[i].name+')',
+//             enzyme2: cutsitesData[i+1].end + ' ('+cutsitesData[i+1].name+')'
+//         });
+//     }
+
+//     lines = lines.sort(sortNumber).reverse();
+
+//     let fragmentsNum = 0; // counter for number of fragments
+//     let lineWidth = 1;
+//     let boxHeight = 275;
+//     let upperBoundary = lines[0].segmentLength > geneRuler[0] ? lines[0].segmentLength : geneRuler[0];
+//     let fragments = [];
+
+//     // position fragments on the ladder
+//     for (let iLeft = 0, iRight = 0; ; ) {
+//         if (iLeft == geneRuler.length && iRight === lines.length) {
+//             break;
+
+//         } else if (iRight == lines.length || geneRuler[iLeft] >= lines[iRight].segmentLength) {
+//             fragments.push({
+//                 align: "left",
+//                 bottom: (boxHeight * Math.log(geneRuler[iLeft]) / Math.log(upperBoundary)) - 25,
+//                 left: 15,
+//                 width: '25%',
+//                 borderWidth: 1,
+//                 position: geneRuler[iLeft],
+//                 tooltip: geneRuler[iLeft]
+//             });
+//             iLeft++;
+
+//         } else if (iLeft == geneRuler.length || geneRuler[iLeft] < lines[iRight].segmentLength) {
+//             fragments.push({
+//                 align: "right",
+//                 bottom: (boxHeight * Math.log(lines[iRight].segmentLength) / Math.log(upperBoundary)) - 25,
+//                 left: 75,
+//                 width: '75%',
+//                 borderWidth: lineWidth,
+//                 position: lines[iRight].segmentLength,
+//                 tooltip: lines[iRight].segmentLength + ' : ' + lines[iRight].enzyme1 + ' .. ' + lines[iRight].enzyme2
+//             });
+//             fragmentsNum++;
+//             iRight++;
+
+//         } else {
+//             console.warn("error getting digest fragments");
+//             break;
+//         }
+//     }
+
+//     state.set('fragmentsNum', fragmentsNum);
+//     state.set('fragments', fragments);
+// };

package/src/DigestTool/ladderDefaults.js

@@ -0,0 +1,26 @@
+export const ladderDefaults = [
+  {
+    value: "geneRuler1KB",
+    label: "GeneRuler 1kb + DNA 75-20,000 bp",
+    markings: [
+      20000, 10000, 7000, 5000, 4000, 3000, 2000, 1500, 1000, 700, 500, 400,
+      300, 200, 75
+    ]
+  },
+  {
+    value: "geneRuler100BP",
+    label: "GeneRuler 100bp + DNA 100-3000 bp",
+    markings: [
+      3000, 2000, 1500, 1200, 1000, 900, 800, 700, 600, 500, 400, 300, 200,
+      100
+    ]
+  },
+  {
+    value: "invitrogen1KbPlus",
+    label: "Invitrogen 1kb + DNA 100-15,000 bp",
+    markings: [
+      15000, 10000, 8000, 7000, 6000, 5000, 4000, 3000, 2000, 1500, 1000, 850,
+      650, 500, 400, 300, 200, 100
+    ]
+  }
+];