@teselagen/ove 0.7.27 → 0.7.28

package/GenericAnnotationProperties.js

@@ -0,0 +1,406 @@
+import React from "react";
+import {
+  DataTable,
+  withSelectedEntities,
+  CmdButton,
+  getTagProps,
+  getKeyedTagsAndTagOptions,
+  DropdownButton,
+  createCommandMenu,
+  popoverOverflowModifiers,
+  removeDuplicatesIcon
+} from "@teselagen/ui";
+import { map, upperFirst, pick, startCase, isFunction } from "lodash-es";
+import {
+  AnchorButton,
+  ButtonGroup,
+  Icon,
+  Menu,
+  Tag,
+  Tooltip
+} from "@blueprintjs/core";
+import { getRangeLength } from "@teselagen/range-utils";
+// import { Popover } from "@blueprintjs/core";
+// import ColorPicker from "./ColorPicker";
+import { connectToEditor } from "../../withEditorProps";
+import { compose } from "recompose";
+import commands from "../../commands";
+import { sizeSchema } from "./utils";
+import { showAddOrEditAnnotationDialog } from "../../GlobalDialogUtils";
+import { typeField } from "./typeField";
+import { getSequenceWithinRange } from "@teselagen/range-utils";
+import { getReverseComplementSequenceString } from "@teselagen/sequence-utils";
+
+const genericAnnotationProperties = ({
+  annotationType,
+  noType,
+  visSubmenu,
+  withTags,
+  withBases,
+  additionalFooterEls
+}) => {
+  const annotationTypeUpper = upperFirst(annotationType);
+  class AnnotationProperties extends React.Component {
+    constructor(props) {
+      super(props);
+      this.commands = commands(this);
+    }
+    onRowSelect = ([record]) => {
+      if (!record) return;
+      const { dispatch, editorName } = this.props;
+      dispatch({
+        type: "SELECTION_LAYER_UPDATE",
+        payload: record,
+        meta: {
+          editorName
+        }
+      });
+    };
+    render() {
+      const {
+        readOnly,
+        annotations = {},
+        annotationVisibility,
+        sequenceLength,
+        selectionLayer,
+        sequence,
+        isProtein,
+        allPartTags,
+        annotationPropertiesSelectedEntities:
+          _annotationPropertiesSelectedEntities,
+        selectedAnnotationId
+      } = this.props;
+      const annotationPropertiesSelectedEntities =
+        _annotationPropertiesSelectedEntities.filter(a => annotations[a.id]);
+
+      const deleteAnnotation = this.props[`delete${annotationTypeUpper}`];
+
+      const annotationsToUse = map(annotations, annotation => {
+        return {
+          ...annotation,
+          ...(annotation.strand === undefined && {
+            strand: annotation.forward ? 1 : -1
+          }),
+          size: getRangeLength(annotation, sequenceLength)
+        };
+      });
+
+      const keyedPartTags = getKeyedTagsAndTagOptions(allPartTags) ?? {};
+
+      this.schema = {
+        fields: [
+          {
+            path: "name",
+            type: "string",
+
+            render: (name, ann) => {
+              const checked =
+                !this.props.annotationVisibility[
+                  `${annotationType}IndividualToHide`
+                ][ann.id];
+
+              return (
+                <>
+                  <Icon
+                    data-tip="Hide/Show"
+                    onClick={e => {
+                      e.stopPropagation();
+                      const upperType = startCase(annotationType);
+                      if (checked) {
+                        this.props[`hide${upperType}Individual`]([ann.id]);
+                      } else {
+                        this.props[`show${upperType}Individual`]([ann.id]);
+                      }
+                    }}
+                    style={{
+                      cursor: "pointer",
+                      marginRight: 4,
+                      marginTop: 3,
+                      color: "darkgray"
+                    }}
+                    icon={`eye-${checked ? "open" : "off"}`}
+                  ></Icon>
+                  {name}
+                </>
+              );
+            }
+          },
+
+          ...(!withBases
+            ? []
+            : [
+                {
+                  path: "bases",
+                  type: "string",
+                  render: (bases, primer) => {
+                    let bps = bases;
+                    if (!bases) {
+                      bps = getSequenceWithinRange(primer, this.props.sequence);
+                      if (!primer.forward) {
+                        bps = getReverseComplementSequenceString(bps);
+                      }
+                    }
+                    return bps;
+                  }
+                }
+              ]),
+          ...(noType
+            ? []
+            : [
+                typeField,
+                {
+                  path: "color",
+                  type: "string",
+                  width: 50,
+                  render: color => {
+                    return (
+                      <div
+                        style={{ height: 20, width: 20, background: color }}
+                      />
+                      // <ColorPickerPopover>
+                      //   <div style={{ height: 20, width: 20, background: color }} />
+                      // </ColorPickerPopover>
+                    );
+                  }
+                }
+              ]),
+          sizeSchema(this.props.isProtein),
+          ...(withTags && this.props.allPartTags
+            ? [
+                {
+                  path: "tags",
+                  type: "string",
+                  getValueToFilterOn: o => {
+                    const toRet = (o.tags || [])
+                      .map(tagId => {
+                        const tag = keyedPartTags[tagId];
+                        if (!tag) return "";
+                        return tag.label;
+                      })
+                      .join(" ");
+                    return toRet;
+                  },
+                  render: tags => {
+                    return (
+                      <div style={{ display: "flex" }}>
+                        {(tags || []).map((tagId, i) => {
+                          const tag = keyedPartTags[tagId];
+                          if (!tag) return null;
+                          return <Tag key={i} {...getTagProps(tag)}></Tag>;
+                        })}
+                      </div>
+                    );
+                  }
+                }
+              ]
+            : []),
+          { path: "strand", type: "number" }
+        ]
+      };
+
+      return (
+        <DataTable
+          topLeftItems={getVisFilter(
+            createCommandMenu(
+              isFunction(visSubmenu) ? visSubmenu(this.props) : visSubmenu,
+              this.commands,
+              {
+                useTicks: true
+              }
+            )
+          )}
+          annotationPropertiesSelectedEntities={
+            annotationPropertiesSelectedEntities
+          }
+          leftOfSearchBarItems={
+            <>
+              {!readOnly && (
+                <ButtonGroup style={{ marginTop: 3, marginRight: 4 }}>
+                  <Tooltip
+                    position="top"
+                    modifiers={popoverOverflowModifiers}
+                    content="New"
+                  >
+                    <AnchorButton
+                      disabled={!sequenceLength}
+                      icon="plus"
+                      className="tgNewAnnBtn"
+                      onClick={() => {
+                        showAddOrEditAnnotationDialog({
+                          type: annotationType,
+                          annotation: pick(
+                            selectionLayer,
+                            "start",
+                            "end",
+                            "forward"
+                          )
+                        });
+                      }}
+                    ></AnchorButton>
+                  </Tooltip>
+                  <Tooltip
+                    position="top"
+                    modifiers={popoverOverflowModifiers}
+                    content="Edit"
+                  >
+                    <AnchorButton
+                      onClick={() => {
+                        showAddOrEditAnnotationDialog({
+                          type: annotationType,
+                          annotation: annotationPropertiesSelectedEntities[0]
+                        });
+                      }}
+                      disabled={
+                        annotationPropertiesSelectedEntities.length !== 1
+                      }
+                      icon="edit"
+                    ></AnchorButton>
+                  </Tooltip>
+
+                  {["feature"].includes(annotationType) && (
+                    <CmdButton
+                      text=""
+                      icon="cog"
+                      data-tip="Configure Feature Types"
+                      cmd={this.commands.onConfigureFeatureTypesClick}
+                    />
+                  )}
+                  {["part", "primer", "feature"].includes(annotationType) && (
+                    <CmdButton
+                      text=""
+                      icon={removeDuplicatesIcon}
+                      data-tip="Remove Duplicates"
+                      cmd={
+                        this.commands[
+                          `showRemoveDuplicatesDialog${
+                            annotationTypeUpper + "s"
+                          }`
+                        ]
+                      }
+                    />
+                  )}
+
+                  {additionalFooterEls && additionalFooterEls(this.props)}
+                  <Tooltip
+                    position="top"
+                    modifiers={popoverOverflowModifiers}
+                    content="Delete"
+                  >
+                    <AnchorButton
+                      onClick={() => {
+                        deleteAnnotation(annotationPropertiesSelectedEntities);
+                      }}
+                      className="tgDeleteAnnsBtn"
+                      intent="danger"
+                      disabled={!annotationPropertiesSelectedEntities.length}
+                      icon="trash"
+                    ></AnchorButton>
+                  </Tooltip>
+                </ButtonGroup>
+              )}
+              {/* {createCommandMenu(
+                  {
+                    cmd: "featureFilterIndividualCmd",
+                    // text: 'hahah',
+                    shouldDismissPopover: false
+                  },
+                  this.commands,
+                  {
+                    useTicks: true
+                  }
+                )} */}
+              {/* <CmdCheckbox
+                  prefix="Show "
+                  cmd={this.commands.featureFilterIndividualCmd}
+                /> */}
+            </>
+          }
+          onDoubleClick={annotation => {
+            showAddOrEditAnnotationDialog({
+              type: annotationType,
+              annotation
+            });
+          }}
+          withCheckboxes
+          showFeatureIndividual={this.props.showFeatureIndividual} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
+          hideFeatureIndividual={this.props.hideFeatureIndividual} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
+          showPartIndividual={this.props.showPartIndividual} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
+          hidePartIndividual={this.props.hidePartIndividual} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
+          showPrimerIndividual={this.props.showPrimerIndividual} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
+          hidePrimerIndividual={this.props.hidePrimerIndividual} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
+          annotationVisibility={annotationVisibility} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
+          featureLengthsToHide={this.props.featureLengthsToHide} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
+          primerLengthsToHide={this.props.primerLengthsToHide} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
+          partLengthsToHide={this.props.partLengthsToHide} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
+          sequence={sequence} //we need to pass this in order to force the DT to rerenderannotationVisibility={annotationVisibility}
+          noPadding
+          noFullscreenButton
+          onRowSelect={this.onRowSelect}
+          selectedIds={selectedAnnotationId}
+          formName="annotationProperties"
+          noRouter
+          isProtein={isProtein}
+          compact
+          isInfinite
+          schema={this.schema}
+          entities={annotationsToUse}
+        />
+      );
+    }
+  }
+
+  return compose(
+    connectToEditor(
+      ({
+        readOnly,
+        annotationVisibility = {},
+        sequenceData,
+        selectionLayer,
+        featureLengthsToHide,
+        primerLengthsToHide,
+        partLengthsToHide
+      }) => {
+        return {
+          annotationVisibility,
+          selectionLayer,
+          readOnly,
+          featureLengthsToHide,
+          primerLengthsToHide,
+          partLengthsToHide,
+          sequenceData,
+          sequence: sequenceData.sequence,
+          annotations: sequenceData[annotationType + "s"],
+          [annotationType + "s"]: sequenceData[annotationType + "s"],
+          sequenceLength: sequenceData.sequence.length
+        };
+      }
+    ),
+    // withEditorProps,
+    withSelectedEntities("annotationProperties")
+  )(AnnotationProperties);
+};
+
+export default genericAnnotationProperties;
+
+// const ColorPickerPopover = ({ readOnly, onColorSelect, children }) => {
+//   return (
+//     <Popover
+//       disabled={readOnly}
+//       content={<ColorPicker onColorSelect={onColorSelect} />}
+//     >
+//       {children}
+//     </Popover>
+//   );
+// };
+
+export function getVisFilter(submenu) {
+  return (
+    <DropdownButton
+      style={{ marginTop: 3 }}
+      icon="eye-open"
+      className="propertiesVisFilter"
+      data-tip="Visibility Filter"
+      menu={<Menu>{submenu}</Menu>}
+    ></DropdownButton>
+  );
+}

