fix: update key props for improved rendering and consistency across c…

…omponents, fix reflex styling, fix misc console warnings
TeselaGen · Dec 4, 2024 · 8b0ccd6 · 8b0ccd6
1 parent 7c7158b
commit 8b0ccd6
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 47 deletions.
diff --git a/packages/ove/src/CircularView/Labels/index.js b/packages/ove/src/CircularView/Labels/index.js
@@ -416,23 +416,9 @@ function LabelLine(pointArray, options) {
   });
   return (
     <React.Fragment key="labelLine">
-      {/* <polyline
-        {...{
-          key: "polyline-short",
-          points,
-          stroke: "black",
-          fill: "none",
-          strokeWidth: 1,
-          // style: {
-          //   opacity: 0.2
-          // },
-          className: "veLabelLine",
-          ...options
-        }}
-      /> */}
       <polyline
+        key="polyline-long"
         {...{
-          key: "polyline-long",
           points,
           stroke: "black",
           fill: "none",

diff --git a/packages/ove/src/CircularView/index.js b/packages/ove/src/CircularView/index.js
@@ -597,12 +597,11 @@ export function CircularView(props) {
         ) {
           return (
             <SelectionLayer
-              key={index}
+              key={"veCircularViewSelectionLayer" + index}
               {...{
                 index,
                 isDraggable: true,
                 isProtein,
-                key: "veCircularViewSelectionLayer" + index,
                 selectionLayer,
                 onRightClicked: selectionLayer.isSearchLayer
                   ? searchLayerRightClicked
@@ -635,13 +634,13 @@ export function CircularView(props) {
       //only render if there is no selection layer
       return (
         <Caret
+          key="veCircularViewCaret"
           {...{
             caretPosition,
             sequenceLength,
             isProtein,
             innerRadius,
-            outerRadius: radius,
-            key: "veCircularViewCaret"
+            outerRadius: radius
           }}
         />
       );

diff --git a/packages/ove/src/Reflex/reflex-styles.css b/packages/ove/src/Reflex/reflex-styles.css
@@ -34,33 +34,33 @@
 }
 
 .reflex-layout > .reflex-splitter {
-  background-color: #f5f8fa;
+  background-color: #f1f1f1;
   z-index: 100;
 }
 
 .reflex-layout > .reflex-splitter.active,
 .reflex-layout > .reflex-splitter:hover {
-  background-color: #f5f8fa;
+  background-color: #cccccc;
   transition: all 1s ease;
 }
 
 .reflex-layout.horizontal > .reflex-splitter {
-  border-bottom: 1px solid #f5f8fa;
-  border-top: 1px solid #f5f8fa;
+  border-bottom: 1px solid #f1f1f1;
+  border-top: 1px solid #f1f1f1;
   cursor: row-resize;
   width: 100%;
   height: 2px;
 }
 
 .reflex-layout.horizontal > .reflex-splitter:hover,
 .reflex-layout.horizontal > .reflex-splitter.active {
-  border-bottom: 1px solid #f5f8fa;
-  border-top: 1px solid #f5f8fa;
+  border-bottom: 1px solid #cccccc;
+  border-top: 1px solid #cccccc;
 }
 
 .reflex-layout.vertical > .reflex-splitter {
-  border-right: 1px solid #f5f8fa;
-  border-left: 1px solid #f5f8fa;
+  border-right: 1px solid #f1f1f1;
+  border-left: 1px solid #f1f1f1;
   cursor: col-resize;
   height: 95%;
   width: 2px;
@@ -73,8 +73,8 @@
 
 .reflex-layout.vertical > .reflex-splitter:hover,
 .reflex-layout.vertical > .reflex-splitter.active {
-  border-right: 1px solid #f5f8fa;
-  border-left: 1px solid #f5f8fa;
+  border-right: 1px solid #cccccc;
+  border-left: 1px solid #cccccc;
 }
 
 .reflex-layout > .reflex-splitter.reflex-thin {

diff --git a/packages/ove/src/RowItem/CutsiteSelectionLayers.js b/packages/ove/src/RowItem/CutsiteSelectionLayers.js
@@ -26,10 +26,10 @@ export const CutsiteSelectionLayers = connectToEditor(
         layer.start > -1 && (
           <SelectionLayer
             hideTitle
+            key={"restrictionSiteRange" + index}
             {...annotationCommonProps}
             {...{
               id: cutsite.id,
-              key: "restrictionSiteRange" + index,
               height: showReverseSequence ? sequenceHeight * 2 : sequenceHeight,
               regions: [layer],
               row: alignmentData

diff --git a/packages/ove/src/RowItem/SelectionLayer/index.js b/packages/ove/src/RowItem/SelectionLayer/index.js
@@ -105,6 +105,7 @@ function SelectionLayer(props) {
               caretSvgs = [
                 overlap.start === start && (
                   <Caret
+                    key={key + "caret1"}
                     {...{
                       leftMargin,
                       onClick: _onClick || preventDefaultStopPropagation,
@@ -115,7 +116,6 @@ function SelectionLayer(props) {
                       getGaps,
                       isDraggable,
                       ignoreGaps,
-                      key: key + "caret1",
                       sequenceLength,
                       className:
                         classNameToPass +
@@ -127,6 +127,7 @@ function SelectionLayer(props) {
                 ),
                 overlap.end === end && (
                   <Caret
+                    key={key + "caret2"}
                     {...{
                       leftMargin,
                       onClick: _onClick || preventDefaultStopPropagation,
@@ -137,7 +138,6 @@ function SelectionLayer(props) {
                       getGaps,
                       style: selectionLayer.style,
                       ignoreGaps,
-                      key: key + "caret2",
                       sequenceLength,
                       className:
                         classNameToPass +

diff --git a/packages/ove/src/RowItem/Sequence.js b/packages/ove/src/RowItem/Sequence.js
@@ -175,7 +175,6 @@ class Sequence extends React.Component {
               width,
               position: "absolute"
             }}
-            ref="rowViewTextContainer"
             className="rowViewTextContainer"
             height={Math.max(0, Number(height))}
           >

diff --git a/packages/ove/src/RowItem/Translations/Translation.js b/packages/ove/src/RowItem/Translations/Translation.js
@@ -69,6 +69,7 @@ class Translation extends React.Component {
           nextAaSliver = aminoAcidsForSubrange[index + 2];
           return (
             <rect
+              key={annotation.id + aminoAcidSliver.sequenceIndex}
               x={index * charWidth}
               y={height / 2 - height / 16}
               width={charWidth}

diff --git a/packages/ove/src/RowItem/index.js b/packages/ove/src/RowItem/index.js
@@ -561,7 +561,6 @@ export default function RowItem(props) {
                     height: sequenceHeight,
                     position: "absolute"
                   }}
-                  ref="rowViewTextContainer"
                   onClick={function (event) {
                     replacementLayerClicked({
                       annotation: replacementLayer,

diff --git a/packages/sequence-utils/src/getAminoAcidDataForEachBaseOfDna.js b/packages/sequence-utils/src/getAminoAcidDataForEachBaseOfDna.js
@@ -28,8 +28,7 @@ function getNextTriplet(index, sequenceString, exonRange) {
   // including introns.
   const codonPositions = [];
 
-  // A function to check if a base is within an exon, defined here
-  // to avoid function creation in the loop (linter error)
+  // A function to check if a base is within an exon
   const isBaseInExon = baseIndex =>
     exonRange.some(r =>
       isPositionWithinRange(baseIndex, r, sequenceString.length, true, false)
@@ -251,28 +250,31 @@ export default function getAminoAcidDataForEachBaseOfDna(
     let positionInCodon = 0;
     for (let i = 0; i < basesRead; i++) {
       const posInCds = i + index;
+      const sequenceIndex = codonPositionsInCDS.includes(posInCds)
+        ? absoluteCodonPositions[codonPositionsInCDS.indexOf(posInCds)]
+        : positionInCdsToPositionInMainSequence(
+            posInCds,
+            forward,
+            translationRange,
+            originalSequenceStringLength
+          );
       if (codonPositionsInCDS.includes(posInCds)) {
         aminoAcidDataForEachBaseOfDNA.push({
           aminoAcid,
           positionInCodon,
           aminoAcidIndex,
-          sequenceIndex: absoluteCodonPositions[i],
+          sequenceIndex,
           codonRange,
           fullCodon: codonPositionsInCDS.length === 3
         });
         positionInCodon++;
       } else {
-        // TODO: what should we insert here?
+        // push a null object for intron bases
         aminoAcidDataForEachBaseOfDNA.push({
           aminoAcid: null,
           positionInCodon: null,
           aminoAcidIndex: null,
-          sequenceIndex: positionInCdsToPositionInMainSequence(
-            posInCds,
-            forward,
-            translationRange,
-            originalSequenceStringLength
-          ),
+          sequenceIndex,
           codonRange: null,
           fullCodon: null
         });

diff --git a/packages/ui/src/utils/menuUtils.js b/packages/ui/src/utils/menuUtils.js
@@ -244,7 +244,7 @@ export const DynamicMenuItem = ({
           ? item.submenu
               .filter(ident)
               .map((def, index) => (
-                <DynamicMenuItem {...{ def, enhancers, context }} key={index} />
+                <DynamicMenuItem key={index} {...{ def, enhancers, context }} />
               ))
           : undefined}
       </ItemComponent>
@@ -268,7 +268,7 @@ export const DynamicMenuItem = ({
 export const createDynamicMenu = (menuDef, enhancers, context) => {
   if (menuDef instanceof Array) {
     return menuDef.map((def, index) => (
-      <DynamicMenuItem {...{ def, enhancers, context }} key={index} />
+      <DynamicMenuItem key={index} {...{ def, enhancers, context }} />
     ));
   } else {
     return <DynamicMenuItem {...{ def: menuDef, enhancers, context }} />;
@@ -282,7 +282,7 @@ export const createDynamicBarMenu = (topMenuDef, enhancers, context) => {
     const def = { ...topLevelItem };
     if (def.submenu) {
       def.submenu = def.submenu.map((subdef, index) => (
-        <DynamicMenuItem def={subdef} {...{ enhancers, context }} key={index} />
+        <DynamicMenuItem key={index} def={subdef} {...{ enhancers, context }} />
       ));
     }
     return def;