@teselagen/ove 0.0.14 → 0.0.16

package/src/ToolBar/importTool.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { Icon } from "@blueprintjs/core";
+import Dropzone from "react-dropzone";
+import ToolbarItem from "./ToolbarItem";
+import { compose, withHandlers } from "recompose";
+import { importSequenceFromFile, connectToEditor } from "../withEditorProps";
+
+export default compose(
+  connectToEditor(),
+  withHandlers({ importSequenceFromFile })
+)(({ toolbarItemProps, importSequenceFromFile }) => {
+  return (
+    <ToolbarItem
+      {...{
+        Icon: <Icon data-test="veImportTool" icon="export" />,
+        IconWrapper: Dropzone,
+        IconWrapperProps: {
+          multiple: false,
+          style: {},
+          onDrop: (files) => importSequenceFromFile(files[0])
+        },
+        tooltip: "Click or drag to import and view files (.fasta .gb .dna)",
+        ...toolbarItemProps
+      }}
+    />
+  );
+});

package/src/ToolBar/index.js

@@ -0,0 +1,231 @@
+import React from "react";
+import { flatMap, isString, pick } from "lodash";
+import versionHistoryTool from "./versionHistoryTool";
+// import {connectToEditor} from "../withEditorProps";
+import MenuBar from "../MenuBar";
+import "./style.css";
+import { Button, Tooltip } from "@blueprintjs/core";
+
+import downloadTool from "./downloadTool";
+import importTool from "./importTool";
+import cutsiteTool from "./cutsiteTool";
+import featureTool from "./featureTool";
+import partTool from "./partTool";
+import oligoTool from "./oligoTool";
+import orfTool from "./orfTool";
+import editTool from "./editTool";
+import findTool from "./findTool";
+import inlineFindTool from "./inlineFindTool";
+import alignmentTool from "./alignmentTool";
+import saveTool from "./saveTool";
+import visibilityTool from "./visibilityTool";
+import undoTool from "./undoTool";
+import redoTool from "./redoTool";
+import isMobile from "is-mobile";
+import { useMemo } from "react";
+
+const allTools = {
+  downloadTool,
+  importTool,
+  cutsiteTool,
+  alignmentTool,
+  featureTool,
+  partTool,
+  oligoTool,
+  orfTool,
+  editTool,
+  findTool,
+  inlineFindTool,
+  versionHistoryTool,
+  saveTool,
+  visibilityTool,
+  undoTool,
+  redoTool
+};
+
+export function ToolBar(props) {
+  const {
+    modifyTools,
+    contentLeft,
+    showMenuBar,
+    displayMenuBarAboveTools,
+    isProtein,
+    openHotkeyDialog,
+    onSave,
+    userDefinedHandlersAndOpts,
+    editorName,
+    annotationsToSupport,
+    handleFullscreenClose,
+    closeFullscreen,
+    additionalTopRightToolbarButtons,
+    toolList = defaultToolList,
+    ...rest
+  } = props;
+  const userDefinedProps = {
+    ...pick(props, userDefinedHandlersAndOpts)
+  };
+
+  const toolListToUse = useMemo(() => {
+    return flatMap(toolList, (toolNameOrOverrides) => {
+      let toolName;
+      let toolOverride;
+      if (isString(toolNameOrOverrides)) {
+        toolName = toolNameOrOverrides;
+      } else {
+        toolOverride = toolNameOrOverrides;
+        toolName = toolNameOrOverrides.name;
+      }
+
+      if (
+        toolName === "oligoTool" &&
+        annotationsToSupport &&
+        annotationsToSupport.primers === false
+      )
+        return [];
+
+      const Tool = toolOverride
+        ? allTools[toolOverride.name]
+        : allTools[toolName];
+      if (!Tool) {
+        console.error(
+          "You're trying to load a tool that doesn't appear to exist: " +
+            toolName
+        );
+        return [];
+      }
+
+      if (isProtein) {
+        if (
+          toolName === "cutsiteTool" ||
+          toolName === "orfTool" ||
+          toolName === "alignmentTool"
+        ) {
+          return [];
+        }
+      }
+      if (toolName === "saveTool" && !onSave) {
+        return [];
+      } //don't show the option to save if no onSave handler is passed
+
+      return { toolName, toolOverride, Tool };
+    });
+  }, [toolList, annotationsToSupport, isProtein, onSave]);
+
+  let items = flatMap(
+    toolListToUse,
+    ({ toolName, toolOverride, Tool }, index) => {
+      if (!Tool) return [];
+      return (
+        <Tool
+          {...rest}
+          {...userDefinedProps}
+          toolbarItemProps={{
+            ...userDefinedProps,
+            index,
+            toolName,
+            editorName,
+            ...toolOverride
+          }}
+          editorName={editorName}
+          key={toolName}
+        />
+      );
+    }
+  );
+
+  if (modifyTools) {
+    items = modifyTools(items);
+  }
+
+  return (
+    <div className="veToolbar-outer" style={{ display: "flex" }}>
+      {contentLeft}
+      <div
+        style={{
+          ...(displayMenuBarAboveTools && showMenuBar
+            ? {
+                display: "flex",
+                width: "100%",
+                flexDirection: "column",
+                alignItems: "flex-start"
+              }
+            : {
+                display: "flex",
+                width: "100%",
+                justifyContent: "center",
+                flexWrap: "wrap"
+              })
+        }}
+        className="veToolbar"
+      >
+        {showMenuBar && (
+          <MenuBar
+            openHotkeyDialog={openHotkeyDialog}
+            {...userDefinedProps}
+            onSave={onSave} //needs to be passed so that editor commands will have it
+            style={{ marginLeft: 0 }}
+            editorName={editorName}
+          />
+        )}
+        {displayMenuBarAboveTools && showMenuBar ? (
+          <div
+            className="veTools-displayMenuBarAboveTools"
+            style={{
+              display: "flex",
+              paddingLeft: 15,
+              paddingRight: 15,
+              flexWrap: "wrap",
+              ...(isMobile() && {
+                overflow: "auto",
+                flexWrap: "nowrap",
+                width: "100%"
+              })
+              // width: "100%"
+            }}
+          >
+            {items}
+          </div>
+        ) : (
+          items
+        )}
+      </div>
+      {additionalTopRightToolbarButtons}
+      {closeFullscreen && (
+        <CloseFullscreenButton onClick={handleFullscreenClose} />
+      )}
+    </div>
+  );
+}
+const CloseFullscreenButton = (props) => {
+  return (
+    <Tooltip content="Close Fullscreen Mode">
+      <Button
+        minimal
+        style={{
+          marginTop: 2,
+          marginRight: 2
+        }}
+        onClick={props.onClick}
+        className="ve-close-fullscreen-button"
+        icon="minimize"
+      />
+    </Tooltip>
+  );
+};
+
+const defaultToolList = [
+  "saveTool",
+  "downloadTool",
+  "importTool",
+  "undoTool",
+  "redoTool",
+  "cutsiteTool",
+  "featureTool",
+  "partTool",
+  "oligoTool",
+  "orfTool",
+  "alignmentTool",
+  "editTool",
+  "findTool",
+  "visibilityTool"
+];

