@teselagen/ove 0.0.14 → 0.0.15

package/src/helperComponents/PropertiesDialog/SingleEnzymeCutsiteInfo.js

@@ -0,0 +1,131 @@
+import React from "react";
+import { DataTable } from "@teselagen/ui";
+
+import { CutsiteTag } from "../../CutsiteFilter/AdditionalCutsiteInfoDialog";
+
+import EnzymeViewer from "../../EnzymeViewer";
+import { getEnzymeAliases } from "../../utils/editorUtils";
+
+export default function SingleEnzymeCutsiteInfo({
+  cutsiteGroup,
+  enzyme,
+  dispatch,
+  allRestrictionEnzymes,
+  editorName,
+  selectedAnnotationId,
+  allCutsites,
+  filteredCutsites: { cutsitesByName: cutsitesByNameActive }
+}) {
+  const onRowSelect = ([record]) => {
+    if (!record) return;
+
+    dispatch({
+      type: "CARET_POSITION_UPDATE",
+      payload: record.topSnipPosition,
+      meta: {
+        editorName
+      }
+    });
+  };
+  const aliases = getEnzymeAliases(enzyme);
+  const entities = cutsiteGroup
+    .sort((a, b) => a.topSnipPosition - b.topSnipPosition)
+    .map(
+      ({
+        restrictionEnzyme: { forwardRegex, reverseRegex } = {},
+        forward,
+        id,
+        topSnipBeforeBottom,
+        topSnipPosition,
+        bottomSnipPosition
+      }) => {
+        return {
+          id,
+          topSnipPosition,
+          position: topSnipBeforeBottom
+            ? topSnipPosition + " - " + bottomSnipPosition
+            : bottomSnipPosition + " - " + topSnipPosition,
+          strand:
+            forwardRegex === reverseRegex ? "Palindromic" : forward ? "1" : "-1"
+        };
+      }
+    );
+
+  return (
+    <div>
+      <div
+        className="ve-enzymeSubrow"
+        style={{
+          margin: 10
+        }}
+      >
+        {enzyme && (
+          <EnzymeViewer
+            {...{
+              sequence: enzyme.site,
+              reverseSnipPosition: enzyme.bottomSnipOffset,
+              forwardSnipPosition: enzyme.topSnipOffset
+            }}
+          />
+        )}
+        <br></br>
+        {entities && !!entities.length && (
+          <div>
+            <DataTable
+              style={{ minHeight: 0, maxHeight: 200 }}
+              selectedIds={selectedAnnotationId}
+              maxHeight={300}
+              onRowSelect={onRowSelect}
+              formName="cutLocations"
+              isSingleSelect
+              compact
+              noRouter
+              minimalStyle
+              scrollToSelectedRowRelativeToDom
+              noHeader
+              isSimple
+              noFullscreenButton
+              isInfinite
+              withSearch={false}
+              withFilter={false}
+              schema={schema}
+              entities={entities}
+            />
+          </div>
+        )}
+        {aliases && aliases.length && (
+          <div style={{ marginTop: 10 }}>
+            Aliases:
+            <div style={{ display: "flex", flexWrap: "wrap" }}>
+              {aliases.map((n, i) => {
+                return (
+                  <CutsiteTag
+                    allRestrictionEnzymes={allRestrictionEnzymes}
+                    cutsitesByNameActive={cutsitesByNameActive}
+                    cutsitesByName={allCutsites.cutsitesByName}
+                    key={i}
+                    name={n}
+                    doNotShowCuts
+                  ></CutsiteTag>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const schema = {
+  fields: [
+    { path: "topSnipPosition", displayName: "Top Snip", type: "string" },
+    { path: "position", type: "string" },
+    { path: "strand", type: "string" }
+  ]
+};
+
+// export default compose(
+//   withEditorProps,
+//   withRestrictionEnzymes
+// )(SingleEnzymeCutsiteInfo);

package/src/helperComponents/PropertiesDialog/TranslationProperties.js

@@ -0,0 +1,149 @@
+import { Tooltip, AnchorButton } from "@blueprintjs/core";
+import React from "react";
+import {
+  DataTable,
+  withSelectedEntities,
+  createCommandMenu
+} from "@teselagen/ui";
+import getCommands from "../../commands";
+import { map } from "lodash";
+import { getRangeLength } from "@teselagen/range-utils";
+import { connectToEditor } from "../../withEditorProps";
+import { compose } from "recompose";
+import selectors from "../../selectors";
+import { getMassOfAaString } from "@teselagen/sequence-utils";
+import { translationsSubmenu } from "../../MenuBar/viewSubmenu";
+import { getVisFilter } from "./GenericAnnotationProperties";
+
+class TranslationProperties 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 {
+      readOnly,
+      translations,
+      translationPropertiesSelectedEntities,
+      deleteTranslation,
+      sequenceLength,
+      selectedAnnotationId,
+      annotationVisibility
+    } = this.props;
+    const translationsToUse = map(translations, (translation) => {
+      let aaString = "";
+      for (let i = 0; i < translation.aminoAcids.length; i++) {
+        aaString += translation.aminoAcids[i].aminoAcid.value;
+      }
+      return {
+        ...translation,
+        sizeBps: getRangeLength(translation, sequenceLength),
+        sizeAa:
+          translation.translationType === "ORF"
+            ? Math.floor(getRangeLength(translation, sequenceLength) / 3 - 1)
+            : Math.floor(getRangeLength(translation, sequenceLength) / 3),
+        ...(translation.strand === undefined && {
+          strand: translation.forward ? 1 : -1
+        }),
+        mass: getMassOfAaString(aaString, 2, true)
+      };
+    });
+    return (
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        <DataTable
+          withCheckboxes
+          noPadding
+          onRowSelect={this.onRowSelect}
+          selectedIds={selectedAnnotationId}
+          formName="translationProperties"
+          noRouter
+          compact
+          topLeftItems={getVisFilter(
+            createCommandMenu(translationsSubmenu, this.commands, {
+              useTicks: true
+            })
+          )}
+          leftOfSearchBarItems={
+            !readOnly && (
+              <Tooltip
+                content={
+                  translationPropertiesSelectedEntities.length &&
+                  translationPropertiesSelectedEntities[0].translationType !==
+                    "User Created"
+                    ? `Only "User Created" translations can be deleted`
+                    : undefined
+                }
+              >
+                <AnchorButton
+                  onClick={() => {
+                    deleteTranslation(translationPropertiesSelectedEntities);
+                  }}
+                  intent="danger"
+                  icon="trash"
+                  style={{ marginLeft: 10, marginRight: 15, height: 30 }}
+                  disabled={
+                    !translationPropertiesSelectedEntities.length ||
+                    translationPropertiesSelectedEntities[0].translationType !==
+                      "User Created"
+                  }
+                ></AnchorButton>
+              </Tooltip>
+            )
+          }
+          annotationVisibility={annotationVisibility} //we need to pass this in order to force the DT to rerender
+          hideSelectedCount
+          noFooter
+          noFullscreenButton
+          isInfinite
+          schema={{
+            fields: [
+              {
+                path: "translationType",
+                displayName: "Type",
+                type: "string"
+              },
+              {
+                path: "sizeAa",
+                displayName: "Size (aa)",
+                type: "number"
+              },
+              {
+                path: "mass",
+                displayName: "Mass (g/mol)",
+                type: "number"
+              },
+              { path: "strand", type: "number" }
+            ]
+          }}
+          entities={translationsToUse}
+        />
+      </div>
+    );
+  }
+}
+
+export default compose(
+  connectToEditor((editorState) => {
+    const { readOnly, annotationVisibility = {}, sequenceData } = editorState;
+    return {
+      readOnly,
+      translations: selectors.translationsSelector(editorState),
+      orfs: selectors.orfsSelector(editorState),
+      annotationVisibility,
+      sequenceLength: (sequenceData.sequence || "").length,
+      sequenceData
+    };
+  }),
+  withSelectedEntities("translationProperties")
+)(TranslationProperties);

package/src/helperComponents/PropertiesDialog/index.js

@@ -0,0 +1,166 @@
+import React from "react";
+import { compose } from "redux";
+import { Tab, Tabs } from "@blueprintjs/core";
+import { flatMap, startCase } from "lodash";
+import FeatureProperties from "./FeatureProperties";
+import GeneralProperties from "./GeneralProperties";
+import CutsiteProperties from "./CutsiteProperties";
+import OrfProperties from "./OrfProperties";
+import GenbankView from "./GenbankView";
+import TranslationProperties from "./TranslationProperties";
+import PrimerProperties from "./PrimerProperties";
+import PartProperties from "./PartProperties";
+import { connectToEditor } from "../../withEditorProps";
+import "./style.css";
+import { userDefinedHandlersAndOpts } from "../../Editor/userDefinedHandlersAndOpts";
+import { pick } from "lodash";
+
+const PropertiesContainer = (Comp) => (props) => {
+  const { additionalFooterEls, additionalHeaderEls, ...rest } = props;
+  return (
+    <React.Fragment>
+      {additionalHeaderEls}
+      <Comp {...rest} />
+      {additionalFooterEls}
+    </React.Fragment>
+  );
+};
+const allTabs = {
+  general: PropertiesContainer(GeneralProperties),
+  features: PropertiesContainer(FeatureProperties),
+  parts: PropertiesContainer(PartProperties),
+  primers: PropertiesContainer(PrimerProperties),
+  translations: PropertiesContainer(TranslationProperties),
+  cutsites: PropertiesContainer(CutsiteProperties),
+  orfs: PropertiesContainer(OrfProperties),
+  genbank: PropertiesContainer(GenbankView)
+};
+export class PropertiesDialog extends React.Component {
+  render() {
+    const {
+      propertiesTool = {},
+      propertiesViewTabUpdate,
+      dimensions = {},
+      height,
+      editorName,
+      onSave,
+      showReadOnly,
+      showAvailability,
+      isProtein,
+      annotationsToSupport = {},
+      disableSetReadOnly,
+      propertiesList = [
+        "general",
+        "features",
+        "parts",
+        "primers",
+        "translations",
+        "cutsites",
+        "orfs",
+        "genbank"
+      ],
+      closePanelButton
+    } = { ...this.props, ...this.props.PropertiesProps };
+
+    const { width, height: heightFromDim } = dimensions;
+
+    let { tabId, selectedAnnotationId } = propertiesTool;
+    if (
+      propertiesList
+        .map((nameOrOverride) => nameOrOverride.name || nameOrOverride)
+        .indexOf(tabId) === -1
+    ) {
+      tabId = propertiesList[0].name || propertiesList[0];
+    }
+    const propertiesTabs = flatMap(propertiesList, (nameOrOverride) => {
+      if (annotationsToSupport[nameOrOverride] === false) {
+        return [];
+      }
+
+      const name = nameOrOverride.name || nameOrOverride;
+      const Comp = nameOrOverride.Comp || allTabs[name];
+      if (isProtein) {
+        if (
+          name === "translations" ||
+          name === "orfs" ||
+          name === "primers" ||
+          name === "cutsites"
+        ) {
+          return null;
+        }
+      }
+      const title = (() => {
+        if (nameOrOverride.Comp) return name; //just use the user supplied name because this is a custom panel
+        if (name === "orfs") return "ORFs";
+        if (name === "cutsites") return "Cut Sites";
+        return startCase(name);
+      })();
+      return (
+        <Tab
+          key={name}
+          title={title}
+          id={name}
+          panel={
+            <Comp
+              {...{
+                ...pick(this.props, userDefinedHandlersAndOpts),
+                editorName,
+                onSave,
+                isProtein,
+                showReadOnly,
+                showAvailability,
+                disableSetReadOnly,
+                selectedAnnotationId,
+                ...(nameOrOverride.name && nameOrOverride)
+              }}
+            />
+          }
+        />
+      );
+    });
+    const heightToUse = Math.max(0, Number((heightFromDim || height) - 30));
+    return (
+      <div
+        style={{
+          position: "relative"
+        }}
+      >
+        {closePanelButton}
+        <div
+          className="ve-propertiesPanel"
+          style={{
+            display: "flex",
+            width,
+            height: heightToUse || 300,
+            zIndex: 10,
+            padding: 10
+            // paddingBottom: '31px',
+          }}
+        >
+          {propertiesTabs.length ? (
+            <Tabs
+              style={{ width }}
+              renderActiveTabPanelOnly
+              selectedTabId={tabId}
+              onChange={propertiesViewTabUpdate}
+            >
+              <Tabs.Expander />
+              {propertiesTabs}
+              <Tabs.Expander />
+            </Tabs>
+          ) : (
+            <div style={{ margin: 20, fontSize: 20 }}>
+              No Properties to display
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default compose(
+  connectToEditor(({ propertiesTool, annotationsToSupport }) => {
+    return { propertiesTool, annotationsToSupport };
+  })
+)(PropertiesDialog);

package/src/helperComponents/PropertiesDialog/style.css

@@ -0,0 +1,68 @@
+.ve-propertiesPanel .bp3-tabs {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.ve-propertiesPanel .bp3-tab-list::-webkit-scrollbar {
+  display: none;
+}
+
+.ve-propertiesPanel .data-table-header {
+  margin-top: 3px;
+  margin-right: 3px;
+}
+.ve-propertiesPanel .bp3-tab-list {
+  overflow: scroll;
+}
+.ve-propertiesPanel .bp3-tabs .bp3-tab-panel {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: visible;
+}
+
+.ve-flex-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: top;
+  min-height: 40px;
+  /* padding-top: 15px; */
+}
+/* .ve-column-right {
+  display: flex;
+  
+  align-items: center;
+} */
+
+/* .data-table-container > * {
+  flex-shrink: 0;
+} */
+
+.ve-propertiesPanel .bp3-popover-wrapper {
+  width: fit-content;
+}
+
+.ve-propertiesPanel .data-table-container {
+  min-height: 250px;
+}
+.ve-propertiesPanel .data-table-footer {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+.genbankFileView-type {
+  display: block;
+  width: fit-content;
+  margin-bottom: 5px;
+}
+
+.ve-enzymeSubrow .data-table-container {
+  height: fit-content;
+  min-height: 0px;
+}
+
+.ve-enzymeSubrow .ReactTable .rt-tr-group:last-child {
+  margin-bottom: 0px;
+}

package/src/helperComponents/PropertiesDialog/typeField.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { getFeatureToColorMap } from "@teselagen/sequence-utils";
+
+export const typeField = {
+  path: "type",
+  type: "string",
+  render: (name, { color }) => {
+    const colorToUse =
+      color || getFeatureToColorMap({ includeHidden: true })[name];
+    return (
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <div
+          style={{
+            height: 20,
+            width: 20,
+            background: colorToUse,
+            marginRight: 3
+          }}
+        />
+        {name}
+      </div>
+    );
+  }
+};

package/src/helperComponents/PropertiesDialog/utils.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { convertDnaCaretPositionOrRangeToAA } from "@teselagen/sequence-utils";
+import { convertRangeTo1Based } from "@teselagen/range-utils";
+
+export const sizeSchema = {
+  path: "size",
+  type: "number",
+  render: (val, _record, i, props) => {
+    const record = props.isProtein
+      ? convertDnaCaretPositionOrRangeToAA(_record)
+      : _record;
+    const base1Range = convertRangeTo1Based(record);
+    const hasJoinedLocations = record.locations && record.locations.length > 1;
+
+    return (
+      <span>
+        {props.isProtein ? Math.floor(val / 3) : val}{" "}
+        <span style={{ fontSize: 10 }}>
+          {hasJoinedLocations ? (
+            record.locations.map((loc, i) => {
+              const base1Range = convertRangeTo1Based(loc);
+              return (
+                <span key={i}>
+                  ({base1Range.start}-{base1Range.end})
+                </span>
+              );
+            })
+          ) : (
+            <span>
+              ({base1Range.start}-{base1Range.end})
+            </span>
+          )}
+        </span>
+      </span>
+    );
+  }
+};