package/GlobalDialog.js

@@ -0,0 +1,73 @@
+import React, { useState, useEffect } from "react";
+
+import { dialogHolder, hideDialog } from "./GlobalDialogUtils";
+
+import RenameSequenceDialog from "./helperComponents/RenameSequenceDialog";
+import PrintDialog from "./helperComponents/PrintDialog";
+import RemoveDuplicates from "./helperComponents/RemoveDuplicates";
+import { MultipleSeqsDetectedOnImportDialog } from "./helperComponents/MultipleSeqsDetectedOnImportDialog";
+import GoToDialog from "./helperComponents/GoToDialog";
+import SelectDialog from "./helperComponents/SelectDialog";
+import EnzymesDialog from "./helperComponents/EnzymesDialog";
+import CreateCustomEnzyme from "./CreateCustomEnzyme";
+import {
+  AdditionalCutsiteInfoDialog,
+  CompareEnzymeGroupsDialog
+} from "./CutsiteFilter/AdditionalCutsiteInfoDialog";
+import { AlignmentToolDialog } from "./ToolBar/alignmentTool";
+import MergeFeaturesDialog from "./helperComponents/MergeFeaturesDialog";
+import AddOrEditPartDialog from "./helperComponents/AddOrEditPartDialog";
+import AddOrEditFeatureDialog from "./helperComponents/AddOrEditFeatureDialog";
+import AddOrEditPrimerDialog from "./helperComponents/AddOrEditPrimerDialog";
+
+const Dialogs = {
+  RenameSequenceDialog,
+  PrintDialog,
+  MultipleSeqsDetectedOnImportDialog,
+  RemoveDuplicates,
+  GoToDialog,
+  SelectDialog,
+  EnzymesDialog,
+  CreateCustomEnzyme,
+  AdditionalCutsiteInfoDialog,
+  CompareEnzymeGroupsDialog,
+  AlignmentToolDialog,
+  MergeFeaturesDialog,
+  AddOrEditPartDialog,
+  AddOrEditFeatureDialog,
+  AddOrEditPrimerDialog
+};
+
+export function GlobalDialog(props) {
+  const { dialogOverrides = {}, editorName } = props;
+  const [uniqKey, setUniqKeyToForceRerender] = useState();
+  useEffect(() => {
+    //on unmount, clear the global dialog state..
+    return () => {
+      hideDialog();
+    };
+  }, []);
+  if (
+    dialogHolder.editorName &&
+    editorName &&
+    dialogHolder.editorName !== editorName
+  ) {
+    return null;
+  }
+  dialogHolder.setUniqKeyToForceRerender = setUniqKeyToForceRerender;
+  const Comp =
+    dialogHolder.CustomModalComponent ||
+    dialogOverrides[dialogHolder.overrideName] ||
+    Dialogs[dialogHolder.dialogType];
+  if (!Comp) return null;
+
+  return (
+    <Comp
+      key={uniqKey}
+      hideDialog={hideDialog}
+      hideModal={hideDialog}
+      {...props}
+      {...dialogHolder.props}
+    ></Comp>
+  );
+}

