@teselagen/ove 0.0.14 → 0.0.15

package/src/ToolBar/style.css

@@ -0,0 +1,138 @@
+.Popover-body {
+  display: inline-flex;
+  flex-direction: column;
+  padding: 10px;
+  background: white;
+  color: black;
+  box-shadow: 0px 1px 9px rgba(0, 0, 0, 0.5);
+  z-index: 1;
+  margin-top: 10px;
+}
+
+.Popover-tipShape {
+  fill: white;
+}
+
+.Popover-tip {
+  display: none;
+}
+
+.veToolbar .veToolbarItemOuter {
+  display: flex;
+  height: 32px;
+}
+.veToolbar .veToolbarItemOuter .veToolbarItem {
+  display: flex;
+  align-items: center;
+  height: 32px;
+}
+.veToolbarSpacer {
+  height: 80%;
+  width: 1px;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+.veToolbar .veToolbarItemOuter .veToolbarIcon {
+  padding: 3px;
+  border-radius: 3px;
+  height: 32px;
+  width: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #006cab;
+}
+.veToolbarItemOuter.disabled .veToolbarIcon {
+  color: #c0c0c0;
+}
+.veToolbar .veToolbarItemOuter .veToolbarIcon.veToolbarItemToggled {
+  background: lightgrey;
+  border-color: #006cab;
+}
+
+.veToolbar :not(.disabled).veToolbarItemOuter .veToolbarIcon:hover {
+  border-color: #006cab;
+}
+.veToolbar .veToolbarItemOuter .veToolbarIcon:active {
+  opacity: 0.7;
+}
+.veToolbar .veToolbarItemOuter .veToolbarIcon img,
+.veToolbar .veToolbarItemOuter .veToolbarIcon svg,
+.veToolbar .veToolbarItemOuter .veToolbarIcon object {
+  cursor: pointer;
+}
+.veToolbar .veToolbarItemOuter .veToolbarIcon img svg,
+.veToolbar .veToolbarItemOuter .veToolbarIcon svg svg,
+.veToolbar .veToolbarItemOuter .veToolbarIcon object svg {
+  color: #006baa;
+}
+
+.minOrfSizeInput::-webkit-inner-spin-button,
+.minOrfSizeInput::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.minOrfSizeInput {
+  padding-bottom: 0.25em;
+  width: 5em;
+  margin-left: 10px;
+  text-align: center;
+  padding-top: 0.25em;
+  border: 1px solid lightgrey;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+}
+
+.veToolbarDropdown {
+  cursor: pointer;
+  padding: 0px;
+  padding-bottom: 5px;
+  padding-top: 5px;
+  border-radius: 3px;
+}
+.veToolbarDropdown:hover {
+  background: lightgrey;
+}
+.veToolbarDropdown.isOpen {
+  background: lightgrey;
+}
+
+.veToolbarCutsiteFilterHolder {
+  min-width: 300px;
+}
+.veToolbarCutsiteFilterHolder > div {
+  margin: 10px;
+}
+.veToolbarCutsiteFilterHolder .title {
+  margin: 10px;
+  background: blue;
+  width: 100%;
+}
+
+.translateInfoSpan {
+  font-size: 0.8em;
+  padding: 4px;
+}
+
+.showOrfTranslateSpan {
+  padding: 8px;
+}
+
+.veToolbarOrfOptionsHolder {
+  min-width: 300px;
+  margin-bottom: 10px;
+}
+
+.veToolbarViewOptionsHolder div {
+  margin-left: 10px;
+  margin-bottom: 10px;
+}
+.veToolbarViewOptionsHolder label {
+  margin: 40px 10px;
+}
+.ve-toolbar-item-popover {
+  /* the z-index has to be high for it to work with ice */
+  z-index: 4000;
+}

package/src/ToolBar/undoTool.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.past &&
+      editorState.sequenceDataHistory.past.length
+    )
+  };
+})(({ toolbarItemProps, undo, disabled }) => {
+  return (
+    <ToolbarItem
+      {...{
+        Icon: <Icon data-test="veUndoTool" icon="undo" />,
+        disabled,
+        onIconClick: undo,
+        tooltip: (
+          <span>
+            Undo <span style={{ fontSize: 10 }}>(Cmd/Ctrl+Z)</span>
+          </span>
+        ),
+        ...toolbarItemProps
+      }}
+    />
+  );
+});

package/src/ToolBar/veToolbarIcons/toggle_views.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17 17h-10v-10h10v10zm7 3l-5-3v-10l5-3v16zm-24-16l5 3v10l-5 3v-16z"/></svg>

