@teselagen/ove 0.0.14 → 0.0.15

package/src/helperComponents/PropertiesDialog/GeneralProperties.js

@@ -0,0 +1,140 @@
+import React from "react";
+import {
+  InputField,
+  BPSelect,
+  TextareaField
+} from "@teselagen/ui";
+import { reduxForm } from "redux-form";
+import withEditorProps from "../../withEditorProps";
+import { compose } from "recompose";
+
+class GeneralProperties extends React.Component {
+  updateSeqDesc = (val) => {
+    return this.props.sequenceDescriptionUpdate(val);
+  };
+  render() {
+    const {
+      readOnly,
+      showReadOnly = true,
+      updateCircular,
+      isProtein,
+      disableSetReadOnly,
+      updateAvailability,
+      sequenceData,
+      updateReadOnlyMode,
+      onSave,
+      showAvailability,
+      sequenceNameUpdate
+    } = this.props;
+    const {
+      description,
+      name,
+      isOligo,
+      isRna,
+      sequence = "",
+      proteinSequence = "",
+      circular,
+      materiallyAvailable
+    } = sequenceData || {};
+    return (
+      <React.Fragment>
+        <div className="ve-flex-row">
+          <div className="ve-column-left bp3-label">Name</div>{" "}
+          <div className="ve-column-right">
+            <InputField
+              disabled={readOnly}
+              onFieldSubmit={(val) => {
+                sequenceNameUpdate(val);
+              }}
+              name="name"
+              enableReinitialize
+              defaultValue={name}
+            />{" "}
+          </div>
+        </div>
+        {!isProtein && !isOligo && !isRna && (
+          <div className="ve-flex-row circularLinearSelect">
+            <div className="ve-column-left bp3-label">Circular/Linear</div>{" "}
+            <div className="ve-column-right">
+              {" "}
+              <BPSelect
+                disabled={readOnly}
+                onChange={(val) => {
+                  updateCircular(val === "circular");
+                }}
+                value={circular ? "circular" : "linear"}
+                options={[
+                  { label: "Circular", value: "circular" },
+                  { label: "Linear", value: "linear" }
+                ]}
+              />
+            </div>
+          </div>
+        )}
+
+        {showAvailability && (
+          <div className="ve-flex-row">
+            <div className="ve-column-left bp3-label">
+              Material Availability
+            </div>{" "}
+            <div className="ve-column-right">
+              {" "}
+              <BPSelect
+                disabled={readOnly}
+                onChange={(val) => {
+                  updateAvailability(val === "available");
+                }}
+                value={materiallyAvailable ? "available" : "unavailable"}
+                options={[
+                  { label: "Available", value: "available" },
+                  { label: "Unavailable", value: "unavailable" }
+                ]}
+              />
+            </div>
+          </div>
+        )}
+        <div className="ve-flex-row">
+          <div className="ve-column-left bp3-label">Length</div>{" "}
+          <div className="ve-column-right">
+            {" "}
+            {isProtein ? proteinSequence.length : sequence.length}
+          </div>
+        </div>
+        {showReadOnly && (
+          <div className="ve-flex-row">
+            <div className="ve-column-left bp3-label">Is Editable</div>{" "}
+            <div className="ve-column-right">
+              {" "}
+              <BPSelect
+                disabled={!onSave || disableSetReadOnly}
+                onChange={(val) => {
+                  updateReadOnlyMode(val === "readOnly");
+                }}
+                value={readOnly ? "readOnly" : "editable"}
+                options={[
+                  { label: "Read Only", value: "readOnly" },
+                  { label: "Editable", value: "editable" }
+                ]}
+              />
+            </div>
+          </div>
+        )}
+        <div>Description</div>
+        <TextareaField
+          clickToEdit
+          name="description"
+          onFieldSubmit={this.updateSeqDesc}
+          defaultValue={description}
+          disabled={readOnly}
+        />
+      </React.Fragment>
+    );
+  }
+}
+
+export default compose(
+  withEditorProps,
+  reduxForm({
+    form: "GeneralProperties"
+  })
+)(GeneralProperties);