package/GlobalDialogUtils.js

@@ -0,0 +1,110 @@
+import shortid from "shortid";
+
+import { cloneDeep, startCase } from "lodash-es";
+import { convertRangeTo1Based } from "@teselagen/range-utils";
+
+export const dialogHolder = {};
+//if an overrideName is passed, then that dialog can be overridden if an overriding dialog is passed as a prop to the <Editor/>
+export function showDialog({
+  ModalComponent,
+  dialogType,
+  props,
+  overrideName
+}) {
+  dialogHolder.dialogType = dialogType;
+  if (!dialogHolder.dialogType && ModalComponent) {
+    dialogHolder.dialogType = "TGCustomModal";
+  }
+  // check if focused element in the dom is within a given editor and add an editor prop to the dialog
+  if (document.activeElement && document.activeElement.closest(".veEditor")) {
+    let editorName;
+    document.activeElement
+      .closest(".veEditor")
+      ?.className.split(" ")
+      .forEach(c => {
+        if (!c.trim()) return;
+        if (
+          !c.trim().includes("veEditor") &&
+          !c.trim().includes("previewModeFullscreen")
+        ) {
+          editorName = c;
+        }
+      });
+    dialogHolder.editorName = editorName;
+  }
+
+  dialogHolder.CustomModalComponent = ModalComponent;
+  dialogHolder.props = props;
+  dialogHolder.overrideName = overrideName;
+  dialogHolder.setUniqKeyToForceRerender(shortid());
+}
+export function hideDialog() {
+  delete dialogHolder.dialogType;
+  delete dialogHolder.CustomModalComponent;
+  delete dialogHolder.props;
+  delete dialogHolder.overrideName;
+  delete dialogHolder.editorName;
+  dialogHolder.setUniqKeyToForceRerender();
+}
+
+const typeToDialogType = {
+  part: "AddOrEditPartDialog",
+  feature: "AddOrEditFeatureDialog",
+  primer: "AddOrEditPrimerDialog"
+};
+
+export function showAddOrEditAnnotationDialog({
+  type,
+  annotation: _annotation
+}) {
+  // AddOrEditPartDialog
+  // AddOrEditFeatureDialog
+  // AddOrEditPrimerDialog
+  const dialogType = typeToDialogType[type];
+  if (Object.values(typeToDialogType).includes(dialogHolder.dialogType)) {
+    return;
+  }
+  const nameUpper = startCase(type);
+  const annotation = cloneDeep(_annotation);
+  if (_annotation.isWrappedAddon) {
+    delete annotation.isWrappedAddon;
+    delete annotation.rangeTypeOverride;
+    annotation.start = _annotation.end + 1;
+    annotation.end = _annotation.start - 1;
+  }
+  const forward =
+    annotation.strand === -1
+      ? false
+      : annotation.forward !== undefined
+        ? !!annotation.forward
+        : true;
+  showDialog({
+    overrideName: `AddOrEdit${nameUpper}DialogOverride`,
+    dialogType,
+    props: {
+      ...(annotation.isEditLocked && {
+        readOnly:
+          typeof annotation.isEditLocked === "string"
+            ? annotation.isEditLocked
+            : "This annotation is locked"
+      }),
+      dialogProps: {
+        title:
+          annotation && annotation.id ? `Edit ${nameUpper}` : `New ${nameUpper}`
+      },
+      initialValues: {
+        ...(annotation
+          ? {
+              ...convertRangeTo1Based(annotation),
+              forward,
+              arrowheadType:
+                annotation.arrowheadType || (!forward ? "BOTTOM" : "TOP"),
+              ...(annotation.locations && {
+                locations: annotation.locations.map(convertRangeTo1Based)
+              })
+            }
+          : {})
+      }
+    }
+  });
+}

