@teselagen/ove 0.0.14 → 0.0.16

package/src/constants/constants.js

@@ -0,0 +1,2 @@
+export const SLIDER_NORM_WIDTH = 120;
+export const SLIDER_SMALL_WIDTH = 80;

package/src/constants/dnaToColor.js

@@ -0,0 +1,17 @@
+import { DNAComplementMap } from "@teselagen/sequence-utils";
+
+const dnaToColor = {
+  a: "lightgreen",
+  c: "#658fff",
+  g: "yellow",
+  t: "#EE6262"
+};
+export default dnaToColor;
+
+export function getDnaColor(char, isReverse) {
+  return (
+    dnaToColor[
+      isReverse ? DNAComplementMap[char.toLowerCase()] : char.toLowerCase()
+    ] || "lightgrey"
+  );
+}

package/src/constants/draggableClassnames.js

@@ -0,0 +1,5 @@
+export default {
+  caret: "veCaret",
+  selectionStart: "veSelectionLayerStart",
+  selectionEnd: "veSelectionLayerEnd"
+};

package/src/constants/findToolConstants.js

@@ -0,0 +1 @@
+export const MAX_MATCHES_DISPLAYED = 1000;

package/src/constants/orfFrameToColorMap.js

@@ -0,0 +1,10 @@
+const orfFrameToColorMap = {
+  0: "#FF4040",
+  1: "#5E8804",
+  2: "#17569B"
+};
+export default orfFrameToColorMap;
+
+export const getOrfColor = orf => {
+  return orfFrameToColorMap[orf.frame];
+};

package/src/constants/rowviewContants.js

@@ -0,0 +1,3 @@
+export const defaultCharWidth = 9;
+export const defaultContainerWidth = 400;
+export const defaultMarginWidth = 50;

package/src/constants/specialCutsiteFilterOptions.js

@@ -0,0 +1,22 @@
+export default {
+  type2s: {
+    value: "type2s",
+    label: "Type IIS Enzymes",
+    isSpecialGroup: true
+  },
+  single: {
+    value: "single",
+    label: "Single cutters",
+    cutsThisManyTimes: 1
+  },
+  double: {
+    value: "double",
+    label: "Double cutters",
+    cutsThisManyTimes: 2
+  },
+  triple: {
+    value: "triple",
+    label: "Triple cutters",
+    cutsThisManyTimes: 3
+  }
+};

package/src/constants.js

@@ -0,0 +1 @@
+export const formName = "autoAnnotate";

package/src/createVectorEditor/index.js

@@ -0,0 +1,138 @@
+import React from "react";
+import { Provider } from "react-redux";
+import makeStore from "./makeStore";
+import { render, unmountComponentAtNode } from "react-dom";
+
+import Editor from "../Editor";
+import updateEditor from "../updateEditor";
+import addAlignment from "../addAlignment";
+import AlignmentView from "../AlignmentView";
+import sizeMe from "react-sizeme";
+import VersionHistoryView from "../VersionHistoryView";
+
+let store;
+
+function StandaloneEditor(props) {
+  if (!store) {
+    store = makeStore();
+  }
+  return (
+    <Provider store={store}>
+      <Editor {...props} />
+    </Provider>
+  );
+}
+
+function StandaloneAlignment(props) {
+  if (!store) {
+    store = makeStore();
+  }
+  return (
+    <Provider store={store}>
+      <AlignmentView
+        {...{ ...props, dimensions: { width: props.size.width } }}
+      />
+    </Provider>
+  );
+}
+
+function StandaloneVersionHistoryView(props) {
+  if (!store) {
+    store = makeStore();
+  }
+  return (
+    <Provider store={store}>
+      <VersionHistoryView {...{ ...props }} />
+    </Provider>
+  );
+}
+
+export default function createVectorEditor(
+  _node,
+  { editorName = "StandaloneEditor", ...rest } = {}
+) {
+  if (!store) {
+    store = makeStore();
+  }
+  let node;
+
+  if (_node === "createDomNodeForMe") {
+    node = document.createElement("div");
+    node.className = "ove-created-div";
+    document.body.appendChild(node);
+  } else {
+    node = _node;
+  }
+  const editor = {};
+  editor.renderResponse = render(
+    <StandaloneEditor {...{ editorName, ...rest }} />,
+    node
+  );
+  editor.close = () => {
+    unmountComponentAtNode(node);
+    node.remove();
+  };
+  editor.updateEditor = (values) => {
+    updateEditor(store, editorName, values);
+  };
+  editor.addAlignment = (values) => {
+    addAlignment(store, values);
+  };
+  editor.getState = () => {
+    return store.getState().VectorEditor[editorName];
+  };
+
+  return editor;
+}
+
+export function createVersionHistoryView(
+  node,
+  { editorName = "StandaloneVersionHistoryView", ...rest } = {}
+) {
+  if (!store) {
+    store = makeStore();
+  }
+  const editor = {};
+  editor.renderResponse = render(
+    <StandaloneVersionHistoryView {...{ editorName, ...rest }} />,
+    node
+  );
+
+  editor.updateEditor = (values) => {
+    updateEditor(store, editorName, values);
+  };
+  editor.getState = () => {
+    return store.getState().VectorEditor["StandaloneVersionHistoryView"];
+  };
+
+  return editor;
+}
+
+const SizedStandaloneAlignment = sizeMe()(StandaloneAlignment);
+export function createAlignmentView(node, props = {}) {
+  if (!store) {
+    store = makeStore();
+  }
+  const editor = {};
+  editor.renderResponse = render(<SizedStandaloneAlignment {...props} />, node);
+
+  editor.updateAlignment = (values) => {
+    addAlignment(store, values);
+  };
+  editor.updateAlignment(props);
+  editor.getState = () => {
+    if (!props.id) {
+      throw new Error(
+        'Please pass an id when using createAlignmentView. eg createAlignmentView(myDiv, {id: "someUniqueId"})'
+      );
+    }
+    return store.getState().VectorEditor.__allEditorsOptions.alignments[
+      props.id
+    ];
+  };
+  return editor;
+}
+
+window.createVectorEditor = createVectorEditor;
+window.createAlignmentView = createAlignmentView;
+window.createVersionHistoryView = createVersionHistoryView;

