@teselagen/ove 0.0.14 → 0.0.16

package/src/DigestTool/ruler.css

@@ -0,0 +1,89 @@
+/* .managerListLadder {
+  height: 265px;
+  overflow: visible;
+  border: 1px solid #E0E0E0;
+  padding: 0 !important;
+  position: fixed;
+  width: 225px;
+}
+
+.left {
+  border-color: black;
+  position: absolute;
+  height: 5px;
+  width: 80%;
+}
+
+.right {
+  border-color: black;
+  position: absolute;
+  height: 5px;
+  width: 80%;
+}
+
+.tooltip {
+  position: absolute;
+  height: 0;
+}
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  position: absolute;
+  width: auto;
+  background-color: black;
+  color: white;
+  text-align: left;
+  padding: 5px;
+  font-size: 7pt;
+  bottom: 5px;
+  white-space: nowrap;
+  border-radius: 6px;
+}
+
+.tooltip .tooltiptext::after {
+  content: " ";
+  /* i don't know what this content attribute does, but it works... */
+/* position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: black transparent transparent transparent;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+
+.rightLabel {
+  margin-right: 2%;
+  margin-left: 60%;
+  position: relative;
+}
+
+.leftLabel {
+  margin-left: 2%;
+  margin-right: 60%;
+  position: relative;
+}
+
+.block {
+  height: 265px;
+  max-height: none;
+  padding-bottom: 40px;
+  padding-top: 10px;
+  overflow: scroll;
+}
+
+.fragmentsNumLabel {
+  text-align: left;
+  padding: 0 5px;
+  color: #333333;
+  height: 30px;
+  width: 100%;
+}
+ 
+
+
+*/

package/src/Editor/CommandHotkeyHandler.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { compose } from "redux";
+import withEditorProps from "../withEditorProps";
+import { withHotkeys } from "@teselagen/ui";
+import getCommands from "../commands";
+import {
+  getCommandHotkeys,
+  getCommandHotkeyHandlers,
+  HotkeysDialog
+} from "@teselagen/ui";
+
+class CommandHotkeyHandler extends React.Component {
+  constructor(props) {
+    super(props);
+    const commands = getCommands(this);
+    // Don't bind clipboard shortcuts (use native ones directly)
+    ["cut", "copy", "paste"].forEach((cmdId) => delete commands[cmdId]);
+    this.hotkeyDefs = getCommandHotkeys(commands);
+    this.handlers = getCommandHotkeyHandlers(commands);
+
+    this.Handler = withHotkeys(this.hotkeyDefs, this.handlers);
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        <this.Handler key="handla" />
+        <HotkeysDialog
+          dialogTitle="Editor Hotkeys"
+          key="hotkeyDialog"
+          hotkeySets={{
+            Editor: {
+              "Search File Menu": this.props.menuSearchHotkey || "cmd+/",
+              ...this.hotkeyDefs
+            }
+          }}
+          {...this.props.hotkeyDialogProps}
+        />
+      </React.Fragment>
+    );
+  }
+}
+
+export default compose(withEditorProps)(CommandHotkeyHandler);

package/src/Editor/DropHandler.css

@@ -0,0 +1,21 @@
+.dropzone-dragging-message {
+  position: absolute;
+  z-index: -1;
+  margin-left: auto;
+  margin-right: auto;
+  left: 0;
+  right: 0;
+  top: 30%;
+  width: 310px;
+  border-radius: 3px;
+  border: 7px dotted lightblue;
+  background: rgb(232, 232, 232);
+  padding: 30px;
+  font-size: 24px;
+  opacity: 0;
+  transition: 0.5s all;
+}
+.veEditor.isActive .dropzone-dragging-message {
+  z-index: 10;
+  opacity: 1;
+}

package/src/Editor/DropHandler.js

@@ -0,0 +1,64 @@
+import React from "react";
+import Dropzone from "react-dropzone";
+import classNames from "classnames";
+import "./DropHandler.css";
+
+export default class DropHandler extends React.Component {
+  handleDrop = (files) => {
+    if (!files || !files.length) {
+      return window.toastr.warning("Unrecognized File Type");
+    }
+    this.props.importSequenceFromFile(files[0]);
+  };
+  render() {
+    const { children, style, className, disabled } = this.props;
+    return (
+      <Dropzone
+        disabled={disabled}
+        onClick={(evt) => evt.preventDefault()}
+        multiple={false}
+        accept={[
+          ".gb",
+          ".gbk",
+          ".fasta",
+          ".fa",
+          ".geneious",
+          ".gp",
+          ".txt",
+          ".dna",
+          ".prot",
+          ".ab1",
+          ".json"
+        ]}
+        onDropRejected={() => {
+          window.toastr.error("Error: Incorrect File Type");
+        }}
+        onDrop={this.handleDrop}
+      >
+        {({ getRootProps, isDragActive, isDragReject }) => (
+          <div
+            {...getRootProps()}
+            {...{
+              style,
+              className: classNames(className, {
+                isActive: isDragActive,
+                isRejected: isDragReject
+              })
+            }}
+          >
+            <DraggingMessage />
+            {children}
+          </div>
+        )}
+      </Dropzone>
+    );
+  }
+}
+function DraggingMessage() {
+  return (
+    <div className="dropzone-dragging-message">
+      Drop Fasta or Genbank files to view them in the editor. The following
+      extensions are accepted: .gb .gbk .fasta .fa .gp .txt
+    </div>
+  );
+}

