@teselagen/ove 0.0.14 → 0.0.16

package/src/helperComponents/PrintDialog/index.js

@@ -0,0 +1,396 @@
+import React from "react";
+import { findDOMNode } from "react-dom";
+import PropTypes from "prop-types";
+
+import { reduxForm } from "redux-form";
+
+import { wrapDialog } from "@teselagen/ui";
+import { compose } from "redux";
+import { Button, Classes, ButtonGroup } from "@blueprintjs/core";
+import classNames from "classnames";
+
+import withEditorProps from "../../withEditorProps";
+import CircularView from "../../CircularView";
+import LinearView from "../../LinearView";
+import "./style.css";
+
+class PrintDialog extends React.Component {
+  state = {
+    circular: null
+  };
+  render() {
+    const {
+      hideModal,
+      hideLinearCircularToggle,
+      hidePrintButton,
+      addPaddingBottom,
+      sequenceData,
+      // handleSubmit,
+      editorName
+      // circular,
+      // upsertFeature
+    } = this.props;
+    // const sequenceLength = sequenceData.sequence.length;
+    let isCirc = sequenceData.circular;
+
+    if (this.state.circular !== null) {
+      isCirc = this.state.circular;
+    }
+    return (
+      <div
+        style={addPaddingBottom ? { paddingBottom: 20 } : {}}
+        className={classNames(Classes.DIALOG_BODY, "tg-min-width-dialog")}
+      >
+        {!hideLinearCircularToggle && (
+          <div style={{ display: "flex", justifyContent: "center" }}>
+            <ButtonGroup>
+              <Button
+                onClick={() => {
+                  this.setState({ circular: true });
+                }}
+                active={isCirc}
+              >
+                Circular
+              </Button>
+              <Button
+                onClick={() => {
+                  this.setState({ circular: false });
+                }}
+                active={!isCirc}
+              >
+                Linear
+              </Button>
+            </ButtonGroup>
+          </div>
+        )}
+        <br />
+        <ComponentToPrint
+          fullscreen={this.state && this.state.fullscreen}
+          circular={isCirc}
+          editorName={editorName || "StandaloneEditor"}
+          ref={(el) => (this.componentRef = el)}
+        />
+        <br />
+        {!hidePrintButton && (
+          <div style={{ display: "flex", justifyContent: "flex-end" }}>
+            <ReactToPrint
+              trigger={() => <Button intent="primary">Print</Button>}
+              content={() => this.componentRef}
+              onBeforePrint={() => {
+                this.setState({ fullscreen: true });
+              }}
+              bodyClass="ve-print"
+              // printPreview
+              pageStyle={`@page { size: auto;  margin: 0mm; } @media print {
+              body {
+                 -webkit-print-color-adjust: exact; page-break-after: always;
+              } }`}
+              ignoreLinks //needed because some css is linked to but is not loading..
+              onAfterPrint={() => {
+                this.setState({ fullscreen: false });
+                hideModal();
+              }}
+            />
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+export default compose(
+  wrapDialog({
+    title: "Print"
+  }),
+  withEditorProps,
+  reduxForm({
+    form: "PrintDialog"
+  })
+)(PrintDialog);
+
+class ReactToPrint extends React.Component {
+  static propTypes = {
+    /** Preview the print without actually triggering the print dialog */
+    printPreview: PropTypes.bool,
+    /** Copy styles over into print window. default: true */
+    copyStyles: PropTypes.bool,
+    /** Ignore link styles. Necessary because sometime links don't load.., default: false */
+    ignoreLinks: PropTypes.bool,
+    /** Trigger action used to open browser print */
+    trigger: PropTypes.func.isRequired,
+    /** Content to be printed */
+    content: PropTypes.func.isRequired,
+    /** Callback function to trigger before print */
+    onBeforePrint: PropTypes.func,
+    /** Callback function to trigger after print */
+    onAfterPrint: PropTypes.func,
+    /** Override default print window styling */
+    pageStyle: PropTypes.string,
+    /** Optional class to pass to the print window body */
+    bodyClass: PropTypes.string
+  };
+
+  static defaultProps = {
+    copyStyles: true,
+    closeAfterPrint: true,
+    bodyClass: ""
+  };
+
+  triggerPrint(target, noRemove) {
+    const { onBeforePrint, onAfterPrint } = this.props;
+
+    if (onBeforePrint) {
+      onBeforePrint();
+    }
+
+    setTimeout(() => {
+      target.contentWindow.focus();
+      target.contentWindow.print();
+      !noRemove && this.removeWindow(target);
+
+      if (onAfterPrint) {
+        onAfterPrint();
+      }
+    }, 500);
+  }
+
+  removeWindow(targets) {
+    targets &&
+      setTimeout(() => {
+        (Array.isArray(targets) ? targets : [targets]).forEach((target) => {
+          target.parentNode.removeChild(target);
+        });
+      }, 500);
+  }
+
+  startPrint = () => {
+    const {
+      bodyClass,
+      content,
+      copyStyles,
+      ignoreLinks,
+      pageStyle,
+      // bodyStyle = {},
+      printPreview
+    } = this.props;
+
+    const contentEl = content();
+
+    if (contentEl === undefined) {
+      console.error(
+        "Refs are not available for stateless components. For 'react-to-print' to work only Class based components can be printed"
+      );
+      return false;
+    }
+    const printWindow = document.createElement("iframe");
+
+    if (printPreview) {
+      const printOutline = document.createElement("div");
+      const closeButton = document.createElement("button");
+      const printButton = document.createElement("button");
+      const elsToRemoveFromDomEventually = [
+        printWindow,
+        printOutline,
+        closeButton,
+        printButton
+      ];
+
+      printOutline.style.position = "absolute";
+      printOutline.style.top = "0px";
+      printOutline.style.left = "0px";
+      printOutline.style.width = "1210px";
+      printOutline.style.height = "1056px";
+      printOutline.style.background = "grey";
+      printOutline.style.zIndex = 100000300;
+      document.body.appendChild(printOutline);
+      printButton.style.position = "absolute";
+      printButton.style.top = "0px";
+      printButton.style.left = "0px";
+      printButton.style.width = "100px";
+      printButton.style.background = "lightblue";
+      printButton.innerText = "print";
+      printButton.onclick = () => {
+        this.triggerPrint(printWindow, true);
+      };
+      printButton.style.zIndex = 100000500;
+      document.body.appendChild(printButton);
+
+      closeButton.style.position = "absolute";
+      closeButton.style.top = "0px";
+      closeButton.style.left = "250px";
+      closeButton.style.width = "100px";
+      closeButton.style.background = "lightblue";
+      closeButton.innerText = "close";
+      closeButton.onclick = () => {
+        this.removeWindow(elsToRemoveFromDomEventually);
+      };
+      closeButton.style.zIndex = 100000500;
+      document.body.appendChild(closeButton);
+    }
+
+    // printWindow.style.height = height
+    // printWindow.style.width = width
+
+    // todo: find the max height/width of the print window and fit it to that!
+
+    // if (printPreview)  defaultPageStyle += " "
+
+    const contentNodes = findDOMNode(contentEl);
+    const linkNodes = document.querySelectorAll('link[rel="stylesheet"]');
+
+    this.linkTotal = linkNodes.length || 0;
+    this.linkLoaded = 0;
+
+    const markLoaded = () => {
+      this.linkLoaded++;
+      if (this.linkLoaded === this.linkTotal) {
+        if (printPreview) {
+          return;
+        }
+        this.triggerPrint(printWindow);
+      }
+    };
+
+    printWindow.onload = () => {
+      /* IE11 support */
+      if (
+        window.navigator &&
+        window.navigator.userAgent.indexOf("Trident/7.0") > -1
+      ) {
+        printWindow.onload = null;
+      }
+      const domDoc =
+        printWindow.contentDocument || printWindow.contentWindow.document;
+      const srcCanvasEls = [...contentNodes.querySelectorAll("canvas")];
+
+      domDoc.open();
+      domDoc.write(contentNodes.outerHTML);
+      domDoc.close();
+
+      printWindow.style.position = "absolute";
+      // printWindow.style.width = "100%";
+      // printWindow.style.height = "100%";
+      printWindow.style.top = "-1000px";
+      printWindow.style.left = "-1000px";
+      printWindow.style.width = domDoc.body.scrollWidth + "px";
+
+      printWindow.style.height = domDoc.body.scrollHeight + "px";
+
+      if (printPreview) {
+        printWindow.style.top = "0px";
+        printWindow.style.left = "0px";
+        printWindow.style.width = "1210px";
+        printWindow.style.height = "1056px";
+
+        printWindow.style.background = "white";
+
+        printWindow.style.zIndex = 100000400;
+      }
+
+      /* remove date/time from top */
+      const defaultPageStyle =
+        pageStyle === undefined
+          ? `@page { size: auto;  margin: 0mm; } @media print { body { -webkit-print-color-adjust: exact;} }`
+          : pageStyle;
+
+      const styleEl = domDoc.createElement("style");
+      styleEl.appendChild(domDoc.createTextNode(defaultPageStyle));
+      domDoc.head.appendChild(styleEl);
+
+      // domDoc.body.style.transform = ""
+      if (bodyClass.length) {
+        domDoc.body.classList.add(bodyClass);
+      }
+
+      try {
+        const canvasEls = domDoc.querySelectorAll("canvas");
+        [...canvasEls].forEach((node, index) => {
+          if (node.getContext) {
+            node.getContext("2d").drawImage(srcCanvasEls[index], 0, 0);
+          }
+        });
+      } catch (e) {
+        console.warn(
+          "An error occurred trying to get the canvas elements for printing:"
+        );
+        console.warn(`gg2g20011 error:`, e);
+      }
+
+      if (copyStyles !== false) {
+        const headEls = document.querySelectorAll(
+          'style, link[rel="stylesheet"]'
+        );
+
+        [...headEls].forEach((node, index) => {
+          const newHeadEl = domDoc.createElement(node.tagName);
+          let styleCSS = "";
+
+          if (node.tagName === "STYLE") {
+            if (node.sheet) {
+              for (let i = 0; i < node.sheet.cssRules.length; i++) {
+                styleCSS += node.sheet.cssRules[i].cssText + "\r\n";
+              }
+
+              newHeadEl.setAttribute("id", `react-to-print-${index}`);
+              newHeadEl.appendChild(domDoc.createTextNode(styleCSS));
+            }
+          } else {
+            const attributes = [...(node.attributes || [])];
+            attributes.forEach((attr) => {
+              newHeadEl.setAttribute(attr.nodeName, attr.nodeValue);
+            });
+
+            newHeadEl.readystatechange = markLoaded.bind(null, "link");
+            newHeadEl.onload = markLoaded.bind(null, "link");
+            newHeadEl.onerror = markLoaded.bind(null, "link");
+          }
+
+          domDoc.head.appendChild(newHeadEl);
+        });
+      }
+      if (this.linkTotal === 0 || copyStyles === false || ignoreLinks) {
+        if (printPreview) {
+          return;
+        }
+        this.triggerPrint(printWindow);
+      }
+    };
+
+    document.body.appendChild(printWindow);
+  };
+
+  render() {
+    return React.cloneElement(this.props.trigger(), {
+      ref: (el) => (this.triggerRef = el),
+      onClick: this.startPrint
+    });
+  }
+}
+
+class ComponentToPrint extends React.Component {
+  // componentDidMount() {
+  //   let ctx = this.canvasEl.getContext("2d");
+  //   ctx.beginPath();
+  //   ctx.arc(95, 50, 40, 0, 2 * Math.PI);
+  //   ctx.stroke();
+  // }
+
+  render() {
+    const { editorName, circular } = this.props;
+
+    // let 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 width =  670;
+    // const height = 900;
+    return circular ? (
+      <CircularView noWarnings noInteractions editorName={editorName} />
+    ) : (
+      <LinearView noWarnings noInteractions editorName={editorName} />
+    );
+  }
+}

package/src/helperComponents/PrintDialog/style.css

@@ -0,0 +1,4 @@
+.ve-print {
+  height: fit-content !important;
+  transform: scale(2.3) translateX(34%) translateY(32%);
+}

package/src/helperComponents/PropertiesDialog/ColorPicker.js

@@ -0,0 +1,30 @@
+import React from "react";
+
+export default class ColorPicker extends React.Component {
+  render() {
+    const { onColorSelect } = this.props;
+    return (
+      <div style={{ display: "flex", padding: 20, maxWidth: 300 }}>
+        {["red", "blue", "green", "yellow", "pink"].map(color => {
+          const isSelected = color === "blue";
+          return (
+            <div
+              onClick={() => {
+                onColorSelect(color);
+              }}
+              key={color}
+              style={{
+                margin: 10,
+                height: 20,
+                width: 20,
+                padding: 3,
+                background: color,
+                ...(isSelected && { border: "1px solid black" })
+              }}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+}

package/src/helperComponents/PropertiesDialog/CutsiteProperties.js

@@ -0,0 +1,185 @@
+import React from "react";
+import {
+  DataTable,
+  withSelectedEntities,
+  createCommandMenu
+} from "@teselagen/ui";
+import { map, get } from "lodash";
+import CutsiteFilter from "../../CutsiteFilter";
+import { Button, ButtonGroup } from "@blueprintjs/core";
+import { connectToEditor } from "../../withEditorProps";
+import { compose } from "recompose";
+import selectors from "../../selectors";
+import commands from "../../commands";
+import { userDefinedHandlersAndOpts } from "../../Editor/userDefinedHandlersAndOpts";
+import { pick } from "lodash";
+import SingleEnzymeCutsiteInfo from "./SingleEnzymeCutsiteInfo";
+import { withRestrictionEnzymes } from "../../CutsiteFilter/withRestrictionEnzymes";
+import { cutsitesSubmenu } from "../../MenuBar/viewSubmenu";
+import { getVisFilter } from "./GenericAnnotationProperties";
+
+class CutsiteProperties extends React.Component {
+  constructor(props) {
+    super(props);
+    this.commands = commands(this);
+  }
+
+  SubComponent = (row) => {
+    return (
+      <SingleEnzymeCutsiteInfo
+        {...{
+          allRestrictionEnzymes: this.props.allRestrictionEnzymes,
+          allCutsites: this.props.allCutsites,
+          filteredCutsites: this.props.filteredCutsites,
+          editorName: this.props.editorName,
+          dispatch: this.props.dispatch,
+          selectedAnnotationId: this.props.selectedAnnotationId,
+          cutsiteGroup: row.original.cutsiteGroup,
+          enzyme: row.original.enzyme
+        }}
+      ></SingleEnzymeCutsiteInfo>
+    );
+  };
+
+  schema = {
+    fields: [
+      { path: "name", type: "string" },
+      { path: "numberOfCuts", type: "number" },
+      { path: "groups", type: "string" }
+    ]
+  };
+
+  onChangeHook = () => {
+    this.props.annotationVisibilityShow("cutsites");
+  };
+  render() {
+    const {
+      editorName,
+      createNewDigest,
+      filteredCutsites: allCutsites,
+      selectedAnnotationId
+    } = this.props;
+
+    const { cutsitesByName, cutsitesById } = allCutsites;
+    const cutsitesToUse = map(cutsitesByName, (cutsiteGroup) => {
+      const name = cutsiteGroup[0].restrictionEnzyme.name;
+      let groups = "";
+      const exisitingEnzymeGroups = window.getExistingEnzymeGroups();
+
+      Object.keys(exisitingEnzymeGroups).forEach((key) => {
+        if (exisitingEnzymeGroups[key].includes(name)) groups += key;
+        groups += " ";
+      });
+
+      return {
+        cutsiteGroup,
+        id: name,
+        name,
+        numberOfCuts: cutsiteGroup.length,
+        enzyme: cutsiteGroup[0].restrictionEnzyme,
+        groups
+        // size: getRangeLength(cutsiteGroup, sequenceData.sequence.length)
+      };
+    });
+    return (
+      <>
+        <div
+          style={{
+            marginBottom: 10,
+            paddingTop: 3,
+            display: "flex",
+            // flexWrap: 'wrap',
+            width: "100%",
+            // justifyContent: "space-between",
+            alignItems: "center"
+          }}
+        >
+          {/* <CmdCheckbox prefix="Show " cmd={this.commands.toggleCutsites} />
+          <Button
+            style={{ marginLeft: 10, cursor: "auto" }}
+            disabled
+            minimal
+            icon="filter"
+          /> */}
+          {getVisFilter(
+            createCommandMenu(cutsitesSubmenu, this.commands, {
+              useTicks: true
+            })
+          )}
+          <ButtonGroup>
+            <Button
+              intent="success"
+              data-tip="Virtual Digest"
+              icon="cut"
+              style={{ marginLeft: 15, flexGrow: -1 }}
+              onClick={() => {
+                createNewDigest();
+              }}
+            ></Button>
+            {/* <Button
+            intent="success"
+            data-tip="Virtual Digest"
+            icon="cut"
+            style={{ marginLeft: 15, flexGrow: -1 }}
+            onClick={() => {
+              createNewDigest();
+            }}
+          >
+          </Button> */}
+          </ButtonGroup>
+
+          <CutsiteFilter
+            {...pick(this.props, userDefinedHandlersAndOpts)}
+            style={{ marginLeft: "auto", marginRight: 3 }}
+            editorName={editorName}
+            manageEnzymesToLeft
+            onChangeHook={this.onChangeHook}
+          />
+        </div>
+        <DataTable
+          selectedIds={get(
+            cutsitesById[selectedAnnotationId],
+            "restrictionEnzyme.name"
+          )}
+          compact
+          noSelect
+          noHeader
+          noFooter
+          withExpandAndCollapseAllButton
+          noFullscreenButton
+          noPadding
+          defaults={{ order: ["numberOfCuts"] }}
+          formName="cutsiteProperties"
+          noRouter
+          withSearch={false}
+          SubComponent={this.SubComponent}
+          isInfinite
+          schema={this.schema}
+          entities={cutsitesToUse}
+        />
+      </>
+    );
+  }
+}
+
+export default compose(
+  connectToEditor((editorState, ownProps) => {
+    const cutsites = selectors.filteredCutsitesSelector(
+      editorState,
+      ownProps.additionalEnzymes,
+      ownProps.enzymeGroupsOverride
+    );
+    const allCutsites = selectors.cutsitesSelector(
+      editorState,
+      ownProps.additionalEnzymes
+    );
+    return {
+      annotationVisibility: editorState.annotationVisibility || {},
+      filteredCutsites: cutsites,
+      allCutsites,
+      cutsites: cutsites.cutsitesArray
+    };
+  }),
+  withRestrictionEnzymes,
+  withSelectedEntities("cutsiteProperties")
+)(CutsiteProperties);

package/src/helperComponents/PropertiesDialog/FeatureProperties.js

@@ -0,0 +1,6 @@
+import { featuresSubmenu } from "../../MenuBar/viewSubmenu";
+import genericAnnotationProperties from "./GenericAnnotationProperties";
+export default genericAnnotationProperties({
+  visSubmenu: featuresSubmenu,
+  annotationType: "feature"
+});

package/src/helperComponents/PropertiesDialog/GenbankView.js

@@ -0,0 +1,74 @@
+import React from "react";
+// import { Button } from "@blueprintjs/core";
+import {
+  jsonToGenbank,
+  jsonToFasta,
+  cleanUpTeselagenJsonForExport
+} from "@teselagen/bio-parsers";
+import { HTMLSelect } from "@blueprintjs/core";
+import { connectToEditor } from "../../withEditorProps";
+import { compose } from "recompose";
+
+class GenbankView extends React.Component {
+  state = {
+    fileTypeToView: "genbank"
+  };
+  select = () => this._input?.select();
+  render() {
+    const { sequenceData = {} } = this.props;
+    let filestring;
+    switch (this.state.fileTypeToView) {
+      case "fasta":
+        filestring = jsonToFasta(sequenceData);
+        break;
+      case "teselagen":
+        filestring = JSON.stringify(
+          cleanUpTeselagenJsonForExport(sequenceData),
+          null,
+          4
+        );
+        break;
+      default:
+        filestring = jsonToGenbank(sequenceData);
+    }
+
+    return (
+      <>
+        <HTMLSelect
+          className="genbankFileView-type"
+          fill={false}
+          options={[
+            { label: "Genbank", value: "genbank" },
+            { label: "Fasta", value: "fasta" },
+            { label: "Teselagen JSON", value: "teselagen" }
+          ]}
+          onChange={(e) => {
+            this.setState({ fileTypeToView: e.target.value });
+          }}
+        />
+        <textarea
+          data-test="ve-genbank-text"
+          readOnly
+          onClick={this.select}
+          style={{
+            whiteSpace: "pre",
+            overflowWrap: "normal",
+            overflowX: "scroll",
+            fontSize: 11,
+            fontFamily: "monospace",
+            height: 350
+          }}
+          value={filestring}
+        />
+      </>
+    );
+  }
+}
+
+export default compose(
+  connectToEditor(({ sequenceData = {} }) => {
+    return {
+      sequenceData
+    };
+  })
+)(GenbankView);