package/src/createVectorEditor/makeStore.js

@@ -0,0 +1,34 @@
+//optionally connect to the redux store
+import { createStore, combineReducers, applyMiddleware, compose } from "redux";
+import VectorEditor, { vectorEditorMiddleware } from "../redux";
+import thunk from "redux-thunk";
+import { reducer as form } from "redux-form";
+
+const makeStore = () => {
+  const composeEnhancer =
+    (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ &&
+      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+        name: "createVectorEditor",
+        latency: 1000,
+        // serialize: {
+        //   replacer: (key, value) => {
+        //   }
+        // },
+        actionsDenylist: ["HOVEREDANNOTATIONUPDATE", "HOVEREDANNOTATIONCLEAR"]
+      })) ||
+    compose;
+
+  const store = createStore(
+    combineReducers({
+      form,
+      VectorEditor: VectorEditor()
+    }),
+    undefined,
+    composeEnhancer(
+      applyMiddleware(thunk, vectorEditorMiddleware) //your store should be redux-thunk connected for the VectorEditor component to work
+    )
+  );
+  return store;
+};
+
+export default makeStore;

package/src/fileUtils.js

@@ -0,0 +1,103 @@
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+import { parse } from "papaparse";
+
+export const allowedCsvFileTypes = [".csv", ".txt", ".xlsx"];
+
+export const isZipFile = (file) => {
+  const type = file.mimetype || file.type;
+  return type === "application/zip" || type === "application/x-zip-compressed";
+};
+
+export const getExt = (file) => file.name.split(".").pop();
+export const isExcelFile = (file) => getExt(file) === "xlsx";
+export const isCsvFile = (file) => getExt(file) === "csv";
+export const isTextFile = (file) => ["text", "txt"].includes(getExt(file));
+
+const defaultCsvParserOptions = {
+  header: true,
+  skipEmptyLines: "greedy",
+  trimHeaders: true,
+  // delimiter: ","
+};
+
+export const parseCsvFile = (csvFile, parserOptions = {}) => {
+  return new Promise((resolve, reject) => {
+    parse(csvFile.originFileObj, {
+      ...defaultCsvParserOptions,
+      complete: (results) => {
+        if (results && results.errors && results.errors.length) {
+          return reject("Error in csv: " + JSON.stringify(results.errors));
+        }
+        resolve(results);
+      },
+      error: (error) => {
+        reject(error);
+      },
+      ...parserOptions
+    });
+  });
+};
+
+export const parseCsvString = (csvString, parserOptions = {}) => {
+  return parse(csvString, { ...defaultCsvParserOptions, ...parserOptions });
+};
+
+export const cleanCommaSeparatedCell = (cellData) =>
+  (cellData || "")
+    .split(",")
+    .map((n) => n.trim())
+    .filter((n) => n);
+
+/**
+ * Because the csv rows might not have the same header keys in some cases (extended properties)
+ * this function will make sure that each row will have all headers so that the export
+ * does not drop fields
+ * @param {*} rows
+ */
+export const cleanCsvExport = (rows) => {
+  const allHeaders = [];
+  rows.forEach((row) => {
+    Object.keys(row).forEach((header) => {
+      if (!allHeaders.includes(header)) {
+        allHeaders.push(header);
+      }
+    });
+  });
+  rows.forEach((row) => {
+    allHeaders.forEach((header) => {
+      row[header] = row[header] || "";
+    });
+  });
+  return rows;
+};
+
+export const validateCSVRequiredHeaders = (
+  fields,
+  requiredHeaders,
+  filename
+) => {
+  const missingRequiredHeaders = requiredHeaders.filter((field) => {
+    return !fields.includes(field);
+  });
+  if (missingRequiredHeaders.length) {
+    const name = filename ? `The file ${filename}` : "CSV file";
+    return `${name} is missing required headers. (${missingRequiredHeaders.join(
+      ", "
+    )})`;
+  }
+};
+
+export const validateCSVRow = (row, requiredHeaders, index) => {
+  const missingRequiredFields = requiredHeaders.filter((field) => !row[field]);
+  if (missingRequiredFields.length) {
+    if (missingRequiredFields.length === 1) {
+      return `Row ${index + 1} is missing the required field "${
+        missingRequiredFields[0]
+      }"`;
+    } else {
+      return `Row ${
+        index + 1
+      } is missing these required fields: ${missingRequiredFields.join(", ")}`;
+    }
+  }
+};