package/src/ToolBar/inlineFindTool.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { Icon } from "@blueprintjs/core";
+import FindBar from "../FindBar";
+import ToolbarItem from "./ToolbarItem";
+import { connectToEditor } from "../withEditorProps";
+
+export default connectToEditor(({ findTool = {} }) => {
+  return {
+    isOpen: findTool.isOpen
+  };
+})(({ toolbarItemProps, editorName, toggleFindTool, isOpen }) => {
+  return (
+    <ToolbarItem
+      {...{
+        Icon: !isOpen ? (
+          <div>
+            <Icon data-test="ve-find-tool-toggle" icon="search" />
+            <Icon icon="caret-right" />
+          </div>
+        ) : (
+          <FindBar editorName={editorName} />
+        ),
+        renderIconAbove: isOpen,
+        onIconClick: toggleFindTool,
+        tooltip: isOpen ? (
+          <span>
+            Hide Find Tool <span style={{ fontSize: 10 }}>(Cmd/Ctrl+F)</span>
+          </span>
+        ) : (
+          <span>
+            Show Find Tool <span style={{ fontSize: 10 }}>(Cmd/Ctrl+F)</span>
+          </span>
+        ),
+        ...toolbarItemProps
+      }}
+    />
+  );
+});

package/src/ToolBar/oligoTool.js

