adding a molecule type field to the status bar #805

TeselaGen · Jan 7, 2022 · ba519d1 · ba519d1
1 parent cb4d9e6
commit ba519d1
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 3 deletions.
diff --git a/cypress/integration/statusBar.spec.js b/cypress/integration/statusBar.spec.js
@@ -1,4 +1,19 @@
 describe("statusBar", function () {
+  it("molcule type should be an option in the menu bar", function () {
+    cy.visit("");
+    cy.contains(`[data-test="veStatusBar-type"]`, "DNA");
+    cy.get(`[data-test="moleculeType"]`).select("Protein");
+    cy.contains(`[data-test="veStatusBar-type"]`, "Protein");
+    cy.get(`[data-test="moleculeType"]`).select("RNA");
+    cy.contains(`[data-test="veStatusBar-type"]`, "RNA");
+    cy.get(`[data-test="moleculeType"]`).select("Oligo");
+    cy.contains(`[data-test="veStatusBar-type"]`, "Oligo");
+    cy.get(`[data-test="moleculeType"]`).select("mixedRnaAndDna");
+    cy.contains(`[data-test="veStatusBar-type"]`, "Mixed RNA/DNA");
+
+    cy.tgToggle("showMoleculeType", false);
+    cy.get(`[data-test="veStatusBar-type"]`).should("not.exist");
+  });
   it("melting temp should be an option in the menu bar", function () {
     cy.visit("");
     cy.selectRange(10, 30);

diff --git a/demo/src/EditorDemo/index.js b/demo/src/EditorDemo/index.js
@@ -54,6 +54,7 @@ const defaultState = {
   disableSetReadOnly: false,
   showReadOnly: true,
   showCircularity: true,
+  showMoleculeType: true,
   showGCContentByDefault: false,
   GCDecimalDigits: 1,
   onlyShowLabelsThatDoNotFit: true,
@@ -1454,6 +1455,11 @@ clickOverrides: {
                 type: "showCircularity",
                 info: `pass showCircularity=false to the <Editor> to not display the circularity toggle`
               })}
+              {renderToggle({
+                that: this,
+                type: "showMoleculeType",
+                info: `pass showMoleculeType=false to the <Editor> to not display the molecule type status item`
+              })}
               {renderToggle({
                 that: this,
                 type: "showAvailability",
@@ -2001,7 +2007,8 @@ clickOverrides: {
             disableSetReadOnly={this.state.disableSetReadOnly}
             withRotateCircularView={this.state.withRotateCircularView}
             showReadOnly={this.state.showReadOnly}
-            showCircularity={this.state.showCircularity}
+            showCircularity={!!this.state.showCircularity}
+            showMoleculeType={this.state.showMoleculeType}
             showGCContentByDefault={this.state.showGCContentByDefault}
             onlyShowLabelsThatDoNotFit={this.state.onlyShowLabelsThatDoNotFit}
             GCDecimalDigits={this.state.GCDecimalDigits}

diff --git a/src/Editor/userDefinedHandlersAndOpts.js b/src/Editor/userDefinedHandlersAndOpts.js
@@ -12,6 +12,7 @@ export const userDefinedHandlersAndOpts = [
   "disableSetReadOnly",
   "showReadOnly",
   "showCircularity",
+  "showMoleculeType",
   "showAvailability",
   "showGCContentByDefault",
   "GCDecimalDigits",

diff --git a/src/StatusBar/index.js b/src/StatusBar/index.js
@@ -92,8 +92,10 @@ const ShowSelectionItem = compose(
   }) => {
     const [showMeltingTemp] = useMeltingTemp();
 
-    const sequence = getSequenceDataBetweenRange(sequenceData, selectionLayer)
-      .sequence;
+    const sequence = getSequenceDataBetweenRange(
+      sequenceData,
+      selectionLayer
+    ).sequence;
 
     return (
       <React.Fragment>
@@ -136,6 +138,20 @@ const ShowLengthItem = connectToEditor(
   )} ${isProtein ? "AAs" : "bps"}`}</StatusBarItem>
 ));
 
+const ShowTypeItem = connectToEditor(({ sequenceData }) => ({
+  isProtein: sequenceData.isProtein,
+  isOligo: sequenceData.isOligo,
+  isRna: sequenceData.isRna,
+  isMixedRnaAndDna: sequenceData.isMixedRnaAndDna
+}))(({ isProtein, isOligo, isRna, isMixedRnaAndDna }) => {
+  let type = "DNA";
+  if (isProtein) type = "Protein";
+  if (isRna) type = "RNA";
+  if (isOligo) type = "Oligo";
+  if (isMixedRnaAndDna) type = "Mixed RNA/DNA";
+  return <StatusBarItem dataTest="veStatusBar-type">{type}</StatusBarItem>;
+});
+
 const EditCircularityItem = compose(
   connectToEditor(
     ({
@@ -210,6 +226,7 @@ export function StatusBar({
   onSave,
   editorName,
   showCircularity = true,
+  showMoleculeType = true,
   showReadOnly = true,
   showAvailability = false,
   showGCContentByDefault,
@@ -219,6 +236,9 @@ export function StatusBar({
 }) {
   return (
     <div className="veStatusBar">
+      {showMoleculeType && (
+        <ShowTypeItem editorName={editorName}></ShowTypeItem>
+      )}
       <EditReadOnlyItem
         editorName={editorName}
         {...{