@teselagen/ove 0.0.14 → 0.0.16

package/src/StatusBar/index.js

@@ -0,0 +1,275 @@
+import React from "react";
+import { Button, Classes, HTMLSelect } from "@blueprintjs/core";
+
+import {
+  connectToEditor,
+  updateCircular,
+  handleInverse,
+  getShowGCContent
+} from "../withEditorProps";
+import "./style.css";
+import { withHandlers, compose } from "recompose";
+import { divideBy3 } from "../utils/proteinUtils";
+import { getSelectionMessage } from "../utils/editorUtils";
+import useMeltingTemp from "../utils/useMeltingTemp";
+import MeltingTemp from "./MeltingTemp";
+import { getSequenceWithinRange } from "@teselagen/range-utils";
+
+const EditReadOnlyItem = connectToEditor(({ readOnly }) => ({
+  readOnly
+}))(
+  ({
+    onSave,
+    readOnly,
+    showReadOnly,
+    disableSetReadOnly,
+    updateReadOnlyMode
+  }) => {
+    return showReadOnly ? (
+      <StatusBarItem dataTest="veStatusBar-readOnly">
+        {onSave ? (
+          <HTMLSelect
+            options={[
+              { label: "Read Only", value: "readOnly" },
+              { label: "Editable", value: "editable" }
+            ]}
+            disabled={disableSetReadOnly || !onSave} //the !onSave here is redundant
+            className={Classes.MINIMAL}
+            value={readOnly ? "readOnly" : "editable"}
+            onChange={({ target: { value } }) => {
+              updateReadOnlyMode(value === "readOnly");
+            }}
+          />
+        ) : readOnly ? (
+          "Read Only"
+        ) : (
+          "Editable"
+        )}
+      </StatusBarItem>
+    ) : null;
+  }
+);
+
+const ShowSelectionItem = compose(
+  connectToEditor(
+    (
+      { selectionLayer, caretPosition, sequenceData = { sequence: "" } },
+      ownProps,
+      ...rest
+    ) => {
+      return {
+        showGCContent: getShowGCContent(rest[rest.length - 1], ownProps),
+        selectionLayer,
+        isProtein: sequenceData.isProtein,
+        caretPosition,
+        sequenceLength: sequenceData.sequence.length,
+        sequenceData
+      };
+    }
+  ),
+  withHandlers({ handleInverse })
+)(
+  ({
+    selectionLayer = { start: -1, end: -1 },
+    caretPosition = -1,
+    sequenceLength = 0,
+    isProtein,
+    sequenceData = { sequence: "" },
+    showGCContent,
+    GCDecimalDigits,
+    handleInverse
+  }) => {
+    const [showMeltingTemp] = useMeltingTemp();
+
+    const sequence = getSequenceWithinRange(
+      selectionLayer,
+      sequenceData.sequence
+    );
+
+    return (
+      <React.Fragment>
+        <StatusBarItem dataTest="veStatusBar-selection">
+          {getSelectionMessage({
+            caretPosition,
+            selectionLayer,
+            sequenceLength,
+            sequenceData,
+            showGCContent,
+
+            GCDecimalDigits,
+            isProtein
+          })}
+
+          <Button
+            minimal
+            disabled={sequenceLength <= 0}
+            onClick={handleInverse}
+            style={{ marginLeft: 5, color: "#48AFF0" }}
+            small
+          >
+            Select Inverse
+          </Button>
+        </StatusBarItem>
+        {showMeltingTemp && (
+          <MeltingTemp
+            WrapperToUse={StatusBarItem}
+            sequence={sequence}
+          ></MeltingTemp>
+        )}
+      </React.Fragment>
+    );
+  }
+);
+
+const ShowLengthItem = connectToEditor(
+  ({ sequenceData = { sequence: "" } }) => ({
+    sequenceLength: sequenceData.sequence.length
+  })
+)(({ isProtein, sequenceLength = 0 }) => (
+  <StatusBarItem dataTest="veStatusBar-length">{`Length: ${divideBy3(
+    sequenceLength,
+    isProtein
+  )} ${isProtein ? "AAs" : "bps"}`}</StatusBarItem>
+));
+
+const ShowTypeItem = connectToEditor(({ sequenceData }) => ({
+  isProtein: sequenceData.isProtein,
+  isOligo: sequenceData.isOligo,
+  isRna: sequenceData.isRna,
+  isMixedRnaAndDna: sequenceData.isMixedRnaAndDna
+}))(({ isProtein, isOligo, isRna, isMixedRnaAndDna }) => {
+  let type = "DNA";
+  if (isProtein) type = "Protein";
+  if (isRna) type = "RNA";
+  if (isOligo) type = "Oligo";
+  if (isMixedRnaAndDna) type = "Mixed RNA/DNA";
+  return <StatusBarItem dataTest="veStatusBar-type">{type}</StatusBarItem>;
+});
+
+const EditCircularityItem = compose(
+  connectToEditor(
+    ({
+      readOnly,
+      sequenceData,
+      sequenceData: { circular /* materiallyAvailable */ } = {}
+    }) => ({
+      readOnly,
+      sequenceData,
+      circular
+    })
+  ),
+  withHandlers({ updateCircular })
+)(({ readOnly, showCircularity, circular, updateCircular }) => {
+  return showCircularity ? (
+    <StatusBarItem dataTest="veStatusBar-circularity">
+      {readOnly ? (
+        circular ? (
+          "Circular"
+        ) : (
+          "Linear"
+        )
+      ) : (
+        <HTMLSelect
+          onChange={({ target: { value } }) => {
+            updateCircular(value === "circular");
+          }}
+          className={Classes.MINIMAL}
+          value={circular ? "circular" : "linear"}
+          options={[
+            { label: "Circular", value: "circular" },
+            { label: "Linear", value: "linear" }
+          ]}
+        />
+      )}
+    </StatusBarItem>
+  ) : null;
+});
+const EditAvailabilityItem = connectToEditor(
+  ({ readOnly, sequenceData: { materiallyAvailable } = {} }) => ({
+    readOnly,
+    materiallyAvailable
+  })
+)(({ readOnly, showAvailability, materiallyAvailable, updateAvailability }) => {
+  return showAvailability ? (
+    <StatusBarItem>
+      {readOnly ? (
+        materiallyAvailable ? (
+          "Available"
+        ) : (
+          "Unavailable"
+        )
+      ) : (
+        <HTMLSelect
+          onChange={({ target: { value } }) => {
+            updateAvailability(value === "available");
+          }}
+          className={Classes.MINIMAL}
+          value={materiallyAvailable ? "available" : "unavailable"}
+          options={[
+            { label: "Available", value: "available" },
+            { label: "Unavailable", value: "unavailable" }
+          ]}
+        />
+      )}
+    </StatusBarItem>
+  ) : null;
+});
+
+export function StatusBar({
+  disableSetReadOnly,
+  onSave,
+  editorName,
+  showCircularity = true,
+  showMoleculeType = true,
+  showReadOnly = true,
+  showAvailability = false,
+  showGCContentByDefault,
+  onSelectionOrCaretChanged,
+  GCDecimalDigits = 1,
+  isProtein
+}) {
+  return (
+    <div className="veStatusBar">
+      {showMoleculeType && (
+        <ShowTypeItem editorName={editorName}></ShowTypeItem>
+      )}
+      <EditReadOnlyItem
+        editorName={editorName}
+        {...{
+          onSave,
+          disableSetReadOnly,
+          showReadOnly
+        }}
+      />
+      <EditCircularityItem
+        editorName={editorName}
+        showCircularity={showCircularity}
+      />
+      <EditAvailabilityItem
+        editorName={editorName}
+        showAvailability={showAvailability}
+      />
+      <ShowSelectionItem
+        editorName={editorName}
+        isProtein={isProtein}
+        showGCContentByDefault={showGCContentByDefault}
+        onSelectionOrCaretChanged={onSelectionOrCaretChanged}
+        GCDecimalDigits={GCDecimalDigits}
+      />
+      <ShowLengthItem isProtein={isProtein} editorName={editorName} />
+    </div>
+  );
+}
+
+function StatusBarItem({ children, dataTest }) {
+  return (
+    <React.Fragment>
+      <div data-test={dataTest} className="veStatusBarItem">
+        {children}
+      </div>
+      <div className="veStatusBarSpacer" />
+    </React.Fragment>
+  );
+}
+
+export default StatusBar;