@@ -0,0 +1,30 @@
+import { Icon } from "@blueprintjs/core";
+import React from "react";
+import ToolbarItem from "./ToolbarItem";
+import { connectToEditor } from "../withEditorProps";
+
+export default connectToEditor(editorState => {
+  return {
+    isHidden: editorState.sequenceData && editorState.sequenceData.isProtein,
+
+    toggled:
+      editorState.annotationVisibility &&
+      editorState.annotationVisibility.primers
+  };
+})(({ toolbarItemProps, isHidden, toggled, annotationVisibilityToggle }) => {
+  return (
+    <ToolbarItem
+      {...{
+        Icon: <Icon icon="swap-horizontal" />,
+        onIconClick: function() {
+          annotationVisibilityToggle("primers");
+        },
+        isHidden,
+        toggled,
+        tooltip: "Show Primers",
+        tooltipToggled: "Hide Primers",
+        ...toolbarItemProps
+      }}
+    />
+  );
+});

package/src/ToolBar/orfTool.js

@@ -0,0 +1,141 @@
+import { Icon } from "@blueprintjs/core";
+import React from "react";
+import {
+  orfIcon,
+  CmdCheckbox,
+  CmdDiv,
+  InfoHelper
+} from "@teselagen/ui";
+import ToolbarItem from "./ToolbarItem";
+import { connectToEditor } from "../withEditorProps";
+import withEditorProps from "../withEditorProps";
+import getCommands from "../commands";
+
+export default connectToEditor(
+  ({ annotationVisibility = {}, toolBar = {} }) => {
+    return {
+      toggled: annotationVisibility.orfs,
+      isOpen: toolBar.openItem === "orfTool"
+    };
+  }
+)(({ toolbarItemProps, toggled, annotationVisibilityToggle, isOpen }) => {
+  return (
+    <ToolbarItem
+      {...{
+        Icon: <Icon data-test="orfTool" icon={orfIcon} />,
+        onIconClick: function () {
+          annotationVisibilityToggle("orfs");
+        },
+        toggled,
+        tooltip: "Show Open Reading Frames",
+        tooltipToggled: "Hide Open Reading Frames",
+        Dropdown: OrfToolDropdown,
+        dropdowntooltip:
+          (!isOpen ? "Show" : "Hide") + " Open Reading Frame Options",
+        ...toolbarItemProps
+      }}
+    />
+  );
+});
+
+const OrfToolDropdown = withEditorProps(
+  class OrfDropdown extends React.Component {
+    constructor(props) {
+      super(props);
+      this.commands = getCommands(this);
+    }
+    render() {
+      return (
+        <div className="veToolbarOrfOptionsHolder">
+          <CmdCheckbox
+            prefix="Show "
+            cmd={this.commands.toggleOrfTranslations}
+          />
+          <CmdCheckbox
+            prefix="Show "
+            cmd={this.commands.useGtgAndCtgAsStartCodons}
+          />
+          <CmdDiv cmd={this.commands.minOrfSizeCmd} />
+          <div className="vespacer" />
+
+          <InfoHelper
+            displayToSide
+            content="To translate an arbitrary area, right click a selection."
+          />
+        </div>
+      );
+    }
+  }
+);
+// const OrfToolDropdown = withEditorProps(function({
+//   useAdditionalOrfStartCodons,
+//   useAdditionalOrfStartCodonsToggle,
+//   annotationVisibility,
+//   annotationVisibilityToggle,
+//   editorName
+// }) {
+//   return (
+//     <div className="veToolbarOrfOptionsHolder">
+//       {/* <div className="vespacer" />
+//       <MinOrfSize editorName={editorName} />
+//       <Checkbox
+//         onChange={function() {
+//           annotationVisibilityToggle("orfTranslations");
+//         }}
+//         disabled={!annotationVisibility.orfs}
+//         checked={annotationVisibility.orfTranslations}
+//         label="Show translations for ORFs"
+//       />
+//       <Checkbox
+//         onChange={function() {
+//           annotationVisibilityToggle("cdsFeatureTranslations");
+//         }}
+//         checked={annotationVisibility.cdsFeatureTranslations}
+//         label="Show translations for CDS features"
+//       />
+//       <Checkbox
+//         onChange={useAdditionalOrfStartCodonsToggle}
+//         checked={useAdditionalOrfStartCodons}
+//         label="Use GTG and CTG as start codons"
+//       /> */}
+//       <div className="vespacer" />
+
+//       <InfoHelper
+//         displayToSide
+//         content="To translate an arbitrary area, right click a selection."
+//       />
+//     </div>
+//   );
+// });
+
+// export const MinOrfSize = connectToEditor(editorState => {
+//   return {
+//     sequenceLength: selectors.sequenceLengthSelector(editorState),
+//     minimumOrfSize: editorState.minimumOrfSize
+//   };
+// })(
+//   ({
+//     minimumOrfSizeUpdate,
+//     sequenceLength,
+//     annotationVisibilityShow,
+//     minimumOrfSize
+//   }) => {
+//     return (
+//       <div data-test="min-orf-size" style={{ display: "flex" }}>
+//         Minimum ORF Size:
+//         <input
+//           type="number"
+//           className={classNames(Classes.INPUT, "minOrfSizeInput")}
+//           onChange={function(event) {
+//             let minimumOrfSize = parseInt(event.target.value, 10);
+//             if (!(minimumOrfSize > -1)) return;
+//             if (minimumOrfSize > sequenceLength) return;
+//             annotationVisibilityShow("orfs");
+//             minimumOrfSizeUpdate(minimumOrfSize);
+//           }}
+//           value={minimumOrfSize}
+//         />
+//       </div>
+//     );
+//   }
+// );