package/src/ToolBar/versionHistoryTool.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { Icon } from "@blueprintjs/core";
+import ToolbarItem from "./ToolbarItem";
+import { connectToEditor } from "../withEditorProps";
+
+export default connectToEditor()(
+  ({ toolbarItemProps, toggleViewVersionHistory }) => {
+    return (
+      <ToolbarItem
+        {...{
+          Icon: <Icon icon="history" />,
+          onIconClick: toggleViewVersionHistory,
+          // disabled: hasBeenSaved || lastEdit,
+          tooltip: <span>View Version History</span>,
+          ...toolbarItemProps
+        }}
+      />
+    );
+  }
+);

package/src/ToolBar/visibilityTool.js

@@ -0,0 +1,39 @@
+import { Icon, Menu } from "@blueprintjs/core";
+import React from "react";
+import { createCommandMenu } from "@teselagen/ui";
+import viewSubmenu from "../MenuBar/viewSubmenu";
+import getCommands from "../commands";
+import ToolbarItem from "./ToolbarItem";
+import { connectToEditor } from "../withEditorProps";
+import withEditorProps from "../withEditorProps";
+
+export default connectToEditor(({ toolBar = {} }) => {
+  return {
+    isOpen: toolBar.openItem === "visibilityTool"
+  };
+})(({ toolbarItemProps, isOpen }) => {
+  return (
+    <ToolbarItem
+      {...{
+        Icon: <Icon icon="eye-open" />,
+        onIconClick: "toggleDropdown",
+        Dropdown: VisibilityOptions,
+        noDropdownIcon: true,
+        toggled: isOpen,
+        tooltip: isOpen ? "Hide Visibility Options" : "Show Visibility Options",
+        ...toolbarItemProps
+      }}
+    />
+  );
+});
+
+const VisibilityOptions = withEditorProps(function(props) {
+  return (
+    <Menu>
+      {createCommandMenu(viewSubmenu, getCommands({ props }), {
+        useTicks: true,
+        omitIcons: true
+      })}
+    </Menu>
+  );
+});

package/src/VersionHistoryView/index.js

