@teselagen/ove 0.0.13 → 0.0.15

package/package.json

@@ -1,13 +1,89 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "main": "./index.js",
   "types": "./index.d.ts",
-  "type": "commonjs",
+  "type": "module",
   "exports": {
     ".": {
       "import": "./index.mjs",
       "require": "./index.js"
     }
+  },
+  "dependencies": {
+    "@blueprintjs/core": "3.52.0",
+    "@blueprintjs/datetime": "3.23.19",
+    "@blueprintjs/icons": "3.33.0",
+    "@blueprintjs/select": "3.18.11",
+    "@fontsource/ubuntu-mono": "^4.5.11",
+    "@hello-pangea/dnd": "16.2.0",
+    "@risingstack/react-easy-state": "^6.3.0",
+    "@teselagen/react-list": "0.8.18",
+    "@teselagen/react-table": "^6.10.11",
+    "@use-gesture/react": "^10.2.23",
+    "axios": "^0.21.1",
+    "bluebird": "3.7.2",
+    "bson-objectid": "2.0.4",
+    "buffer": "5.7.1",
+    "bufferpack": "0.0.6",
+    "clipboard": "2.0.8",
+    "color": "^3.2.1",
+    "combokeys": "^3.0.1",
+    "copy-to-clipboard": "^3.3.1",
+    "dayjs": "^1.10.4",
+    "deep-equal": "^1.1.1",
+    "dom-scroll-into-view": "^2.0.1",
+    "dom-to-image": "^2.6.0",
+    "downloadjs": "^1.4.7",
+    "escape-string-regexp": "1.0.5",
+    "fast-xml-parser": "4.2.5",
+    "fflate": "0.7.4",
+    "file-saver": "^2.0.5",
+    "fuse.js": "^6.6.2",
+    "fuzzysearch": "^1.0.3",
+    "html2canvas": "^1.4.1",
+    "immer": "^9.0.15",
+    "is-mobile": "^3.0.0",
+    "jsondiffpatch-rc": "0.4.2",
+    "jszip": "^3.10.1",
+    "math-expression-evaluator": "^1.3.7",
+    "mobx": "^6.9.0",
+    "mobx-react": "^7.6.0",
+    "nanoid": "^4.0.0",
+    "node-interval-tree": "^1.3.3",
+    "papaparse": "^5.3.2",
+    "paths-js": "^0.4.11",
+    "pluralize": "^7.0.0",
+    "popper.js": "^1.16.1",
+    "prop-types": "^15.6.2",
+    "qs": "^6.9.6",
+    "react": "18.2.0",
+    "react-color": "^2.19.3",
+    "react-dom": "18.2.0",
+    "react-draggable": "4.4.4",
+    "react-dropzone": "^11.4.2",
+    "react-markdown": "8.0.7",
+    "react-measure": "^2.5.2",
+    "react-redux": "^8.0.5",
+    "react-rnd": "^10.2.4",
+    "react-router-dom": "^4.3.1",
+    "react-sizeme": "^2.6.12",
+    "react-sortable-hoc": "^0.6.8",
+    "react-transition-group": "^2.4.0",
+    "recompose": "npm:react-recompose@0.31.1",
+    "redux": "^4.1.2",
+    "redux-act": "^1.8.0",
+    "redux-form": "^8.3.10",
+    "redux-thunk": "2.4.1",
+    "remark-gfm": "^3.0.1",
+    "reselect": "^4.1.7",
+    "shortid": "^2.2.16",
+    "tg-use-local-storage-state": "^16.0.3",
+    "tippy.js": "^6.3.7",
+    "to-regex-range": "5.0.1",
+    "url-join": "^4.0.1",
+    "use-debounce": "^8.0.4",
+    "use-deep-compare-effect": "^1.6.1",
+    "write-excel-file": "^1.4.25"
   }
 }

package/src/AlignmentTool/index.js

@@ -0,0 +1,16 @@
+import React from "react";
+// import { DataTable } from "@teselagen/ui";
+// import CutsiteFilter from "../CutsiteFilter";
+// import { Tabs, Tab, Button, InputGroup, Intent } from "@blueprintjs/core";
+
+export default class AlignmentTool extends React.Component {
+  // state={selectedTab: "virtualDigest"}
+  render() {
+    const { height = "100%" } = this.props;
+    return (
+      <div style={{ height, overflow: "auto", padding: 10 }}>
+        <div>Add an alignment file (.gb, .fasta, .ab)</div>
+      </div>
+    );
+  }
+}

package/src/AlignmentView/AlignmentVisibilityTool.js

