wip : add SVGSequenceBreakLabel

cheminfo · Jun 10, 2024 · 0793b4c · 0793b4c
1 parent 07f2e37
commit 0793b4c
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 8 deletions.
diff --git a/src/components/SVGSequenceBreakFromBegin.jsx b/src/components/SVGSequenceBreakFromBegin.jsx
@@ -1,12 +1,16 @@
+import { SVGSequenceBreakLabel } from './SVGSequenceBreakLabel';
+
 export function SVGSequenceBreakFromBegin({ sequenceBreak, options }) {
   const {
     leftRightBorders = 50,
     spaceBetweenResidues = 30,
     strokeWidth = 2,
+    labelSize = 12,
   } = options;
   const xStart = leftRightBorders + 1.6 * spaceBetweenResidues;
   const x = xStart + sequenceBreak.position * spaceBetweenResidues;
   const y = '69';
+  const fontSizeLabel = (2 * labelSize) / 3;
   return (
     <>
       <line
@@ -27,6 +31,17 @@ export function SVGSequenceBreakFromBegin({ sequenceBreak, options }) {
         strokeWidth={strokeWidth}
         stroke={sequenceBreak.color}
       />
+      {sequenceBreak.members.map((m, index) => (
+        <SVGSequenceBreakLabel
+          x={x}
+          y={String(Number(y) + 15 + index * fontSizeLabel)}
+          label={m.type}
+          charge={m.charge}
+          similarity={Math.trunc(m.similarity * 100)}
+          options={options}
+          key={`breakLabelFromBegin${m.type}${String(index)}`}
+        />
+      ))}
     </>
   );
 }
diff --git a/src/components/SVGSequenceBreakFromEnd.jsx b/src/components/SVGSequenceBreakFromEnd.jsx
@@ -1,12 +1,16 @@
+import { SVGSequenceBreakLabel } from './SVGSequenceBreakLabel';
+
 export function SVGSequenceBreakFromEnd({ sequenceBreak, options }) {
   const {
     leftRightBorders = 50,
     spaceBetweenResidues = 30,
     strokeWidth = 2,
+    labelSize = 12,
   } = options;
   const xStart = leftRightBorders + 1.7 * spaceBetweenResidues;
   const x = xStart + sequenceBreak.position * spaceBetweenResidues;
   const y = '69';
+  const fontSizeLabel = (2 * labelSize) / 3;
   return (
     <>
       <line
@@ -27,6 +31,17 @@ export function SVGSequenceBreakFromEnd({ sequenceBreak, options }) {
         strokeWidth={strokeWidth}
         stroke={sequenceBreak.color}
       />
+      {sequenceBreak.members.map((m, index) => (
+        <SVGSequenceBreakLabel
+          x={x}
+          y={String(Number(y) - 15 - index * fontSizeLabel)}
+          label={m.type}
+          charge={m.charge}
+          similarity={Math.trunc(m.similarity * 100)}
+          options={options}
+          key={`breakLabelFromEnd${m.type}${String(index)}`}
+        />
+      ))}
     </>
   );
 }
diff --git a/src/components/SVGSequenceBreakLabel.jsx b/src/components/SVGSequenceBreakLabel.jsx
@@ -1,10 +1,19 @@
-export function SVGSequenceBreakLabel({ x, y, label, charge, similarity }) {
+export function SVGSequenceBreakLabel({
+  x,
+  y,
+  label,
+  charge,
+  similarity,
+  options,
+}) {
+  const { labelFontFamily = 'Verdana', labelSize = 12 } = options;
+  const fontSize = String((2 * Number(labelSize)) / 3);
   return (
     <>
       <text
         fill="#999999"
-        fontFamily="verdana"
-        fontSize="8"
+        fontFamily={labelFontFamily}
+        fontSize={fontSize}
         fontWeight="bold"
         textAnchor="end"
         svgjs:data="{'leading':'1.3'}"
@@ -15,8 +24,8 @@ export function SVGSequenceBreakLabel({ x, y, label, charge, similarity }) {
       </text>
       <text
         fill="#999999"
-        fontFamily="verdana"
-        fontSize="4"
+        fontFamily={labelFontFamily}
+        fontSize={String(Number(fontSize) / 2)}
         svgjs:data="{'leading':'1.3'}"
         x={x}
         y={String(Number(y) - 4)}
@@ -25,8 +34,8 @@ export function SVGSequenceBreakLabel({ x, y, label, charge, similarity }) {
       </text>
       <text
         fill="#999999"
-        fontFamily="verdana"
-        fontSize="4"
+        fontFamily={labelFontFamily}
+        fontSize={String(Number(fontSize) / 2)}
         svgjs:data="{'leading':'1.3'}"
         x={x}
         y={y}

diff --git a/src/components/SVGSequenceElement.jsx b/src/components/SVGSequenceElement.jsx
@@ -3,7 +3,7 @@ export function SVGSequenceElement({ element, index, options }) {
     leftRightBorders = 50,
     spaceBetweenResidues = 30,
     labelFontFamily = 'Verdana',
-    labelSize = 8,
+    labelSize = 12,
   } = options;
   const x = String(leftRightBorders + index * spaceBetweenResidues);
   const y = '69';