@teselagen/ove 0.7.15 → 0.7.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.7.15",
+  "version": "0.7.16",
   "main": "./src/index.js",
   "exports": {
     ".": {
@@ -12,7 +12,7 @@
   "dependencies": {
     "@teselagen/sequence-utils": "0.3.27",
     "@teselagen/range-utils": "0.3.7",
-    "@teselagen/ui": "0.7.17",
+    "@teselagen/ui": "0.7.18",
     "@teselagen/file-utils": "0.3.18",
     "@teselagen/bounce-loader": "0.3.11",
     "@teselagen/bio-parsers": "0.4.22",
@@ -60,6 +60,7 @@
     "mock-fs": "5.2.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",

package/src/FindBar/index.js

@@ -5,14 +5,13 @@ import {
   Switch,
   Popover,
   Position,
-  HTMLSelect,
   TextArea,
   Tooltip
 } from "@blueprintjs/core";
 import withEditorProps from "../withEditorProps";
 import { MAX_MATCHES_DISPLAYED } from "../constants/findToolConstants";
 import "./style.css";
-import { InfoHelper } from "@teselagen/ui";
+import { InfoHelper, TgHTMLSelect } from "@teselagen/ui";
 import { searchableTypes } from "../selectors/annotationSearchSelector";
 import { getSingular } from "../utils/annotationTypes";
 import { getFeatureToColorMap } from "@teselagen/sequence-utils";
@@ -83,7 +82,7 @@ export class FindBar extends React.Component {
       }
     };
     const findOptionsEls = [
-      <HTMLSelect
+      <TgHTMLSelect
         key="dnaoraa"
         options={opts}
         name="dnaOrAA"
@@ -93,7 +92,7 @@ export class FindBar extends React.Component {
         }}
       />,
       <div style={{ display: "flex" }} key="ambiguousorliteral">
-        <HTMLSelect
+        <TgHTMLSelect
           name="ambiguousOrLiteral"
           options={[
             { label: "Literal", value: "LITERAL" },

package/src/StatusBar/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, Classes, HTMLSelect } from "@blueprintjs/core";
+import { Button, Classes } from "@blueprintjs/core";
 
 import {
   connectToEditor,
@@ -15,8 +15,9 @@ import useMeltingTemp from "../utils/useMeltingTemp";
 import MeltingTemp from "./MeltingTemp";
 import { getSequenceWithinRange } from "@teselagen/range-utils";
 import { handleReadOnlyChange } from "../ToolBar/editTool";
+import { TgHTMLSelect } from "@teselagen/ui";
 
-const EditReadOnlyItem = connectToEditor(({ readOnly }) => ({
+export const EditReadOnlyItem = connectToEditor(({ readOnly }) => ({
   readOnly
 }))(props => {
   const {
@@ -26,12 +27,15 @@ const EditReadOnlyItem = connectToEditor(({ readOnly }) => ({
     disableSetReadOnly,
     disableBpEditing
   } = props;
+  const disabled = disableSetReadOnly || !onSave; //the !onSave here is redundant
   return showReadOnly ? (
     <StatusBarItem dataTest="veStatusBar-readOnly">
       {onSave ? (
-        <HTMLSelect
+        <TgHTMLSelect
           data-tip={
-            !readOnly && disableBpEditing ? disableBpEditing : undefined
+            !readOnly && typeof disableBpEditing === "string"
+              ? disableBpEditing
+              : undefined
           }
           options={[
             {
@@ -43,8 +47,8 @@ const EditReadOnlyItem = connectToEditor(({ readOnly }) => ({
               value: "editable"
             }
           ]}
-          disabled={disableSetReadOnly || !onSave} //the !onSave here is redundant
-          className={Classes.MINIMAL}
+          disabled={disabled}
+          className={Classes.MINIMAL + " veReadOnlySelect"}
           value={readOnly ? "readOnly" : "editable"}
           onChange={({ target: { value } }) =>
             handleReadOnlyChange(value === "readOnly", props)
@@ -153,7 +157,7 @@ const ShowTypeItem = connectToEditor(({ sequenceData }) => ({
   return <StatusBarItem dataTest="veStatusBar-type">{type}</StatusBarItem>;
 });
 
-const EditCircularityItem = compose(
+export const EditCircularityItem = compose(
   connectToEditor(
     ({
       readOnly,
@@ -176,7 +180,7 @@ const EditCircularityItem = compose(
           "Linear"
         )
       ) : (
-        <HTMLSelect
+        <TgHTMLSelect
           onChange={({ target: { value } }) => {
             updateCircular(value === "circular");
           }}
@@ -191,7 +195,7 @@ const EditCircularityItem = compose(
     </StatusBarItem>
   ) : null;
 });
-const EditAvailabilityItem = connectToEditor(
+export const EditAvailabilityItem = connectToEditor(
   ({ readOnly, sequenceData: { materiallyAvailable } = {} }) => ({
     readOnly,
     materiallyAvailable
@@ -206,7 +210,7 @@ const EditAvailabilityItem = connectToEditor(
           "Unavailable"
         )
       ) : (
-        <HTMLSelect
+        <TgHTMLSelect
           onChange={({ target: { value } }) => {
             updateAvailability(value === "available");
           }}

package/src/helperComponents/PropertiesDialog/GeneralProperties.js

@@ -1,9 +1,13 @@
 import React from "react";
-import { InputField, BPSelect, TextareaField } from "@teselagen/ui";
+import { InputField, TextareaField } from "@teselagen/ui";
 import { reduxForm } from "redux-form";
 import withEditorProps from "../../withEditorProps";
 import { compose } from "recompose";
-import { handleReadOnlyChange } from "../../ToolBar/editTool";
+import {
+  EditAvailabilityItem,
+  EditCircularityItem,
+  EditReadOnlyItem
+} from "../../StatusBar";
 
 class GeneralProperties extends React.Component {
   updateSeqDesc = val => {
@@ -13,13 +17,14 @@ class GeneralProperties extends React.Component {
     const {
       readOnly,
       showReadOnly = true,
-      updateCircular,
       isProtein,
       disableSetReadOnly,
-      updateAvailability,
       sequenceData,
       onSave,
       showAvailability,
+      beforeReadOnlyChange,
+      editorName,
+      disableBpEditing,
       sequenceNameUpdate
     } = this.props;
     const {
@@ -28,9 +33,7 @@ class GeneralProperties extends React.Component {
       isOligo,
       isRna,
       sequence = "",
-      proteinSequence = "",
-      circular,
-      materiallyAvailable
+      proteinSequence = ""
     } = sequenceData || {};
     return (
       <React.Fragment>
@@ -48,22 +51,13 @@ class GeneralProperties extends React.Component {
             />{" "}
           </div>
         </div>
+
         {!isProtein && !isOligo && !isRna && (
           <div className="ve-flex-row circularLinearSelect">
             <div className="ve-column-left bp3-label">Circular/Linear</div>{" "}
             <div className="ve-column-right">
               {" "}
-              <BPSelect
-                disabled={readOnly}
-                onChange={val => {
-                  updateCircular(val === "circular");
-                }}
-                value={circular ? "circular" : "linear"}
-                options={[
-                  { label: "Circular", value: "circular" },
-                  { label: "Linear", value: "linear" }
-                ]}
-              />
+              <EditCircularityItem editorName={editorName} showCircularity />
             </div>
           </div>
         )}
@@ -75,17 +69,7 @@ class GeneralProperties extends React.Component {
             </div>{" "}
             <div className="ve-column-right">
               {" "}
-              <BPSelect
-                disabled={readOnly}
-                onChange={val => {
-                  updateAvailability(val === "available");
-                }}
-                value={materiallyAvailable ? "available" : "unavailable"}
-                options={[
-                  { label: "Available", value: "available" },
-                  { label: "Unavailable", value: "unavailable" }
-                ]}
-              />
+              <EditAvailabilityItem editorName={editorName} showAvailability />
             </div>
           </div>
         )}
@@ -101,17 +85,13 @@ class GeneralProperties extends React.Component {
             <div className="ve-column-left bp3-label">Is Editable</div>{" "}
             <div className="ve-column-right">
               {" "}
-              <BPSelect
-                className={"veReadOnlySelect"}
-                disabled={!onSave || disableSetReadOnly}
-                onChange={val =>
-                  handleReadOnlyChange(val === "readOnly", this.props)
-                }
-                value={readOnly ? "readOnly" : "editable"}
-                options={[
-                  { label: "Read Only", value: "readOnly" },
-                  { label: "Editable", value: "editable" }
-                ]}
+              <EditReadOnlyItem
+                beforeReadOnlyChange={beforeReadOnlyChange}
+                editorName={editorName}
+                onSave={onSave}
+                disableBpEditing={disableBpEditing}
+                disableSetReadOnly={disableSetReadOnly}
+                showReadOnly={showReadOnly}
               />
             </div>
           </div>