package/GoToDialog.js

@@ -0,0 +1,25 @@
+import createSimpleDialog from "./createSimpleDialog";
+import { NumericInputField } from "@teselagen/ui";
+import { get } from "lodash-es";
+import { tryToRefocusEditor } from "../utils/editorUtils";
+
+export default createSimpleDialog({
+  formName: "goToDialog",
+  fields: [
+    {
+      name: "sequencePosition",
+      component: NumericInputField,
+      validate: (val, vals, props) => {
+        const { min, max } = get(props, "extraProps.sequencePosition", {});
+        return (min && val < min) || (max && val > max)
+          ? "Invalid position"
+          : undefined;
+      }
+    }
+  ],
+  withDialogProps: {
+    title: "Go To",
+    height: 190,
+    onCloseHook: tryToRefocusEditor
+  }
+});

package/HorizontalPanelDragHandle.js

@@ -0,0 +1,35 @@
+import React, { useRef } from "react";
+export function HorizontalPanelDragHandle({ onDrag }) {
+  const xStart = useRef(0);
+
+  const resize = useRef(e => {
+    const dx = xStart.current - e.clientX;
+    onDrag({ dx });
+    xStart.current = e.clientX;
+  });
+  const mouseup = useRef(() => {
+    document.removeEventListener("mousemove", resize.current, false);
+    document.removeEventListener("mousemove", mouseup.current, false);
+  });
+
+  return (
+    <div
+      onMouseDown={e => {
+        xStart.current = e.clientX;
+        document.addEventListener("mousemove", resize.current, false);
+        document.addEventListener("mouseup", mouseup.current, false);
+      }}
+      style={{
+        position: "absolute",
+        top: 0,
+        right: -1,
+        zIndex: 1000,
+        height: "100%",
+        cursor: "ew-resize",
+        width: 3,
+        opacity: 0,
+        background: "blue"
+      }}
+    ></div>
+  );
+}