@@ -0,0 +1,105 @@
+import {
+  Button,
+  Popover,
+  Intent,
+  Tooltip,
+  Tag,
+  Menu,
+  MenuItem
+} from "@blueprintjs/core";
+import React from "react";
+import { map, startCase } from "lodash";
+import pureNoFunc from "../utils/pureNoFunc";
+// import { fullSequenceTranslationMenu } from "../MenuBar/viewSubmenu";
+
+export default pureNoFunc(function AlignmentVisibilityTool(props) {
+  return (
+    <Popover
+      minimal
+      position="bottom"
+      content={<VisibilityOptions {...props} />}
+      target={
+        <Tooltip content="Visibility Options">
+          <Button
+            className="tg-alignment-visibility-toggle"
+            small
+            rightIcon="caret-down"
+            intent={Intent.PRIMARY}
+            minimal
+            icon="eye-open"
+          />
+        </Tooltip>
+      }
+    />
+  );
+});
+
+function VisibilityOptions({
+  // alignmentAnnotationVisibility = {},
+  alignmentAnnotationVisibilityToggle,
+  togglableAlignmentAnnotationSettings = {},
+  // alignmentAnnotationLabelVisibility = {},
+  // alignmentAnnotationLabelVisibilityToggle
+  annotationsWithCounts,
+  currentPairwiseAlignmentIndex
+}) {
+  let annotationCountToUse = {};
+  if (currentPairwiseAlignmentIndex) {
+    annotationCountToUse = annotationsWithCounts[currentPairwiseAlignmentIndex];
+  } else {
+    annotationCountToUse = annotationsWithCounts[0];
+  }
+  return (
+    <Menu
+      style={{ padding: 10 }}
+      className="alignmentAnnotationVisibilityToolInner"
+    >
+      {map(togglableAlignmentAnnotationSettings, (visible, annotationName) => {
+        return (
+          <MenuItem
+            icon={visible ? "tick" : ""}
+            onClick={(e) => {
+              e.stopPropagation();
+              if (annotationName === "axis") {
+                return alignmentAnnotationVisibilityToggle({
+                  axisNumbers: !visible,
+                  axis: !visible
+                });
+              }
+              if (annotationName === "cdsFeatureTranslations" && !visible) {
+                return alignmentAnnotationVisibilityToggle({
+                  cdsFeatureTranslations: !visible,
+                  translations: !visible
+                });
+              }
+
+              alignmentAnnotationVisibilityToggle({
+                [annotationName]: !visible
+              });
+            }}
+            text={
+              <>
+                {startCase(annotationName)
+                  .replace("Cds", "CDS")
+                  .replace("Dna", "DNA")}
+                {annotationName in annotationCountToUse ? (
+                  <Tag round style={{ marginLeft: 7 }}>
+                    {annotationCountToUse[annotationName]}
+                  </Tag>
+                ) : (
+                  ""
+                )}
+              </>
+            }
+            key={annotationName}
+          ></MenuItem>
+        );
+      })}
+      {/* <MenuItem icon="" text={fullSequenceTranslationMenu.text}>
+        {fullSequenceTranslationMenu.submenu.map(({ text, cmd }) => {
+          return <MenuItem key={cmd} text={text}></MenuItem>;
+        })}
+      </MenuItem> */}
+    </Menu>
+  );
+}

package/src/AlignmentView/EditTrackNameDialog.js

@@ -0,0 +1,34 @@
+import React from "react";
+import {
+  DialogFooter,
+  InputField,
+  wrapDialog
+} from "@teselagen/ui";
+import { compose } from "recompose";
+import { reduxForm } from "redux-form";
+
+export const EditTrackNameDialog = compose(
+  wrapDialog({
+    title: "Edit Track Name"
+  }),
+  reduxForm({ form: "EditTrackNameDialog" })
+)(function ({ handleSubmit, updateName, hideModal }) {
+  return (
+    <div>
+      <div className="bp3-dialog-body">
+        <InputField
+          autoFocus
+          label="New Name"
+          isRequired
+          name="name"
+        ></InputField>
+      </div>
+      <DialogFooter
+        onClick={handleSubmit(async ({ name }) => {
+          await updateName({ newName: name });
+          hideModal();
+        })}
+      ></DialogFooter>
+    </div>
+  );
+});

package/src/AlignmentView/HorizontalPanelDragHandle.js

@@ -0,0 +1,35 @@
+import React, { useRef } from "react";
+export function HorizontalPanelDragHandle({ onDrag }) {
+  const xStart = useRef(0);
+
+  const resize = useRef((e) => {
+    const dx = xStart.current - e.clientX;
+    onDrag({ dx });
+    xStart.current = e.clientX;
+  });
+  const mouseup = useRef(() => {
+    document.removeEventListener("mousemove", resize.current, false);
+    document.removeEventListener("mousemove", mouseup.current, false);
+  });
+
+  return (
+    <div
+      onMouseDown={(e) => {
+        xStart.current = e.clientX;
+        document.addEventListener("mousemove", resize.current, false);
+        document.addEventListener("mouseup", mouseup.current, false);
+      }}
+      style={{
+        position: "absolute",
+        top: 0,
+        right: -1,
+        zIndex: 1000,
+        height: "100%",
+        cursor: "ew-resize",
+        width: 3,
+        opacity: 0,
+        background: "blue"
+      }}
+    ></div>
+  );
+}