@teselagen/ove 0.0.14 → 0.0.16

package/src/AlignmentView/isTargetWithinEl.js

@@ -0,0 +1,6 @@
+// function Ident({ children }) {
+//   return children;
+// }
+export function isTargetWithinEl(event, selector) {
+  return event.target.closest(selector);
+}

package/src/AlignmentView/style.css

@@ -0,0 +1,100 @@
+.ove-slider .bp3-slider {
+  min-width: 10px !important;
+  margin-bottom: 4px;
+}
+.alignmentViewTrackContainer:hover .alignmentViewSelectTrackPopover {
+  opacity: 0.9 !important;
+}
+.alignmentViewTrackContainer {
+  position: relative;
+}
+.alignmentViewTrackContainer,
+.alignmentViewTrackContainer .veVectorInteractionWrapper,
+.alignmentViewTrackContainer .veVectorInteractionWrapper > div {
+  width: stretch;
+  width: fit-content;
+}
+
+.alignmentViewTrackContainer .veLinearView .veRowItemWrapper {
+  display: block;
+}
+
+.alignmentHolder::-webkit-scrollbar {
+  display: none;
+}
+.alignmentHolder {
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  scrollbar-width: none; /* Firefox */
+}
+
+.alignmentTrackName {
+  background: white;
+}
+.alignmentTrackName {
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  scrollbar-width: none; /* Firefox */
+}
+.alignmentTrackName::-webkit-scrollbar {
+  display: none; /* Safari and Chrome */
+}
+.alignmentMinimapTracks {
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  scrollbar-width: none; /* Firefox */
+}
+.alignmentMinimapTracks::-webkit-scrollbar {
+  display: none; /* Safari and Chrome */
+}
+.bp3-dark .alignmentTrackName {
+  background: #30404d;
+}
+/* .alignmentViewTrackContainer:hover .alignmentTrackNameDiv {
+  opacity: 1 !important;
+} */
+.ve-alignment-top-bar > * {
+  overflow-wrap: normal;
+  flex: 0 0 auto;
+  max-width: 100%;
+  margin-left: 4px;
+  margin-right: 4px;
+}
+
+.veAlignmentSelectionLayer {
+  top: 0;
+  height: 100% !important;
+  overflow: hidden;
+}
+.alignmentView .veSelectionLayer {
+  top: 0;
+}
+
+.veTracksAndAlignmentHolder {
+  position: relative;
+  width: fit-content;
+  height: fit-content;
+}
+/* .isTrackDragging.veTracksAndAlignmentHolder {
+  transform: none !important;
+} */
+.veTracksAndAlignmentHolder {
+  transform: none !important;
+}
+.alignmentMinimapTracks {
+  background: #8a9ba8;
+}
+.minimapLane.lane-hovered .miniBluePath {
+  fill: rgb(169, 169, 245) !important;
+}
+
+.veAlignmentName {
+  padding-top: 1px;
+  padding-bottom: 1px;
+  margin-top: 2px;
+  margin-bottom: 5px;
+  margin-left: 3px;
+  font-weight: bold;
+  font-size: 14px;
+  max-width: 300px;
+  /* overflow: hidden; */
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/AlignmentView/updateTrackHelper.js

@@ -0,0 +1,58 @@
+import { insertItem, removeItem } from "../utils/arrayUtils";
+
+export function updateTrackHelper({
+  currentPairwiseAlignmentIndex,
+  pairwiseAlignments,
+  upsertAlignmentRun,
+  hasBeenTrimmed,
+  alignmentId,
+  alignmentTracks,
+  alignmentTrackIndex,
+  update
+}) {
+  const updateATs = (atsToUse, alignmentTrackIndex) => {
+    const removed = removeItem(atsToUse, alignmentTrackIndex);
+    return insertItem(
+      removed,
+      {
+        ...atsToUse[alignmentTrackIndex],
+        alignmentData: {
+          ...atsToUse[alignmentTrackIndex].alignmentData,
+          ...update
+        },
+        sequenceData: {
+          ...atsToUse[alignmentTrackIndex].sequenceData,
+          ...update
+        }
+      },
+      alignmentTrackIndex
+    );
+  };
+
+  upsertAlignmentRun({
+    id: alignmentId,
+    hasBeenTrimmed,
+    ...(pairwiseAlignments
+      ? {
+          pairwiseAlignments: pairwiseAlignments.map((ats, i) => {
+            if (alignmentTrackIndex === 0) {
+              return updateATs(ats, 0);
+            }
+            if (
+              currentPairwiseAlignmentIndex !== undefined
+                ? currentPairwiseAlignmentIndex === i
+                : alignmentTrackIndex - 1 === i
+            ) {
+              return updateATs(ats, 1);
+            }
+            return ats;
+          })
+        }
+      : {
+          alignmentTracks: updateATs(
+            alignmentTracks,
+            Number(alignmentTrackIndex)
+          )
+        })
+  });
+}

package/src/AutoAnnotate.js

@@ -0,0 +1,500 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable jsx-a11y/anchor-has-content */
+/* eslint-disable no-throw-literal */
+import { unparse } from "papaparse";
+import pluralize from "pluralize";
+import  { SubmissionError, reduxForm,  } from "redux-form";
+import shortid from "shortid";
+import CreateAnnotationsPage from "./CreateAnnotationsPage";
+import { formName } from "./constants";
+import { AutoAnnotateBpMatchingDialog } from "./AutoAnnotateBpMatchingDialog";
+import {
+  parseCsvFile,
+  validateCSVRequiredHeaders,
+  validateCSVRow,
+} from "./fileUtils";
+import downloadjs from "downloadjs";
+import {
+  autoAnnotate,
+  convertApELikeRegexToRegex,
+  convertProteinSeqToDNAIupac,
+  getFeatureToColorMap,
+  getFeatureTypes,
+} from "@teselagen/sequence-utils";
+import { hideDialog, showDialog } from "./GlobalDialogUtils";
+import { compose } from "redux";
+import {
+  DataTable,
+  DialogFooter,
+  FileUploadField,
+  InfoHelper,
+  showConfirmationDialog,
+  wrapDialog,
+} from "@teselagen/ui";
+import { startCase } from "lodash";
+import withEditorProps from "./withEditorProps";
+import { useEffect, useState } from "react";
+import { Colors, Tab, Tabs } from "@blueprintjs/core";
+import { typeField } from "./helperComponents/PropertiesDialog/typeField";
+
+export function autoAnnotateFeatures() {
+  showDialog({
+    ModalComponent: AutoAnnotateModal, //we want to use a ModalComponent here so our addon does not
+    props: {
+      annotationType: "feature",
+    },
+  });
+}
+export function autoAnnotateParts() {
+  showDialog({
+    ModalComponent: AutoAnnotateModal, //we want to use a ModalComponent here so our addon does not
+    props: {
+      annotationType: "part",
+    },
+  });
+}
+export function autoAnnotatePrimers() {
+  showDialog({
+    ModalComponent: AutoAnnotateModal, //we want to use a ModalComponent here so our addon does not
+    props: {
+      annotationType: "primer",
+    },
+  });
+}
+
+export const AutoAnnotateModal = compose(
+  wrapDialog((p) => ({
+    canEscapeKeyClose: false,
+    title: `Auto Annotate ${startCase(pluralize(p.annotationType))}`,
+  })),
+  withEditorProps,
+  reduxForm({ form: formName })
+)((props) => {
+  const {
+    sequenceData,
+    handleSubmit,
+    annotationType = "feature",
+    error,
+    getCustomAutoAnnotateList,
+  } = props;
+  const [fileType, setSelectedImportType] = useState("csvFile");
+  const [newAnnotations, setNewAnns] = useState(false);
+  const [customAnnResponse, setCustomAnnResponse] = useState();
+  const [loadingCustomAnnList, setLoadingCustomAnnList] = useState();
+  useEffect(() => {
+    (async () => {
+      if (getCustomAutoAnnotateList) {
+        setLoadingCustomAnnList(true);
+        try {
+          const anns = await getCustomAutoAnnotateList(props);
+          setCustomAnnResponse(anns);
+        } catch (e) {
+          window.toastr.warning("Error loading custom annotation list");
+          console.error(`e:`, e);
+        } finally {
+          setLoadingCustomAnnList(false);
+        }
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  if (newAnnotations) {
+    return (
+      <CreateAnnotationsPage
+        {...props}
+        newAnnotations={newAnnotations}
+      ></CreateAnnotationsPage>
+    );
+  }
+  return (
+    <div className="bp3-dialog-body">
+      <Tabs
+        renderActiveTabPanelOnly
+        onChange={setSelectedImportType}
+        selectedTabId={fileType}
+      >
+        <Tab
+          panel={
+            <div>
+              <div>
+                Select a CSV file (
+                <a
+                  onClick={() => {
+                    const rows = [
+                      {
+                        name: `Example ${startCase(annotationType)} 1`,
+                        description: "I'm a description",
+                        sequence: `gatNNtacaggttt`,
+                        ...(annotationType === "feature" && {
+                          type: `cds`,
+                        }),
+                        isRegex: false,
+                        matchType: "dna",
+                      },
+                      {
+                        name: `Example Protein ${startCase(annotationType)}`,
+                        description: "I'm a description",
+                        sequence: `APGSGTGGGSGSAPG`,
+                        ...(annotationType === "feature" && {
+                          type: `cds`,
+                        }),
+                        isRegex: false,
+                        matchType: "protein",
+                      },
+                      {
+                        name: `Example ${startCase(annotationType)} 2`,
+                        description: "I'm another description",
+                        sequence: `gat.*tacccc.*aggttt`,
+                        ...(annotationType === "feature" && {
+                          type: `cds`,
+                        }),
+                        isRegex: true,
+                        matchType: "dna",
+                      },
+                    ];
+                    const csv = unparse(rows);
+                    // const blob = new Blob([convert(sequenceData)], { type: "text/plain" });
+                    // const filename = `${sequenceData.name || "Untitled_Sequence"}.${fileExt}`;
+                    // FileSaver.saveAs(blob, filename);
+                    downloadjs(
+                      csv,
+                      `Example CSV Annotation Upload File.csv`,
+                      "text/plain"
+                    );
+                  }}
+                >
+                  download example
+                </a>
+                ) with the following columns:<br></br>
+                <br></br>
+                <div style={{ display: "flex" }}>
+                  name,description,sequence,type,
+                  <span style={{ display: "flex" }}>
+                    isRegex &nbsp;
+                    <InfoHelper
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        showDialog({
+                          ModalComponent: AutoAnnotateBpMatchingDialog,
+                        });
+                      }}
+                      content={
+                        <span>
+                          Any valid regexes allowed. Click for more info about
+                          regex matching
+                        </span>
+                      }
+                    ></InfoHelper>
+                  </span>
+                  ,matchType
+                </div>
+                <br></br>
+                {annotationType !== "feature" && (
+                  <>
+                    <i>Note: the "type" column is optional</i>
+                    <br></br>
+                  </>
+                )}
+              </div>
+              <FileUploadField
+                validateAgainstSchema={validateAgainstSchema}
+                name="csvFile"
+                fileLimit={1}
+                isRequired
+                accept=".csv"
+              ></FileUploadField>
+            </div>
+          }
+          id="csvFile"
+          title="CSV"
+        ></Tab>
+        <Tab
+          panel={
+            <div>
+              <div>
+                Select an ApE style features .txt file (
+                <a
+                  onClick={() => {
+                    downloadjs(
+                      `T3	ATTAACCCTCACTAAAGGGA	primer_bind	cyan	green	0	0
+M13-fwd	TGTAAAACGACGGCCAGT	primer_bind	cyan	green	0	0
+FRT	GAAGTTCCTATTCTCTAGAAAGTATAGGAACTTC	misc_recomb	orchid	pink	0	0`,
+                      `Example APE Feature List Upload File.txt`,
+                      "text/plain"
+                    );
+                  }}
+                >
+                  download example
+                </a>
+                ):
+              </div>
+              <FileUploadField
+                fileLimit={1}
+                name="apeFile"
+                isRequired
+                accept=".txt"
+              ></FileUploadField>
+              {error && (
+                <div style={{ padding: 5, color: Colors.RED1 }}>{error}</div>
+              )}
+            </div>
+          }
+          id="apeFile"
+          title="ApE File"
+        ></Tab>
+        {getCustomAutoAnnotateList &&
+          (loadingCustomAnnList ? (
+            <Tab disabled title="Loading..."></Tab>
+          ) : (
+            customAnnResponse &&
+            customAnnResponse.list && (
+              <Tab
+                id="implementerDefined"
+                title={customAnnResponse.title || "Custom List"}
+                panel={
+                  customAnnResponse.list.length ? (
+                    <div>
+                      <DataTable
+                        isInfinite
+                        schema={
+                          annotationType === "feature"
+                            ? customAnnsSchema
+                            : customAnnsSchemaNoType
+                        }
+                        entities={customAnnResponse.list}
+                      ></DataTable>
+                    </div>
+                  ) : (
+                    <div>No Annotations Found</div>
+                  )
+                }
+              ></Tab>
+            )
+          ))}
+      </Tabs>
+      <DialogFooter
+        hideModal={hideDialog}
+        disabled={
+          fileType === "implementerDefined" &&
+          !(
+            customAnnResponse &&
+            customAnnResponse.list &&
+            customAnnResponse.list.length
+          )
+        }
+        onClick={handleSubmit(async ({ apeFile, csvFile }) => {
+          let convertNonStandardTypes = false;
+          const annsToCheck = [];
+          try {
+            const validateRow = async (row, rowName) => {
+              const { type = "", sequence } = row;
+              let regexConvertedSeq;
+
+              if (annotationType === "feature") {
+                const cleanedType = getFeatureTypes().find(
+                  (t) => t.toLowerCase() === type.toLowerCase()
+                );
+                if (!cleanedType) {
+                  if (!convertNonStandardTypes) {
+                    convertNonStandardTypes = await showConfirmationDialog({
+                      cancelButtonText: "Stop Auto-Annotate",
+                      text: `Detected that ${rowName} has a non-standard type of ${type}. We will assign it and all subsequent non-standard types to use the misc_feature type instead`,
+                    });
+                    if (!convertNonStandardTypes) {
+                      throw {
+                        validationError: `${rowName} specifies the feature type ${type} which is not valid`,
+                      };
+                    }
+                  }
+                  row.type = "misc_feature";
+                } else {
+                  row.type = cleanedType;
+                }
+              }
+              if (!sequence) {
+                throw {
+                  validationError: `${rowName} did not have a sequence`,
+                };
+              }
+              if (row.isRegex && row.isRegex.toUpperCase() === "TRUE") {
+                try {
+                  new RegExp(regexConvertedSeq); //just trying out whether the regexConvertedSeq will work as a valid regex
+                } catch (error) {
+                  throw {
+                    validationError: `${rowName} has an invalid sequence/regex. Please fix it manually.`,
+                  };
+                }
+                row.isRegex = true;
+              } else {
+                row.isRegex = undefined;
+              }
+              annsToCheck.push(row);
+            };
+            if (fileType === "implementerDefined") {
+              for (const [
+                // eslint-disable-next-line no-unused-vars
+                i,
+                // eslint-disable-next-line no-unused-vars
+                { name, sequence, matchType, type, isRegex },
+              ] of customAnnResponse.list.entries()) {
+                await validateRow(
+                  {
+                    name,
+                    sequence,
+                    matchType,
+                    type,
+                    isRegex: isRegex ? "TRUE" : "FALSE",
+                  },
+                  `Row ${i + 1} (${name})`
+                );
+              }
+            } else if (fileType === "csvFile") {
+              const csvHeaders = ["name", "description", "sequence"];
+              if (annotationType === "feature") {
+                csvHeaders.push("type");
+              }
+              csvHeaders.push("isRegex");
+              const {
+                data,
+                meta: { fields },
+              } = await parseCsvFile(csvFile[0]);
+              const error = validateCSVRequiredHeaders(fields, csvHeaders);
+              if (error) {
+                throw {
+                  validationError: error,
+                };
+              }
+
+              // eslint-disable-next-line no-unused-vars
+              for (const [index, row] of data.entries()) {
+                const error = validateCSVRow(row, csvHeaders, index);
+                if (error) {
+                  throw {
+                    validationError: error,
+                  };
+                }
+                await validateRow(row, `Row ${index + 1} (${row.name})`);
+              }
+            } else if (fileType === "apeFile") {
+              const { data } = await parseCsvFile(apeFile[0], {
+                header: false,
+              });
+              // eslint-disable-next-line no-unused-vars
+              for (const [i, [name, sequence, type]] of data.entries()) {
+                await validateRow(
+                  { name, sequence, type },
+                  `Row ${i + 1} (${name})`
+                );
+              }
+            } else {
+              console.info(`we shouldn't be here!`);
+              console.info(`fileType:`, fileType);
+            }
+
+            if (!annsToCheck.length) {
+              return window.toastr.warning(
+                "No Annotations Detected on File. Please check that your file is in the correct format."
+              );
+            }
+            const annotationsToCheckById = {};
+            annsToCheck.forEach((ann) => {
+              if (ann.matchType === "protein") {
+                ann.sequence = convertProteinSeqToDNAIupac(ann.sequence);
+              }
+              const id = shortid();
+              annotationsToCheckById[id] = {
+                ...ann,
+                sequence: ann.isRegex
+                  ? ann.sequence
+                  : convertApELikeRegexToRegex(ann.sequence),
+                id,
+              };
+            });
+
+            const seqId = "placeholderId";
+            const { [seqId]: newAnns } = autoAnnotate({
+              seqsToAnnotateById: {
+                [seqId]: { ...sequenceData, id: seqId },
+              },
+              annotationsToCheckById,
+            });
+
+            if (newAnns && newAnns.length) {
+              setNewAnns(
+                newAnns.map((a) => {
+                  const toRet = {
+                    ...annotationsToCheckById[a.id],
+                    ...a,
+                    forward: a.strand !== -1,
+                    id: shortid(),
+                  };
+                  toRet.color =
+                    toRet.color || getFeatureToColorMap()[toRet.type];
+                  return toRet;
+                })
+              );
+            } else {
+              window.toastr.warning(
+                `No ${annotationType}s detected on sequence.`
+              );
+            }
+          } catch (error) {
+            console.error(`error:`, error);
+            if (error.validationError) {
+              throw new SubmissionError({ [fileType]: error.validationError });
+            } else {
+              window.toastr.error(
+                `Error annotating ${annotationType}(s). Double check your file to make sure it is valid!`
+              );
+            }
+          }
+        })}
+        text="Annotate"
+      ></DialogFooter>
+    </div>
+  );
+});
+
+if (!window._ove_addons) window._ove_addons = {};
+window._ove_addons.autoAnnotateFeatures = autoAnnotateFeatures;
+window._ove_addons.autoAnnotateParts = autoAnnotateParts;
+window._ove_addons.autoAnnotatePrimers = autoAnnotatePrimers;
+
+const customAnnsSchema = ["name", "sequence", typeField, "isRegex"];
+const customAnnsSchemaNoType = ["name", "sequence", typeField, "isRegex"];
+
+const validateAgainstSchema = {
+  fields: [
+    {
+      path: "name",
+      type: "string",
+      isRequired: true,
+    },
+    {
+      path: "description",
+      type: "string",
+    },
+    {
+      path: "sequence",
+      type: "string",
+      isRequired: true,
+    },
+    {
+      path: "type",
+      type: "dropdown",
+      values: getFeatureTypes(),
+      defaultValue: "misc_feature",
+    },
+    {
+      path: "isRegex",
+      type: "boolean",
+    },
+    {
+      path: "matchType",
+      type: "dropdown",
+      defaultValue: "dna",
+      values: ["dna", "protein"],
+    },
+  ],
+};