package/src/ToolBar/partTool.js

@@ -0,0 +1,47 @@
+import { Icon } from "@blueprintjs/core";
+// import { Checkbox, Button } from "@blueprintjs/core";
+import React from "react";
+// import { connect } from "react-redux";
+// import { convertRangeTo1Based } from "@teselagen/range-utils";
+//import { partIcon } from "@teselagen/ui";
+import ToolbarItem from "./ToolbarItem";
+import { connectToEditor } from "../withEditorProps";
+import { PartTagSearch } from "../helperComponents/partTagSearch";
+
+export default connectToEditor(
+  ({ annotationVisibility = {}, toolBar = {} }) => {
+    return {
+      toggled: annotationVisibility.parts,
+      isOpen: toolBar.openItem === "partTool"
+    };
+  }
+)(
+  ({
+    allPartTags,
+    editTagsLink,
+    toolbarItemProps,
+    toggled,
+    annotationVisibilityToggle,
+    isOpen
+  }) => {
+    return (
+      <ToolbarItem
+        {...{
+          Icon: <Icon icon="doughnut-chart" />,
+          onIconClick: function () {
+            annotationVisibilityToggle("parts");
+          },
+          toggled,
+          editTagsLink,
+          allPartTags,
+          tooltip: "Show parts",
+          tooltipToggled: "Hide parts",
+          noDropdownIcon: !allPartTags,
+          Dropdown: PartTagSearch,
+          dropdowntooltip: (!isOpen ? "Show" : "Hide") + " Part Options",
+          ...toolbarItemProps
+        }}
+      />
+    );
+  }
+);