package/src/Editor/FillWindow.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { debounce } from "lodash";
+
+export default class FillWindow extends React.Component {
+  updateDimensions = debounce(() => {
+    if (this.props.disabled) return;
+    this.setState({ randomRerenderTrigger: Math.random() });
+  }, 100);
+
+  componentDidMount() {
+    window.addEventListener("resize", this.updateDimensions);
+  }
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.updateDimensions);
+  }
+  render() {
+    const w = window,
+      d = document,
+      e = d.documentElement,
+      g = d.getElementsByTagName("body")[0],
+      width = w.innerWidth || e.clientWidth || g.clientWidth,
+      height = w.innerHeight || e.clientHeight || g.clientHeight;
+    const windowDimensions = {
+      width,
+      height
+    };
+    const { children, disabled, style, ...rest } = this.props;
+    if (disabled) return children(windowDimensions);
+    return (
+      <div
+        {...rest}
+        style={{
+          width,
+          height,
+          position: "fixed",
+          top: 0,
+          left: 0,
+          background: "white",
+          ...style
+        }}
+      >
+        {children(windowDimensions)}
+      </div>
+    );
+  }
+}

package/src/Editor/darkmode.css

@@ -0,0 +1,98 @@
+.bp3-dark .veAxisLine {
+  stroke: #f5f8fa !important;
+}
+.bp3-dark .veAxisTick,
+.bp3-dark .veCutsite {
+  fill: #f5f8fa;
+}
+
+.bp3-dark .veEditor:not(.tg-simple-dna-view) {
+  background: #293742 !important;
+}
+
+.veLabelLine {
+  stroke: black;
+  background: black;
+}
+.bp3-dark .veCaret,
+.bp3-dark .veLabelLine {
+  stroke: white;
+  background: white;
+}
+.bp3-dark .veLabelLine {
+  stroke: #f5f8fa !important;
+  background: #f5f8fa !important;
+}
+
+.bp3-dark .veEditor .veRowViewCaret {
+  background: #f5f8fa !important;
+}
+
+.bp3-dark .veEditor text {
+  fill: #f5f8fa;
+}
+
+.bp3-dark .veRowViewPartsContainer text,
+.bp3-dark .veLabelText.black {
+  fill: #f5f8fa !important;
+}
+
+.bp3-dark .tag-selection.selected {
+  border-color: #f5f8fa !important;
+}
+
+.bp3-dark .veLinearView text {
+  fill: #f5f8fa !important;
+}
+.bp3-dark .veCircularViewAxisNumber rect {
+  fill: #f5f8fa !important;
+}
+
+.bp3-dark .menu-bar {
+  background: none !important;
+}
+
+.alignmentViewTrackContainer {
+  background: white;
+}
+.bp3-dark .alignmentViewTrackContainer {
+  background: #293742;
+}
+.bp3-dark .alignmentViewTrackContainer text {
+  fill: #f5f8fa !important;
+}
+
+/* .bp3-dark .veRowViewAxis text {
+  stroke: #f5f8fa !important;
+} */
+
+.bp3-dark .translationLayer text {
+  fill: black !important;
+}
+
+.bp3-dark .step-group.active .step-text {
+  color: #2b95d6 !important;
+}
+
+.bp3-dark .step-group.active .step-mark {
+  background-color: #2b95d6 !important;
+  border-color: #2b95d6 !important;
+}
+
+.bp3-dark .tool-select-item:hover {
+  background: #0e5a8a !important;
+}
+
+.bp3-dark .veWhiteBackground {
+  background: #293742;
+}
+
+.bp3-dark .vePart path:first-of-type {
+  stroke-width: 1;
+  stroke: #df7ff1 !important;
+}
+
+.bp3-dark .vePart .veLabelText,
+.bp3-dark .veLabelText.vePart {
+  fill: #ac68cc !important;
+}