Merge pull request #89 from manulera/issue_88

closes #88
TeselaGen · Jul 12, 2024 · 4dcca18 · 4dcca18
2 parents 260d9dd + d3a44ac
commit 4dcca18
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git a/packages/ove/demo/src/exampleData/exampleSequenceData.js b/packages/ove/demo/src/exampleData/exampleSequenceData.js
@@ -34,6 +34,22 @@ export default {
       end: 300,
       type: "primer_bind",
       forward: true
+    },
+    {
+      name: "Blue primer",
+      start: 1,
+      end: 20,
+      type: "primer_bind",
+      forward: true,
+      color: "blue"
+    },
+    {
+      name: "Red primer",
+      start: 21,
+      end: 30,
+      type: "primer_bind",
+      forward: true,
+      color: "red"
     }
   ],
   afeatures: [

diff --git a/packages/ove/src/CircularView/Primer.js b/packages/ove/src/CircularView/Primer.js
@@ -26,13 +26,13 @@ export default function CircularPrimer(props) {
   });
   return (
     <React.Fragment>
-      {getStripedPattern({ color })}
+      {getStripedPattern({ color, id })}
       <path
         className="vePrimer veCircularViewPrimer"
         id={id}
         strokeWidth=".5"
         stroke="black"
-        fill="url(#diagonalHatch)"
+        fill={`url(#diagonalHatch-${id})`}
         d={path.print()}
       />
       {getInternalLabel({ ...props, colorToUse: color, textPath })}

diff --git a/packages/ove/src/RowItem/StackedAnnotations/PointedAnnotation.js b/packages/ove/src/RowItem/StackedAnnotations/PointedAnnotation.js
@@ -239,7 +239,7 @@ function PointedAnnotation(props) {
         strokeWidth="1"
         stroke={stroke || "black"}
         opacity={opacity}
-        fill={isStriped ? "url(#diagonalHatch)" : fill || color}
+        fill={isStriped ? `url(#diagonalHatch-${id})` : fill || color}
         transform={
           forward
             ? null

diff --git a/packages/ove/src/utils/editorUtils.js b/packages/ove/src/utils/editorUtils.js
@@ -171,10 +171,10 @@ export function getSelFromWrappedAddon(selectionLayer, sequenceLength) {
   return selToUse;
 }
 
-export function getStripedPattern({ color }) {
+export function getStripedPattern({ color, id }) {
   return (
     <pattern
-      id="diagonalHatch"
+      id={`diagonalHatch-${id}`}
       patternUnits="userSpaceOnUse"
       width="4"
       height="4"