@teselagen/ove 0.7.28 → 0.7.30-beta.1

package/GenericAnnotationProperties.js

@@ -1,406 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,110 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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>
-  );
-}