package/src/StatusBar/style.css

@@ -0,0 +1,38 @@
+.veStatusBar {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  max-height: 25px;
+  min-height: 33px;
+  overflow-x: auto;
+  background: #ebf1f5;
+}
+
+.bp3-dark .veStatusBar {
+  background: #202b33;
+}
+
+.veStatusBar::-webkit-scrollbar {
+  display: none;
+}
+
+.veStatusBarItem {
+  min-width: fit-content;
+  flex-shrink: 0;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  align-items: center;
+}
+.veStatusBarSpacer {
+  height: 100%;
+  height: stretch;
+  width: 1px;
+  min-width: 1px;
+  background: lightgrey;
+  margin-left: 3px;
+  margin-right: 3px;
+}
+.veStatusBarSpacer:last-child {
+  display: none;
+}

package/src/ToolBar/ToolbarItem.js

@@ -0,0 +1,194 @@
+import { connectToEditor } from "../withEditorProps";
+// import download from 'in-browser-download'
+import {
+  Popover,
+  Position,
+  Tooltip,
+  Icon as BpIcon,
+  AnchorButton,
+  Intent
+} from "@blueprintjs/core";
+import React from "react";
+import "./style.css";
+import { noop } from "lodash";
+
+class ToolbarItem extends React.Component {
+  toggleDropdown = ({ forceClose } = {}) => {
+    const { toolName, isOpen } = this.props;
+
+    this.props.openToolbarItemUpdate(isOpen || forceClose ? "" : toolName);
+  };
+
+  render() {
+    const { overrides = {} } = this.props;
+    const {
+      isOpen,
+      index,
+      Icon,
+      // dynamicIcon,
+      onIconClick = noop,
+      tooltip = "",
+      tooltipToggled,
+      dropdowntooltip = "",
+      Dropdown,
+      disabled,
+      isHidden,
+      renderIconAbove,
+      noDropdownIcon,
+      IconWrapper,
+      editorName,
+      popoverDisabled,
+      IconWrapperProps,
+      toolName,
+      dropdownicon,
+      tooltipDisabled,
+      toggled = false,
+      ...rest
+    } = { ...this.props, ...overrides };
+    if (!toolName) console.warn("toolName is required!");
+    if (isHidden) return null;
+    let tooltipToDisplay = tooltip;
+    if (toggled && tooltipToggled) {
+      tooltipToDisplay = tooltipToggled;
+    }
+    // const Dropdown = _DropDown && withEditorProps && withEditorProps(_DropDown);
+
+    const buttonTarget = (
+      <div
+        className={
+          `veToolbarItemOuter ve-tool-container-${toolName}` +
+          (disabled ? " disabled " : "")
+        }
+      >
+        {renderIconAbove && (
+          <div>
+            <div className="veToolbarItem">{Icon}</div>
+          </div>
+        )}
+
+        {Icon && !renderIconAbove && (
+          <Tooltip
+            disabled={tooltipDisabled}
+            portalClassName="ve-toolbar-item-popover"
+            content={tooltipToDisplay}
+          >
+            <AnchorButton
+              intent={Intent.PRIMARY}
+              onClick={
+                onIconClick === "toggleDropdown"
+                  ? this.toggleDropdown
+                  : onIconClick
+              }
+              active={toggled}
+              disabled={disabled}
+              minimal
+              icon={
+                React.isValidElement(Icon) ? (
+                  Icon
+                ) : (
+                  <Icon toggleDropdown={this.toggleDropdown} />
+                )
+              }
+            />
+          </Tooltip>
+        )}
+        {Dropdown && !noDropdownIcon ? (
+          <Tooltip disabled={tooltipDisabled} content={dropdowntooltip}>
+            <div
+              className={
+                (isOpen ? " isOpen " : "") +
+                (dropdownicon ? "" : " veToolbarDropdown")
+              }
+              onClick={this.toggleDropdown}
+            >
+              {dropdownicon ? (
+                <div className="veToolbarIcon">
+                  <div>{dropdownicon}</div>
+                </div>
+              ) : isOpen ? (
+                <BpIcon
+                  data-test={toolName + "Dropdown"}
+                  iconSize={13}
+                  icon="caret-up"
+                />
+              ) : (
+                <BpIcon
+                  data-test={toolName + "Dropdown"}
+                  iconSize={13}
+                  icon="caret-down"
+                />
+              )}
+            </div>
+          </Tooltip>
+        ) : null}
+      </div>
+    );
+    const content = (
+      <div
+        ref={(n) => {
+          if (n) this.dropdownNode = n;
+        }}
+        style={{ padding: 10, minWidth: 250, maxWidth: 350 }}
+        className="ve-toolbar-dropdown content"
+      >
+        {Dropdown && (
+          <Dropdown
+            {...rest}
+            editorName={editorName}
+            toggleDropdown={this.toggleDropdown}
+          />
+        )}
+      </div>
+    );
+    const target = IconWrapper ? (
+      <IconWrapper {...IconWrapperProps}>
+        {({ getRootProps, getInputProps }) => (
+          <div {...getRootProps()}>
+            <input {...getInputProps()} />
+            {buttonTarget}
+          </div>
+        )}
+      </IconWrapper>
+    ) : (
+      buttonTarget
+    );
+
+    return (
+      <div style={{ display: "flex", alignItems: "center" }}>
+        {index !== 0 && <div className="veToolbarSpacer" />}
+
+        <Popover
+          disabled={popoverDisabled}
+          isOpen={!!Dropdown && isOpen}
+          onClose={(e) => {
+            let srcElement;
+            if (e) {
+              srcElement = e.srcElement || e.target;
+            }
+            if (
+              e &&
+              srcElement &&
+              this.dropdownNode &&
+              (this.dropdownNode.contains(srcElement) ||
+                !document.body.contains(srcElement))
+            ) {
+              return;
+            }
+            this.toggleDropdown({ forceClose: true });
+          }}
+          canEscapeKeyClose
+          minimal
+          position={Position.BOTTOM}
+          target={target}
+          content={content}
+        />
+      </div>
+    );
+  }
+}
+
+
+
+export default connectToEditor(({ toolBar = {} }, { toolName }) => ({
+  isOpen: toolBar.openItem === toolName
+}))(ToolbarItem);