feat: replace HTMLSelect with TgHTMLSelect to provide better disabled…

… experience

packages/ove/demo/src/EditorDemo/index.js

@@ -2738,7 +2738,11 @@ doubleClickOverrides: {
             }}
             withPreviewMode={withPreviewMode}
             disableSetReadOnly={this.state.disableSetReadOnly}
-            disableBpEditing={this.state.disableBpEditing}
+            disableBpEditing={
+              this.state.disableBpEditing
+                ? "Editing Base Pairs is Disabled Because I Said So"
+                : undefined
+            }
             withRotateCircularView={this.state.withRotateCircularView}
             withZoomCircularView={this.state.withZoomCircularView}
             showReadOnly={this.state.showReadOnly}

packages/ove/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" },

packages/ove/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,7 +47,7 @@ const EditReadOnlyItem = connectToEditor(({ readOnly }) => ({
               value: "editable"
             }
           ]}
-          disabled={disableSetReadOnly || !onSave} //the !onSave here is redundant
+          disabled={disabled}
           className={Classes.MINIMAL}
           value={readOnly ? "readOnly" : "editable"}
           onChange={({ target: { value } }) =>
@@ -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");
           }}

packages/ove/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>

packages/ui/src/TgHtmlSelect/index.js

@@ -0,0 +1,20 @@
+import { HTMLSelect } from "@blueprintjs/core";
+import React from "react";
+import classNames from "classnames";
+
+// so far this component just makes the styling of the disabled html select
+// look like a regular html select with the selected option displayed
+// (instead of greyed out and without the ability to have tooltips working)
+const TgHTMLSelect = ({ disabled, ...rest }) => {
+  if (disabled) {
+    const opt = rest.options.find(o => o.value === rest.value);
+    return (
+      <div {...rest} className={classNames("bp3-html-select", rest.className)}>
+        {opt.label}
+      </div>
+    );
+  }
+  return <HTMLSelect {...rest}></HTMLSelect>;
+};
+
+export default TgHTMLSelect;

packages/ui/src/index.js

@@ -30,6 +30,7 @@ export { default as Loading } from "./Loading";
 export { throwFormError } from "./throwFormError";
 export { default as AdvancedOptions } from "./AdvancedOptions";
 export { default as TgSelect } from "./TgSelect";
+export { default as TgHTMLSelect } from "./TgHtmlSelect";
 export { default as wrapDialog } from "./wrapDialog";
 export { default as PromptUnsavedChanges } from "./PromptUnsavedChanges";
 export { default as BlueprintError } from "./BlueprintError";