@teselagen/ove 0.4.3 → 0.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "main": "./src/index.js",
   "exports": {
     ".": {
@@ -13,9 +13,9 @@
     "node": "16.20.2"
   },
   "dependencies": {
-    "@teselagen/sequence-utils": "0.3.18",
+    "@teselagen/sequence-utils": "0.3.19",
     "@teselagen/range-utils": "0.3.7",
-    "@teselagen/ui": "0.3.75",
+    "@teselagen/ui": "0.3.76",
     "@teselagen/file-utils": "0.3.16",
     "@teselagen/bounce-loader": "0.3.11",
     "@teselagen/bio-parsers": "0.4.10",

package/src/AlignmentView/index.js

@@ -1049,6 +1049,7 @@ export class AlignmentView extends React.Component {
       additionalSelectionLayerRightClickedOptions,
       selectionLayerRightClicked,
       additionalTopEl,
+      additionalTopLeftEl,
       handleAlignmentRename,
       alignmentVisibilityToolOptions
     } = this.props;
@@ -1449,6 +1450,7 @@ export class AlignmentView extends React.Component {
                   }}
                   className="ve-alignment-top-bar"
                 >
+                  {additionalTopLeftEl}
                   {handleBackButtonClicked && (
                     <Tooltip content="Back to Pairwise Alignment Overview">
                       <Button

package/src/AlignmentView/style.css

@@ -1,3 +1,6 @@
+.tg-pinch-helper {
+  width: 100%;
+}
 .ove-slider .bp3-slider {
   min-width: 10px !important;
   margin-bottom: 4px;

package/src/Editor/FillWindow.js

@@ -30,6 +30,7 @@ export default class FillWindow extends React.Component {
       <div
         {...rest}
         style={{
+          zIndex: 10,
           width,
           height,
           position: "fixed",

package/src/Editor/style.css

@@ -2,6 +2,7 @@
 .veEditor {
   position: relative;
   flex-grow: 1;
+  min-width: 0px;
 }
 
 .taProductViewer {

package/src/MenuBar/defaultConfig.js

@@ -41,7 +41,8 @@ export default [
         showInSearchMenu: true,
         submenu: [
           { cmd: "exportSequenceAsGenbank" },
-          { cmd: "exportSequenceAsFasta" },
+          { cmd: "exportDNASequenceAsFasta" },
+          { cmd: "exportProteinSequenceAsFasta" },
           { cmd: "exportSequenceAsTeselagenJson" }
         ]
       },

package/src/SimpleCircularOrLinearView.js

@@ -102,8 +102,8 @@ export default props => {
   )
     ? CircularView
     : _sequenceData.isOligo && _sequenceData.sequence
-    ? SimpleOligoPreview
-    : LinearView;
+      ? SimpleOligoPreview
+      : LinearView;
   if (withChoosePreviewType && previewType === "row") {
     Component = RowView;
     tickSpacing = undefined;
@@ -291,7 +291,8 @@ const DownloadBtn = withHandlers({ exportSequenceToFile })(props => {
           showContextMenu(
             [
               "exportSequenceAsGenbank",
-              "exportSequenceAsFasta",
+              "exportDNASequenceAsFasta",
+              "exportProteinSequenceAsFasta",
               "exportSequenceAsTeselagenJson"
             ],
             [

package/src/ToolBar/downloadTool.js

@@ -28,7 +28,8 @@ const Dropdown = withEditorProps(props => {
       {createCommandMenu(
         [
           "exportSequenceAsGenbank",
-          "exportSequenceAsFasta",
+          "exportDNASequenceAsFasta",
+          "exportProteinSequenceAsFasta",
           "exportSequenceAsTeselagenJson"
         ],
         getCommands({ props })

package/src/commands/index.js

@@ -264,9 +264,24 @@ const fileCommandDefs = {
     handler: props =>
       props.exportSequenceToFile(isProtein(props) ? "genpept" : "genbank")
   },
-  exportSequenceAsFasta: {
-    name: "Download FASTA File",
-    handler: props => props.exportSequenceToFile("fasta")
+  exportDNASequenceAsFasta: {
+    name: props =>
+      `Download ${props.sequenceData.isProtein ? "DNA " : ""}FASTA File`,
+    isHidden: props => !props.sequenceData.sequence,
+    handler: props =>
+      props.exportSequenceToFile("fasta", {
+        sequence: props.sequenceData.sequence,
+        size: props.sequenceData.size
+      })
+  },
+  exportProteinSequenceAsFasta: {
+    name: "Download AA FASTA File",
+    isHidden: props => !props.sequenceData.proteinSequence,
+    handler: props =>
+      props.exportSequenceToFile("fasta", {
+        sequence: props.sequenceData.proteinSequence,
+        size: props.sequenceData.proteinSize
+      })
   },
   exportSequenceAsTeselagenJson: {
     name: "Download Teselagen JSON File",

package/src/index.js

@@ -3,13 +3,7 @@ import { showContextMenu } from "@teselagen/ui";
 import "./createVectorEditor";
 import "./style.css";
 export { getUserGroupLabel } from "./CutsiteFilter/AdditionalCutsiteInfoDialog";
-
 window.tgCreateMenu = showContextMenu;
-// window.tgCreateMenu = (menu, e, e2) => {
-//   (e||e2).stopPropagation()
-//   (e || e2)
-// } //add this to the window so people can easily override the default context menus
-
 FocusStyleManager.onlyShowFocusOnTabs();
 export { getGaps } from "./AlignmentView/getGaps";
 export { default as createVectorEditor } from "./createVectorEditor";

package/src/style.css

@@ -96,3 +96,9 @@ body.tg-no-scroll-body {
 .bp3-dark .veToolbar-outer {
   background: #202b33;
 }
+/* .veVersionHistoryView {
+  background: #ebf1f5;
+}
+.bp3-dark .veVersionHistoryView {
+  background: #202b33;
+} */

package/src/withEditorProps/index.js

@@ -50,8 +50,8 @@ const getUpperOrLowerSeq = defaultMemoize(
     uppercaseSequenceMapFont === "uppercase"
       ? sequence.toUpperCase()
       : uppercaseSequenceMapFont === "lowercase"
-      ? sequence.toLowerCase()
-      : sequence
+        ? sequence.toLowerCase()
+        : sequence
 );
 
 const getTypesToOmit = annotationsToSupport => {
@@ -284,7 +284,7 @@ export const importSequenceFromFile =
     }
   };
 
-export const exportSequenceToFile = props => format => {
+export const exportSequenceToFile = props => (format, options) => {
   const { sequenceData } = props;
   let convert, fileExt;
 
@@ -304,7 +304,9 @@ export const exportSequenceToFile = props => format => {
     console.error(`Invalid export format: '${format}'`); // dev error
     return;
   }
-  const blob = new Blob([convert(sequenceData)], { type: "text/plain" });
+  const blob = new Blob([convert(sequenceData, options)], {
+    type: "text/plain"
+  });
   const filename = `${sequenceData.name || "Untitled_Sequence"}.${fileExt}`;
   FileSaver.saveAs(blob, filename);
   window.toastr.success("File Downloaded Successfully");
@@ -441,16 +443,16 @@ export default compose(
             selectionLayer.start > -1
               ? { ...selectionLayer, id: undefined }
               : caretPosition > -1
-              ? {
-                  start: caretPosition,
-                  end: sequenceData.isProtein
-                    ? caretPosition + 2
-                    : caretPosition
-                }
-              : {
-                  start: 0,
-                  end: sequenceData.isProtein ? 2 : 0
-                };
+                ? {
+                    start: caretPosition,
+                    end: sequenceData.isProtein
+                      ? caretPosition + 2
+                      : caretPosition
+                  }
+                : {
+                    start: 0,
+                    end: sequenceData.isProtein ? 2 : 0
+                  };
           showAddOrEditAnnotationDialog({
             type: key.toLowerCase(),
             annotation: {

package/style.css

@@ -8975,10 +8975,10 @@ code {
   display: none;
 }
 
-.isDataTitle .tippy-arrow {
+.isDataTitle .tippy-box[data-theme~="teselagen"] .tippy-arrow {
   opacity: 0 !important;
 }
-.isDataTitle .tippy-box {
+.isDataTitle .tippy-box[data-theme~="teselagen"] {
   background-color: #4f4a50f4 !important;
   border-radius: 0 !important;
   color: #f3f3f3 !important;
@@ -8987,24 +8987,24 @@ code {
   padding: 0px 0px !important;
 }
 
-[data-tippy-root] {
+[data-tippy-root]:has(.tippy-box[data-theme~="teselagen"]) {
   z-index: 100000 !important;
 }
 
-[data-tippy-root] .tippy-box {
+[data-tippy-root] .tippy-box[data-theme~="teselagen"] {
   background-color: #394b59;
   color: #f5f8fa;
   padding: 4px 4px;
   word-break: break-word;
 }
-[data-tippy-root] .tippy-arrow {
+[data-tippy-root] .tippy-box[data-theme~="teselagen"] .tippy-arrow {
   color: #394b59;
 }
-.bp3-dark [data-tippy-root] .tippy-box {
+.bp3-dark [data-tippy-root] .tippy-box[data-theme~="teselagen"] {
   background-color: #e1e8ed;
   color: #394b59;
 }
-.bp3-dark [data-tippy-root] .tippy-arrow {
+.bp3-dark [data-tippy-root] .tippy-box[data-theme~="teselagen"] .tippy-arrow {
   /* background-color: #e1e8ed; */
   color: #e1e8ed;
 }
@@ -9410,7 +9410,7 @@ body:not(.drag-active)
 }
 
 .ReactTable .rt-tr-group.selected {
-  background: lightblue !important;
+  background: #e4f3f8 !important;
 }
 
 .ReactTable .rt-tr-group.disabled {
@@ -9634,7 +9634,9 @@ body:not(.drag-active)
 .bp3-dark .ReactTable .rt-tbody {
   background: #30404d !important;
 }
-
+.ReactTable .rt-thead.-header {
+  box-shadow: none;
+}
 .bp3-dark .ReactTable .rt-thead.-header {
   color: #f5f8fa !important;
 }
@@ -10999,6 +11001,9 @@ li.bp3-menu-divider:last-child {
   height: 12px;
   top: 2px;
 }
+.tg-pinch-helper {
+  width: 100%;
+}
 .ove-slider .bp3-slider {
   min-width: 10px !important;
   margin-bottom: 4px;
@@ -11696,6 +11701,7 @@ path.partWithSelectedTag {
 .veEditor {
   position: relative;
   flex-grow: 1;
+  min-width: 0px;
 }
 .taProductViewer {
   display: flex;
@@ -12025,3 +12031,9 @@ body.tg-no-scroll-body {
 .bp3-dark .veToolbar-outer {
   background: #202b33;
 }
+/* .veVersionHistoryView {
+  background: #ebf1f5;
+}
+.bp3-dark .veVersionHistoryView {
+  background: #202b33;
+} */