package/src/helperComponents/PropertiesDialog/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";
+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);
+      this.schema = {
+        fields: [
+          {
+            path: "name",
+            type: "string",
+
+            render: (name, ann, row, props) => {
+              const checked =
+                !props.annotationVisibility[
+                  `${annotationType}IndividualToHide`
+                ][ann.id];
+
+              return (
+                <>
+                  <Icon
+                    data-tip="Hide/Show"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      const upperType = startCase(annotationType);
+                      if (checked) {
+                        props[`hide${upperType}Individual`]([ann.id]);
+                      } else {
+                        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, row, props) => {
+                    let bps = bases;
+                    if (!bases) {
+                      bps = getSequenceWithinRange(primer, 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,
+          ...(withTags && this.props.allPartTags
+            ? [
+                {
+                  path: "tags",
+                  type: "string",
+                  getValueToFilterOn: (o, { keyedPartTags }) => {
+                    const toRet = (o.tags || [])
+                      .map((tagId) => {
+                        const tag = keyedPartTags[tagId];
+                        if (!tag) return "";
+                        return tag.label;
+                      })
+                      .join(" ");
+                    return toRet;
+                  },
+                  render: (tags, b, c, { keyedPartTags = {} }) => {
+                    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" }
+        ]
+      };
+    }
+    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)
+        };
+      });
+
+      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}
+            keyedPartTags={getKeyedTagsAndTagOptions(allPartTags)}
+            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/src/helperComponents/PropertiesDialog/OrfProperties.js

@@ -0,0 +1,117 @@
+import React from "react";
+import {
+  DataTable,
+  withSelectedEntities,
+  createCommandMenu
+} from "@teselagen/ui";
+import { map } from "lodash";
+// import { Button } from "@blueprintjs/core";
+import { getRangeLength } from "@teselagen/range-utils";
+import { getOrfColor } from "../../constants/orfFrameToColorMap";
+import { connectToEditor } from "../../withEditorProps";
+import { compose } from "recompose";
+import selectors from "../../selectors";
+
+import getCommands from "../../commands";
+import { sizeSchema } from "./utils";
+import { orfsSubmenu } from "../../MenuBar/viewSubmenu";
+import { getVisFilter } from "./GenericAnnotationProperties";
+
+class OrfProperties extends React.Component {
+  constructor(props) {
+    super(props);
+    this.commands = getCommands(this);
+  }
+  onRowSelect = ([record]) => {
+    if (!record) return;
+    const { dispatch, editorName } = this.props;
+    dispatch({
+      type: "SELECTION_LAYER_UPDATE",
+      payload: record,
+      meta: {
+        editorName
+      }
+    });
+  };
+  render() {
+    const { orfs, sequenceLength, annotationVisibility } = this.props;
+    const orfsToUse = map(orfs, (orf) => {
+      return {
+        ...orf,
+        color: getOrfColor(orf),
+        frame: orf.frame + 1,
+        ...(orf.strand === undefined && {
+          strand: orf.forward ? 1 : -1
+        }),
+        size: getRangeLength(orf, sequenceLength),
+        sizeAa: Math.floor(getRangeLength(orf, sequenceLength) / 3 - 1)
+      };
+    });
+    return (
+      <React.Fragment>
+        <DataTable
+          topLeftItems={getVisFilter(
+            createCommandMenu(orfsSubmenu, this.commands, {
+              useTicks: true
+            })
+          )}
+          annotationVisibility={annotationVisibility} //we need to pass this in order to force the DT to rerender
+          noPadding
+          noFullscreenButton
+          onRowSelect={this.onRowSelect}
+          withSearch={false}
+          formName="orfProperties"
+          noRouter
+          compact
+          isInfinite
+          schema={{
+            fields: [
+              {
+                path: "color",
+                type: "string",
+                render: (color) => {
+                  return (
+                    <div style={{ height: 20, width: 20, background: color }} />
+                  );
+                }
+              },
+              {
+                path: "sizeAa",
+                displayName: "Size (aa)",
+                type: "number"
+              },
+              sizeSchema,
+              { path: "frame", type: "number" },
+              { path: "strand", type: "number" }
+            ]
+          }}
+          entities={orfsToUse}
+        />
+        <br />
+      </React.Fragment>
+    );
+  }
+}
+
+export default compose(
+  connectToEditor((editorState) => {
+    const {
+      readOnly,
+      annotationVisibility = {},
+      sequenceData: { sequence = "" } = {},
+      sequenceData,
+      minimumOrfSize,
+      useAdditionalOrfStartCodons
+    } = editorState;
+    return {
+      readOnly,
+      annotationVisibility,
+      useAdditionalOrfStartCodons,
+      orfs: selectors.orfsSelector(editorState),
+      sequenceLength: sequence.length,
+      sequenceData,
+      minimumOrfSize
+    };
+  }),
+  withSelectedEntities("orfProperties")
+)(OrfProperties);

package/src/helperComponents/PropertiesDialog/PartProperties.js

@@ -0,0 +1,9 @@
+import { partsSubmenu } from "../../MenuBar/viewSubmenu";
+import genericAnnotationProperties from "./GenericAnnotationProperties";
+export default genericAnnotationProperties({
+  annotationType: "part",
+  noColor: true,
+  visSubmenu: partsSubmenu,
+  withTags: true,
+  noType: true
+});

package/src/helperComponents/PropertiesDialog/PrimerProperties.js

@@ -0,0 +1,19 @@
+import { Button } from "@blueprintjs/core";
+import React from "react";
+import { primersSubmenu } from "../../MenuBar/viewSubmenu";
+
+import genericAnnotationProperties from "./GenericAnnotationProperties";
+export default genericAnnotationProperties({
+  annotationType: "primer",
+  noColor: true,
+  visSubmenu: primersSubmenu,
+  noType: true,
+  withBases: true,
+  additionalFooterEls: (props) => {
+    return (
+      <Button onClick={props.createNewPCR} intent="success">
+        Simulate PCR
+      </Button>
+    );
+  }
+});