From ba519d17f3fa31c9755a7934c179e4a9e0e45c43 Mon Sep 17 00:00:00 2001
From: Thomas Rich <tnrich@teselagen.com>
Date: Fri, 7 Jan 2022 10:35:20 -0800
Subject: [PATCH] adding a molecule type field to the status bar
 https://github.com/TeselaGen/openVectorEditor/issues/805

---
 cypress/integration/statusBar.spec.js    | 15 +++++++++++++++
 demo/src/EditorDemo/index.js             |  9 ++++++++-
 src/Editor/userDefinedHandlersAndOpts.js |  1 +
 src/StatusBar/index.js                   | 24 ++++++++++++++++++++++--
 4 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/cypress/integration/statusBar.spec.js b/cypress/integration/statusBar.spec.js
index e45a96c26..8a9ca02f6 100644
--- 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
index 8cfcb7357..17fd48bc8 100644
--- 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
index f049bf9a7..dcd83674f 100644
--- 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
index caf6be47b..19249b45b 100644
--- 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}
         {...{