package/src/ToolBar/printTool.js

@@ -0,0 +1,31 @@
+//TNRTODO this needs to be fixed and implemented 
+import React from "react";
+import print from "./veToolbarIcons/print.png";
+
+export default () => {
+  return {
+    Icon: <img src={print} alt="Print Vector" />,
+    onIconClick: function() {
+      // var myPrintContent = document.getElementById('printdiv');
+      // var myPrintWindow = window.open(windowUrl, windowName, 'left=300,top=100,width=400,height=400');
+      // myPrintWindow.document.write(myPrintContent.innerHTML);
+      // myPrintWindow.document.getElementById('hidden_div').style.display='block'
+      // myPrintWindow.document.close();
+      // myPrintWindow.focus();
+      // myPrintWindow.print();
+      // myPrintWindow.close();
+      // return false;
+      // print();
+      // var content = document.getElementById("divcontents");
+      // document.appendChild(con)
+      // var pri = document.getElementById("ifmcontentstoprint").contentWindow;
+      // pri.document.open();
+      // pri.document.write(content.innerHTML);
+      // pri.document.close();
+      // pri.focus();
+      // pri.print();
+      // downloadSequenceData(sequenceData || )
+    },
+    tooltip: "Print Vector"
+  };
+};

package/src/ToolBar/redoTool.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { Icon } from "@blueprintjs/core";
+import ToolbarItem from "./ToolbarItem";
+import { connectToEditor } from "../withEditorProps";
+
+export default connectToEditor(editorState => {
+  return {
+    disabled: !(
+      editorState.sequenceDataHistory &&
+      editorState.sequenceDataHistory.future &&
+      editorState.sequenceDataHistory.future.length
+    )
+  };
+})(({ toolbarItemProps, redo, disabled }) => {
+  return (
+    <ToolbarItem
+      {...{
+        Icon: <Icon data-test="veRedoTool" icon="redo" />,
+        disabled,
+        onIconClick: redo,
+        tooltip: (
+          <span>
+            Redo <span style={{ fontSize: 10 }}>(Cmd/Ctrl+Shift+Z)</span>
+          </span>
+        ),
+        ...toolbarItemProps
+      }}
+    />
+  );
+});

package/src/ToolBar/saveTool.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { Icon } from "@blueprintjs/core";
+import ToolbarItem from "./ToolbarItem";
+import { connectToEditor, handleSave } from "../withEditorProps";
+import { withHandlers } from "recompose";
+import { compose } from "redux";
+
+export default compose(
+  connectToEditor(
+    ({ readOnly, sequenceData = {}, lastSavedId = "134%!@#%!@#%!@%" }) => {
+      return {
+        readOnly: readOnly,
+        sequenceData: sequenceData,
+        hasBeenSaved:
+          sequenceData.stateTrackingId === "initialLoadId" ||
+          sequenceData.stateTrackingId === lastSavedId
+      };
+    }
+  ),
+  withHandlers({ handleSave })
+)(
+  ({
+    toolbarItemProps,
+    alwaysAllowSave,
+    handleSave,
+    readOnly,
+    hasBeenSaved,
+    onSave
+  }) => {
+    return (
+      <ToolbarItem
+        {...{
+          Icon: <Icon data-test="saveTool" icon="floppy-disk" />,
+          onIconClick: handleSave,
+          disabled: alwaysAllowSave
+            ? false
+            : !onSave || hasBeenSaved || readOnly,
+          tooltip: (
+            <span>
+              Save <span style={{ fontSize: 10 }}>(Cmd/Ctrl+S)</span>
+            </span>
+          ),
+          ...toolbarItemProps
+        }}
+      />
+    );
+  }
+);