@teselagen/ove 0.0.14 → 0.0.15

package/src/CutsiteFilter/index.js

@@ -0,0 +1,408 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import { connect } from "react-redux";
+import { compose } from "redux";
+import { Button, Icon, Tag, Tooltip } from "@blueprintjs/core";
+import withEditorProps from "../withEditorProps";
+import specialCutsiteFilterOptions from "../constants/specialCutsiteFilterOptions";
+import React, { useState } from "react";
+import "./style.css";
+import { popoverOverflowModifiers, TgSelect } from "@teselagen/ui";
+
+import { map, flatMap, includes, pickBy, isEmpty, noop } from "lodash";
+import { omit } from "lodash";
+import { showDialog } from "../GlobalDialogUtils";
+import {
+  addCutsiteGroupClickHandler,
+  CutsiteTag,
+  getCutsiteWithNumCuts,
+  getUserGroupLabel
+} from "./AdditionalCutsiteInfoDialog";
+import { withRestrictionEnzymes } from "./withRestrictionEnzymes";
+import {
+  aliasedEnzymesByName,
+  cutSequenceByRestrictionEnzyme,
+  defaultEnzymesByName
+} from "@teselagen/sequence-utils";
+
+const NoResults = withRestrictionEnzymes((props) => {
+  const {
+    inputSequenceToTestAgainst,
+    cutsitesByName,
+    cutsitesByNameActive,
+    closeDropDown,
+    allRestrictionEnzymes,
+    queryString = "",
+    onHiddenEnzymeAdd,
+    manageEnzymesLink
+  } = props;
+  const enzymesByNameThatMatch = pickBy(allRestrictionEnzymes, function (v, k) {
+    if (cutsitesByName[k]) {
+      return false;
+    }
+    return includes(k.toLowerCase(), queryString.toLowerCase());
+  });
+  if (!isEmpty(enzymesByNameThatMatch)) {
+    return (
+      <div>
+        No Active Results.. These inactive enzymes match:
+        <br></br>
+        <div style={{ display: "flex" }}>
+          {flatMap(enzymesByNameThatMatch, (e, i) => {
+            if (i > 3) return [];
+            return (
+              <CutsiteTag
+                onWrapperClick={closeDropDown}
+                allRestrictionEnzymes={allRestrictionEnzymes}
+                forceOpenCutsiteInfo
+                name={e.name}
+                cutsitesByName={cutsitesByName}
+                cutsitesByNameActive={cutsitesByName}
+                key={i}
+              ></CutsiteTag>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+  const hiddenEnzymesByNameThatMatch = pickBy(
+    aliasedEnzymesByName,
+    function (v, k) {
+      if (cutsitesByName[k]) {
+        return false;
+      }
+      return includes(k.toLowerCase(), queryString.toLowerCase());
+    }
+  );
+  if (!isEmpty(hiddenEnzymesByNameThatMatch)) {
+    return (
+      <div>
+        {onHiddenEnzymeAdd
+          ? `These Hidden enzymes match, ${
+              map(hiddenEnzymesByNameThatMatch).length > 1
+                ? `click one`
+                : "click it"
+            } to add it to your enzyme library`
+          : `These Hidden enzymes match, add them via the Manage Enzymes link`}
+        <br></br>
+        <div style={{ display: "flex" }}>
+          {flatMap(hiddenEnzymesByNameThatMatch, (e, i) => {
+            const res = cutSequenceByRestrictionEnzyme(
+              inputSequenceToTestAgainst,
+              true,
+              e
+            );
+            if (i > 3) return [];
+            return (
+              <CutsiteTag
+                onWrapperClick={
+                  onHiddenEnzymeAdd
+                    ? () => {
+                        onHiddenEnzymeAdd(e, props);
+                      }
+                    : closeDropDown
+                }
+                allRestrictionEnzymes={allRestrictionEnzymes}
+                forceOpenCutsiteInfo={!onHiddenEnzymeAdd}
+                name={e.name}
+                cutsitesByName={{
+                  ...cutsitesByName,
+                  [e.name.toLowerCase()]: res
+                }}
+                cutsitesByNameActive={cutsitesByNameActive}
+                key={i}
+              ></CutsiteTag>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="noResultsTextPlusButton">
+      No results... Add enzymes to your list via the {manageEnzymesLink} link{" "}
+    </div>
+  );
+});
+
+export function CutsiteFilter(props) {
+  const {
+    onChangeHook,
+    style = {},
+    filteredRestrictionEnzymes,
+    isEnzymeFilterAndUpdate,
+    filteredRestrictionEnzymesUpdate: _filteredRestrictionEnzymesUpdate,
+    allCutsites: { cutsitesByName },
+    allCutsites,
+    filteredCutsites,
+    onHiddenEnzymeAdd,
+    closeDropDown = noop,
+    manageEnzymesToLeft,
+    enzymeManageOverride,
+    enzymeGroupsOverride,
+    editorName,
+    additionalEnzymes,
+    isEnzymeFilterAnd,
+    sequenceData
+  } = props;
+  // const [isEnzymeFilterAnd, setAnd] = tgUseLocalStorageState("isEnzymeFilterAnd", false);
+  const showAndOr =
+    filteredCutsites.cutsiteIntersectionCount > 0 &&
+    filteredRestrictionEnzymes.length > 1;
+  const [queryTracker, setQueryTracker] = useState("");
+
+  const renderOptions = ({ label, value, canBeHidden }, props) => {
+    const { filteredRestrictionEnzymes, filteredRestrictionEnzymesUpdate } =
+      props;
+
+    return (
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          width: "100%"
+        }}
+      >
+        {label}{" "}
+        {canBeHidden && (
+          <Icon
+            onClick={(e) => {
+              e.stopPropagation();
+
+              filteredRestrictionEnzymesUpdate(
+                flatMap(filteredRestrictionEnzymes, (e) => {
+                  if (e.value === value) return [];
+                  return e;
+                }).concat({
+                  label,
+                  className: "veHiddenEnzyme",
+                  value,
+                  // hiddenEnzyme: true,
+                  isHidden: true,
+                  canBeHidden
+                })
+              );
+            }}
+            htmlTitle="Hide this enzyme"
+            className="veHideEnzymeBtn"
+            style={{ paddingTop: 5 }}
+            iconSize={14}
+            icon="eye-off"
+          ></Icon>
+        )}
+      </div>
+    );
+  };
+  const filteredRestrictionEnzymesUpdate = (enzymes) => {
+    _filteredRestrictionEnzymesUpdate(enzymes);
+    if (sequenceData?.id) {
+      try {
+        window.localStorage.setItem(
+          `tgInitialCutsiteFilter-${sequenceData.id}`,
+          JSON.stringify(
+            enzymes.map((e) => omit(e, "canBeHidden", "nameArray", "label"))
+          )
+        );
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.warn(`err 872g4e setting enzymes for sequence:`, err);
+      }
+    }
+  };
+  const userEnzymeGroups =
+    enzymeGroupsOverride || window.getExistingEnzymeGroups();
+  const options = [
+    ...map(specialCutsiteFilterOptions, (opt) => opt),
+    ...map(userEnzymeGroups, (nameArray, name) => {
+      return {
+        label: getUserGroupLabel({ nameArray, name }),
+        value: "__userCreatedGroup" + name,
+        nameArray
+      };
+    }),
+
+    ...Object.keys(cutsitesByName)
+      .sort()
+      .map(function (key) {
+        const numCuts = (cutsitesByName[key] || []).length;
+        const label = getCutsiteWithNumCuts({
+          numCuts,
+          name: numCuts ? cutsitesByName[key][0].name : key
+        });
+        return {
+          canBeHidden: true,
+          label,
+          value: key
+        };
+      })
+  ].map((n) => addClickableLabel(n, { closeDropDown }));
+
+  const value = filteredRestrictionEnzymes.map((filteredOpt) => {
+    let toRet;
+    if (filteredOpt.cutsThisManyTimes || filteredOpt.isSpecialGroup) {
+      toRet = filteredOpt;
+    } else if (filteredOpt.value.includes("__userCreatedGroup")) {
+      toRet = filteredOpt;
+    } else {
+      const numCuts = (cutsitesByName[filteredOpt.value] || []).length;
+      const label = getCutsiteWithNumCuts({
+        numCuts,
+        name: numCuts
+          ? cutsitesByName[filteredOpt.value][0].name
+          : defaultEnzymesByName[filteredOpt.value]?.name || filteredOpt.value
+      });
+      toRet = {
+        ...filteredOpt,
+        label
+      };
+    }
+    return addClickableLabel(toRet, { closeDropDown });
+  });
+  const numEnzymesInAnd = filteredCutsites.cutsiteIntersectionCount;
+  const numEnzymesInOr = filteredCutsites.cutsiteTotalCount;
+  const numGroups = filteredRestrictionEnzymes.length;
+  const onManageClick = () => {
+    enzymeManageOverride
+      ? enzymeManageOverride(props)
+      : showDialog({
+          dialogType: "EnzymesDialog"
+          // inputSequenceToTestAgainst: sequenceData ? sequenceData.sequence : ""
+        });
+    closeDropDown();
+  };
+  const manageEnzymesLink = (
+    <a onClick={onManageClick} style={{ width: "fit-content", fontSize: 11 }}>
+      Manage Enzymes
+    </a>
+  );
+
+  return (
+    <>
+      {manageEnzymesToLeft && (
+        <Button
+          minimal
+          data-tip="Manage Enzymes"
+          onClick={onManageClick}
+          icon="cog"
+        ></Button>
+      )}
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          flexWrap: "wrap",
+          ...style
+        }}
+      >
+        <TgSelect
+          additionalRightEl={
+            showAndOr ? (
+              <Tooltip
+                modifiers={popoverOverflowModifiers}
+                content={
+                  isEnzymeFilterAnd
+                    ? `AND -- Viewing ${numEnzymesInAnd} enzymes that are shared by ${
+                        numGroups === 2
+                          ? "both groups"
+                          : `all ${numGroups} groups`
+                      }`
+                    : `OR -- Viewing ${numEnzymesInOr} enzymes that are in any of the ${numGroups} groups`
+                }
+              >
+                <Tag
+                  minimal
+                  interactive
+                  style={{ display: "flex", marginTop: 5 }}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    isEnzymeFilterAndUpdate(!isEnzymeFilterAnd);
+                  }}
+                >
+                  <span
+                    style={{
+                      color: isEnzymeFilterAnd ? "#ce5bce" : "darkgray"
+                    }}
+                  >
+                    AND
+                  </span>
+                  /
+                  <span
+                    style={{
+                      color: !isEnzymeFilterAnd ? "#ce5bce" : "darkgray"
+                    }}
+                  >
+                    OR
+                  </span>
+                </Tag>
+              </Tooltip>
+            ) : (
+              false
+            )
+          }
+          multi
+          allowCreate
+          wrapperStyle={{ zIndex: 11 }}
+          noResultsText={
+            <NoResults
+              {...{
+                inputSequenceToTestAgainst: sequenceData.sequence,
+                manageEnzymesLink,
+                closeDropDown,
+                onHiddenEnzymeAdd,
+                queryString: queryTracker,
+                additionalEnzymes,
+                enzymeGroupsOverride,
+                cutsitesByNameActive: filteredCutsites.cutsitesByName,
+                cutsitesByName: allCutsites.cutsitesByName,
+                editorName
+              }}
+            ></NoResults>
+          }
+          onInputChange={(queryTracker) => {
+            setQueryTracker(queryTracker);
+          }}
+          placeholder="Filter cut sites..."
+          options={options}
+          filteredRestrictionEnzymes={filteredRestrictionEnzymes}
+          filteredRestrictionEnzymesUpdate={filteredRestrictionEnzymesUpdate}
+          optionRenderer={renderOptions}
+          isSimpleSearch
+          onChange={(filteredRestrictionEnzymes) => {
+            onChangeHook && onChangeHook(filteredRestrictionEnzymes);
+            filteredRestrictionEnzymesUpdate(
+              map(filteredRestrictionEnzymes, (r) => {
+                return omit(r, ["label"]);
+              })
+            );
+            // setShowFilterEnzymes(showAndOr);
+          }}
+          value={value}
+        />
+        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+        {!manageEnzymesToLeft && (
+          <div style={{ display: "flex", justifyContent: "space-between" }}>
+            {manageEnzymesLink}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
+export default compose(withEditorProps, connect())(CutsiteFilter);
+
+function addClickableLabel(toRet, { closeDropDown }) {
+  return {
+    ...toRet,
+    ...(toRet.label
+      ? {
+          label: addCutsiteGroupClickHandler({
+            closeDropDown,
+            cutsiteOrGroupKey: toRet.value,
+            el: toRet.label
+          })
+        }
+      : {})
+  };
+}

package/src/CutsiteFilter/style.css

@@ -0,0 +1,23 @@
+.ta_link {
+  cursor: pointer;
+  color: blue;
+}
+
+.ta_link:hover {
+  color: lightblue;
+}
+.veHideEnzymeBtn {
+  opacity: 0.3;
+}
+.veHideEnzymeBtn:hover {
+  opacity: 1;
+}
+.veHiddenEnzyme {
+  background-color: #b83211 !important;
+  color: #f5f8fa !important;
+}
+
+.veToolbarCutsiteFilterHolder .tg-select {
+  overflow: auto;
+  max-height: 50vh;
+}

package/src/CutsiteFilter/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
+    };
+  }
+);

package/src/DigestTool/AddLaddersDialog.js

@@ -0,0 +1,82 @@
+import { FileUploadField, wrapDialog } from "@teselagen/ui";
+import React from "react";
+import { compose } from "recompose";
+import { reduxForm } from "redux-form";
+import useLadders from "../utils/useLadders";
+import { MenuItem } from "@blueprintjs/core";
+import downloadjs from "downloadjs";
+import { isArray } from "lodash";
+import { hideDialog } from "../GlobalDialogUtils";
+
+export const AddLaddersDialog = compose(
+  wrapDialog({ title: "Add Ladder" }),
+  reduxForm({ form: "AddLaddersDialog" })
+)(function AddLaddersDialog({ setSelectedLadder }) {
+  const [additionalLadders, setLadders] = useLadders();
+  return (
+    <div className="bp3-dialog-body">
+      <FileUploadField
+        fileLimit={1}
+        threeDotMenuItems={
+          <MenuItem
+            text="Download Example File"
+            onClick={() => {
+              downloadjs(
+                `{
+  "value": "exampleRuler",
+  "label": "Example Ladder 2Kb",
+  "markings": [
+    40000, 20000, 8000, 3000, 1500, 900, 440, 333,
+    222, 17
+  ]
+}
+`,
+                `exampleLadderFile.json`,
+                "text/plain"
+              );
+            }}
+          />
+        }
+        name="ladderUpload"
+        innerText="Upload a new ladder .json file"
+        accept={[".json"]}
+        readBeforeUpload
+        style={{ maxWidth: 400 }}
+        beforeUpload={async (files) => {
+          try {
+            const newLadder = JSON.parse(files[0].parsedString);
+            if (!newLadder) {
+              throw new Error(
+                "No new ladder found. Use the example file for the proper JSON format"
+              );
+            }
+            if (typeof newLadder.value !== "string") {
+              throw new Error(
+                "Incorrect value. Use the example file for the proper JSON format"
+              );
+            }
+            if (typeof newLadder.label !== "string") {
+              throw new Error(
+                "Incorrect label. Use the example file for the proper JSON format"
+              );
+            }
+            if (!isArray(newLadder.markings)) {
+              throw new Error(
+                "Incorrect markings. Use the example file for the proper JSON format"
+              );
+            }
+            setLadders([...additionalLadders, newLadder]);
+            window.toastr.success(`Added New Ladder ${newLadder.label}`);
+            setSelectedLadder(newLadder.value);
+          } catch (e) {
+            console.error(`e:`, e);
+            window.toastr.error(
+              "Something went wrong with the file upload. Check the dev console for more details. Use the example file for the proper JSON format"
+            );
+          }
+          hideDialog();
+        }}
+      />
+    </div>
+  );
+});