@@ -0,0 +1,215 @@
+import React from "react";
+import { Button, Intent } from "@blueprintjs/core";
+import { tidyUpSequenceData } from "@teselagen/sequence-utils";
+import { DataTable } from "@teselagen/ui";
+
+import Editor from "../Editor";
+import FillWindow from "../Editor/FillWindow";
+import withEditorProps from "../withEditorProps";
+import { noop } from "lodash";
+
+const SIDE_PANEL_WIDTH = 350;
+
+// API for 3rd party use:
+// getSequenceAtVersion: (versionId) => teselagenSequenceData
+// getVersionList: () => [{ versionId: "51241", dateChanged: "12/30/1990", editedBy: "Hector Plahar", revisionType: "Feature Add"}]
+// (already provided unless using VersionHistoryView directly) onSave: (event, sequenceDataToSave, editorState, onSuccessCallback) => { //same onSave handler as normal// },
+// (not necessary unless using VersionHistoryView directly) exitVersionHistoryView() => {}
+// (not necessary unless using VersionHistoryView directly) getCurrentSequenceData: () => teselagenSequenceData  //called upon initialization
+
+const currentVersion = {
+  dateChanged: "Current",
+  id: "__current__"
+};
+export class VersionHistoryView extends React.Component {
+  state = {
+    selectedVersion: undefined,
+    versionList: [currentVersion]
+  };
+  // static defaultProps = {
+  //   getVersionList: () => {
+  //     return [
+  //       {
+  //         dateChanged: "12/30/2211",
+  //         editedBy: "thomas",
+  //         revisionType: "thomas",
+  //         versionId: 2
+  //       }
+  //     ];
+  //   }
+  // };
+  updateSeqData = (sequenceData) => {
+    this.activeSeqData = sequenceData;
+    this.props.vectorEditorInitialize(
+      {
+        sequenceData:
+          (sequenceData && tidyUpSequenceData(sequenceData)) ||
+          tidyUpSequenceData({
+            sequence: "gTAGAGACAAGA"
+          })
+      },
+      {
+        editorName: "veVersionHistoryView"
+      }
+    );
+  };
+  componentDidMount = async () => {
+    this._getVersionList(); //trigger the initial grabbing of the list of versions
+    await this.updateSeqData(await this.getCurrentSeqData());
+  };
+  getCurrentSeqData = async () => {
+    if (this.props.getCurrentSequenceData) {
+      return await this.props.getCurrentSequenceData();
+    } else {
+      return this.props.sequenceData;
+    }
+  };
+  onRowSelect = async ([row]) => {
+    // const close = showLoadingMask();
+    if (!row) return;
+    if (row.id === "__current__") {
+      this.updateSeqData(await this.getCurrentSeqData());
+      this.setState({ selectedVersion: null });
+    } else {
+      this.updateSeqData(await this.props.getSequenceAtVersion(row.versionId));
+      this.setState({ selectedVersion: row });
+    }
+    // close();
+  };
+  _getVersionList = async () => {
+    const versionList = await this.props.getVersionList();
+    this.setState({
+      versionList: [
+        currentVersion,
+        ...versionList.map((r) => {
+          return { ...r, id: r.versionId };
+        })
+      ] //currentVersion should always come first
+    });
+  };
+  revertToSelectedVersion = () => {
+    if (!this.props.onSave) {
+      return console.error("props.onSave must be passed to VersionHistoryView");
+    }
+    const tidiedActiveData = tidyUpSequenceData(this.activeSeqData, {
+      annotationsAsObjects: true
+    });
+    this.props.updateSequenceData &&
+      this.props.updateSequenceData(tidiedActiveData);
+    this.props.caretPositionUpdate && this.props.caretPositionUpdate(0);
+    this.props.onSave(
+      {},
+      tidiedActiveData,
+      {}, //empty editor props
+      noop //empty unSuccessCallback
+    );
+    this.goBack();
+  };
+  goBack = () => {
+    this.props.exitVersionHistoryView && this.props.exitVersionHistoryView();
+    this.props.toggleViewVersionHistory();
+  };
+  render() {
+    return (
+      <FillWindow asPortal className="veVersionHistoryViewContainer">
+        {({ width, height }) => {
+          return (
+            <div
+              style={{ width, height, display: "flex" }}
+              className="veVersionHistoryView"
+            >
+              <Editor
+                style={{
+                  flexBasis: "content",
+                  // flex: "0 0 200px",
+                  flex: "1 1 350px",
+                  width: width - SIDE_PANEL_WIDTH
+                }}
+                noVersionHistory
+                // fitHeight={true}
+                ToolBarProps={{
+                  toolList: [
+                    "cutsiteTool",
+                    "featureTool",
+                    "orfTool",
+                    "alignmentTool",
+                    "findTool",
+                    "visibilityTool"
+                  ],
+                  contentLeft: (
+                    <Button
+                      onClick={this.goBack}
+                      icon="arrow-left"
+                      style={{ marginLeft: 5, marginRight: 5 }}
+                    >
+                      Back
+                    </Button>
+                  )
+                }}
+                editorName="veVersionHistoryView"
+              />
+              <div
+                style={{
+                  borderLeft: "1px solid grey",
+                  padding: 3,
+                  width: SIDE_PANEL_WIDTH,
+                  minWidth: SIDE_PANEL_WIDTH,
+                  // flexBasis: 350,
+                  // width: 350,
+                  // flexGrow: 1,
+                  // flex: "2 1 350px",
+                  // flexBasis: "content",
+                  display: "flex",
+                  flexDirection: "column"
+                }}
+                className="veVersionHistoryViewSidePanel"
+              >
+                <h2 style={{ width: "100%", textAlign: "center" }}>
+                  {" "}
+                  Past Versions:{" "}
+                </h2>
+                <DataTable
+                  noPadding
+                  isSingleSelect
+                  noDeselectAll
+                  noFullscreenButton
+                  onRowSelect={this.onRowSelect}
+                  maxHeight={400}
+                  formName="featureProperties"
+                  noRouter
+                  compact
+                  selectedIds={["__current__"]}
+                  withDisplayOptions
+                  hideDisplayOptionsIcon
+                  withSearch={false}
+                  name="veVersionHistoryView"
+                  isInfinite
+                  schema={{
+                    fields: [
+                      {
+                        path: "dateChanged",
+                        type: "string"
+                      },
+                      { path: "editedBy", type: "string" },
+                      { path: "revisionType", type: "string" }
+                    ]
+                  }}
+                  entities={this.state.versionList}
+                />
+                <Button
+                  style={{ margin: 3 }}
+                  intent={Intent.PRIMARY}
+                  disabled={!this.state.selectedVersion}
+                  onClick={this.revertToSelectedVersion}
+                  text="Revert to Selected Version"
+                />
+              </div>
+            </div>
+          );
+        }}
+      </FillWindow>
+    );
+  }
+}
+
+export default withEditorProps(VersionHistoryView);

package/src/addAlignment.js

@@ -0,0 +1,6 @@
+export default function addAlignment(store, alignment = {}) {
+  store.dispatch({
+    type: "UPSERT_ALIGNMENT_RUN",
+    payload: alignment
+  });
+}

package/src/commands/getOveHotkeyDefs.js

@@ -0,0 +1,12 @@
+import getCommands from "./index";
+import { getCommandHotkeys } from "@teselagen/ui";
+
+export default function getOveHotkeyDefs({ store, editorName }) {
+  const commands = getCommands({
+    props: {
+      store,
+      editorName
+    }
+  });
+  return getCommandHotkeys(commands);
+}