wip: implementing fragment line. TO FIX : x position of fragment label

demo/Fragmentation.jsx

@@ -1,4 +1,5 @@
 import { SVGMassFragmentation } from '../src/components/SVGMassFragmentation';
+import { generateReactKey } from '../src/generateReactKey.js';
 
 export default function Fragmentation({ sequence, analysisInfo, options }) {
   return (
@@ -7,11 +8,13 @@ export default function Fragmentation({ sequence, analysisInfo, options }) {
         border: '1px solid red',
         overflow: 'clip',
       }}
+      key={`SVG-${generateReactKey('')}`}
     >
       <SVGMassFragmentation
         sequence={sequence}
         analysisInfo={analysisInfo}
         options={options}
+        key={`SVGMassFragmentation-${generateReactKey('')}`}
       />
     </div>
   );

demo/data/nucleotide.js

@@ -48,7 +48,7 @@ let analysisInfo = [
 ];
 
 let options = {
-  width: 200,
+  width: 300,
   leftRightBorders: 50,
   spaceBetweenResidues: 20,
   spaceBetweenInternalLines: 12,

demo/data/peptide.js

@@ -23,7 +23,7 @@ const analysisInfo = [
 ];
 
 const options = {
-  width: 400,
+  width: 500,
   leftRightBorders: 30,
   spaceBetweenResidues: 20,
   spaceBetweenInternalLines: 12,

demo/main.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 
+import { generateReactKey } from '../src/generateReactKey';
+
 import Fragmentation from './Fragmentation';
 import { nucleotide } from './data/nucleotide';
 import { peptide } from './data/peptide';
@@ -13,12 +15,14 @@ root.render(
       sequence={peptide.sequence}
       analysisInfo={peptide.analysisInfo}
       options={peptide.options}
+      key={`fragmentation-pept-${generateReactKey('')}`}
     />
     <h2>Nucléotide</h2>
     <Fragmentation
       sequence={nucleotide.sequence}
       analysisInfo={nucleotide.analysisInfo}
       options={nucleotide.options}
+      key={`fragmentation-nucl-${generateReactKey('')}`}
     />
   </>,
 );

src/appendLines.js

@@ -7,6 +7,13 @@ function maxBreaksOnSequenceLine(breaks) {
   }
   return maxBreaks;
 }
+function totalFragments(fragements) {
+  let total = 0;
+  for (let f of fragements) {
+    total += f.members.length;
+  }
+  return total;
+}
 
 export function appendLines(data, options) {
   const {
@@ -45,13 +52,14 @@ export function appendLines(data, options) {
   data.height = 0;
   let lastHeightBelow = 0;
   for (let L of lines) {
-    const nbFragment = L.fragments.length;
+    const nbFragment = totalFragments(L.fragments);
     const maxBreakAbove =
       maxBreaksOnSequenceLine(L.break.filter((b) => b.fromEnd)) + 1; // 1 : sequence line height + break symbols spaces
     const maxBreakBelow =
       maxBreaksOnSequenceLine(L.break.filter((b) => b.fromBegin)) + 1;
     L.heightBelow = maxBreakBelow * spaceBetweenInternalLines;
-    L.heightAbove = (maxBreakAbove + nbFragment) * spaceBetweenInternalLines;
+    L.heightAbove =
+      (maxBreakAbove + nbFragment + 1) * spaceBetweenInternalLines;
     data.height += L.heightBelow + L.heightAbove;
     L.totalheightAbove = lastHeightBelow + L.heightAbove;
     L.y = data.height - L.heightBelow;

src/appendResults.js

@@ -45,7 +45,8 @@ export function appendResults(data, analysisResult, options = {}) {
       if (parts[1].match(/^[abcd][1-9]/)) {
         [parts[0], parts[1]] = [parts[1], parts[0]];
       }
-      result.to = getNumber(parts[0]) - 1;
+      // result.to = getNumber(parts[0]) - 1;
+      result.to = getNumber(parts[0]);
       result.from = numberResidues - getNumber(parts[1]);
     } else {
       if (parts[0].match(/^[abcd][1-9]/)) {

src/components/SVGFragment.jsx

@@ -0,0 +1,55 @@
+import { SVGSequenceLabel } from './SVGSequenceLabel';
+
+export function SVGFragment({
+  fragment,
+  firstIndexOnLine,
+  y,
+  indexFragment,
+  options,
+}) {
+  const {
+    width = 600,
+    leftRightBorders = 50,
+    spaceBetweenResidues = 30,
+    spaceBetweenInternalLines = 12,
+    strokeWidth = 2,
+    labelFontFamily = 'Verdana',
+    labelSize = 8,
+  } = options;
+  const xStart =
+    leftRightBorders +
+    (fragment.from - firstIndexOnLine) * spaceBetweenResidues;
+  const xEnd =
+    leftRightBorders + (fragment.to - firstIndexOnLine) * spaceBetweenResidues;
+  const yLine = y - indexFragment * spaceBetweenInternalLines;
+  console.log(xStart, xEnd, (xEnd - xStart) / 2);
+  return (
+    <>
+      {fragment.members.map((member, index) => (
+        <>
+          <line
+            x1={xStart}
+            y1={yLine - index * spaceBetweenInternalLines}
+            x2={xEnd}
+            y2={yLine - index * spaceBetweenInternalLines}
+            strokeLinecap="round"
+            strokeWidth={strokeWidth}
+            stroke={fragment.color}
+            key={`SVGFragment-${xStart}${xEnd}${index}`}
+          />
+          <SVGSequenceLabel
+            x={Math.trunc((xEnd - xStart) / 2)}
+            // x={xEnd}
+            y={yLine - index * spaceBetweenInternalLines - strokeWidth}
+            label={member.type}
+            charge={member.charge}
+            similarity={Math.trunc(member.similarity * 100)}
+            textColor={member.textColor}
+            options={options}
+            key={`fragmentLabel${member.type}${String(index)}`}
+          />
+        </>
+      ))}
+    </>
+  );
+}

src/components/SVGFragmentLabel.jsx

@@ -0,0 +1 @@
+export function SVGFragmentLabel(x, y, label, charge, similarity, options) {}

src/components/SVGMassFragmentation.jsx

@@ -1,10 +1,22 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
 import { appendLines } from '../appendLines.js';
 import { appendResidues } from '../appendResidues.js';
 import { appendResults, sortResults } from '../appendResults.js';
 import { generateReactKey } from '../generateReactKey.js';
 
 import { SVGSequence } from './SVGSequence.jsx';
 import { SVGSequenceBreak } from './SVGSequenceBreak.jsx';
+import { SVGSequenceFragments } from './SVGSequenceFragments.jsx';
+
+function maxSequenceBreakAbove(breaks) {
+  let max = 0;
+  for (let b of breaks) {
+    if (b.members.length > max) max = b.members.length;
+  }
+  return max;
+}
 
 function initMassFragmentationData(sequence, analysisResults, options = {}) {
   const { parsing, merge, filter } = options;
@@ -18,14 +30,27 @@ function initMassFragmentationData(sequence, analysisResults, options = {}) {
 }
 
 export function SVGMassFragmentation({ sequence, analysisInfo, options }) {
+  const {
+    width = 600,
+    leftRightBorders = 50,
+    spaceBetweenResidues = 30,
+    spaceBetweenInternalLines = 12,
+    strokeWidth = 2,
+    labelFontFamily = 'Verdana',
+    labelSize = 8,
+    parsing,
+    merge,
+    filter,
+  } = options;
   const data = initMassFragmentationData(sequence, analysisInfo, options);
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox={`0 0 ${options.width} ${data.height}`}
+      key={`SVG-${generateReactKey('')}`}
     >
       {data.lines.map((line, index) => (
-        <>
+        <React.Fragment key={`SVGLine-${index}`}>
           <SVGSequence
             sequence={line.residues}
             y={line.y}
@@ -39,7 +64,18 @@ export function SVGMassFragmentation({ sequence, analysisInfo, options }) {
             options={options}
             key={generateReactKey(`sequenceBreak-${index}`)}
           />
-        </>
+          <SVGSequenceFragments
+            fragments={line.fragments}
+            firstIndexOnLine={line.from}
+            y={
+              line.y -
+              (maxSequenceBreakAbove(line.break.filter((b) => b.fromEnd)) + 1) *
+                spaceBetweenInternalLines
+            }
+            options={options}
+            key={`SVGFragments-${index}`}
+          />
+        </React.Fragment>
       ))}
     </svg>
   );

src/components/SVGSequenceBreakFromBegin.jsx

@@ -1,4 +1,4 @@
-import { SVGSequenceBreakLabel } from './SVGSequenceBreakLabel';
+import { SVGSequenceLabel } from './SVGSequenceLabel';
 
 export function SVGSequenceBreakFromBegin({
   sequenceBreak,
@@ -11,7 +11,6 @@ export function SVGSequenceBreakFromBegin({
     spaceBetweenResidues = 30,
     spaceBetweenInternalLines = 12,
     strokeWidth = 2,
-    labelSize = 8,
   } = options;
   const xStart = leftRightBorders + 1.5 * spaceBetweenResidues - strokeWidth;
   const x = xStart + indexOnLine * spaceBetweenResidues;
@@ -36,12 +35,13 @@ export function SVGSequenceBreakFromBegin({
         stroke={sequenceBreak.color}
       />
       {sequenceBreak.members.map((m, index) => (
-        <SVGSequenceBreakLabel
+        <SVGSequenceLabel
           x={x}
-          y={String(Number(y) + 15 + index * labelSize)}
+          y={String(Number(y) + 15 + index * spaceBetweenInternalLines)}
           label={m.type}
           charge={m.charge}
           similarity={Math.trunc(m.similarity * 100)}
+          textColor={m.textColor}
           options={options}
           key={`breakLabelFromBegin${m.type}${String(index)}`}
         />

src/components/SVGSequenceBreakFromEnd.jsx

@@ -1,4 +1,4 @@
-import { SVGSequenceBreakLabel } from './SVGSequenceBreakLabel';
+import { SVGSequenceLabel } from './SVGSequenceLabel';
 
 export function SVGSequenceBreakFromEnd({
   sequenceBreak,
@@ -11,7 +11,6 @@ export function SVGSequenceBreakFromEnd({
     spaceBetweenResidues = 30,
     spaceBetweenInternalLines = 12,
     strokeWidth = 2,
-    labelSize = 8,
   } = options;
   const xStart = leftRightBorders + 1.5 * spaceBetweenResidues + strokeWidth;
   const x = xStart + indexOnLine * spaceBetweenResidues;
@@ -36,12 +35,13 @@ export function SVGSequenceBreakFromEnd({
         stroke={sequenceBreak.color}
       />
       {sequenceBreak.members.map((m, index) => (
-        <SVGSequenceBreakLabel
+        <SVGSequenceLabel
           x={x}
-          y={String(Number(y) - 15 - index * labelSize)}
+          y={String(Number(y) - 15 - index * spaceBetweenInternalLines)}
           label={m.type}
           charge={m.charge}
           similarity={Math.trunc(m.similarity * 100)}
+          textColor={m.textColor}
           options={options}
           key={`breakLabelFromEnd${m.type}${String(index)}`}
         />

src/components/SVGSequenceFragments.jsx

@@ -0,0 +1,37 @@
+import { SVGFragment } from './SVGFragment';
+
+export function SVGSequenceFragments({
+  fragments,
+  firstIndexOnLine,
+  y,
+  options,
+}) {
+  const {
+    width = 600,
+    leftRightBorders = 50,
+    spaceBetweenResidues = 30,
+    spaceBetweenInternalLines = 12,
+    strokeWidth = 2,
+    labelFontFamily = 'Verdana',
+    labelSize = 8,
+  } = options;
+  let indexFragment = 0;
+  return (
+    <>
+      {fragments.map((fragment, index) => {
+        let iF = indexFragment;
+        indexFragment += fragment.members.length;
+        return (
+          <SVGFragment
+            fragment={fragment}
+            firstIndexOnLine={firstIndexOnLine}
+            y={y}
+            indexFragment={iF}
+            options={options}
+            key={`SVGFragment-${index}`}
+          />
+        );
+      })}
+    </>
+  );
+}

src/components/SVGSequenceBreakLabel.jsx → src/components/SVGSequenceLabel.jsx

@@ -1,42 +1,41 @@
-export function SVGSequenceBreakLabel({
+export function SVGSequenceLabel({
   x,
   y,
   label,
   charge,
   similarity,
+  textColor,
   options,
 }) {
   const { labelFontFamily = 'Verdana', labelSize = 12 } = options;
   const fontSize = String((2 * Number(labelSize)) / 3);
+  // console.log(x);
   return (
     <>
       <text
-        fill="#999999"
+        fill={textColor}
         fontFamily={labelFontFamily}
         fontSize={fontSize}
         fontWeight="bold"
         textAnchor="end"
-        svgjs:data="{'leading':'1.3'}"
         x={x}
         y={y}
       >
         {label}
       </text>
       <text
-        fill="#999999"
+        fill={textColor}
         fontFamily={labelFontFamily}
         fontSize={String(Number(fontSize) / 2)}
-        svgjs:data="{'leading':'1.3'}"
         x={x}
-        y={String(Number(y) - 4)}
+        y={String(Number(y) - fontSize / 2)}
       >
         {charge}
       </text>
       <text
-        fill="#999999"
+        fill={textColor}
         fontFamily={labelFontFamily}
         fontSize={String(Number(fontSize) / 2)}
-        svgjs:data="{'leading':'1.3'}"
         x={x}
         y={y}
       >