update after holidays

cheminfo · Aug 20, 2024 · 6277528 · 6277528
1 parent 16c6369
commit 6277528
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 42 deletions.
diff --git a/src/components/SVGMassFragmentation.jsx b/src/components/SVGMassFragmentation.jsx
@@ -45,15 +45,6 @@ export function SVGMassFragmentation({ sequence, analysisInfo, options }) {
       viewBox={`0 0 ${options.width} ${data.height}`}
       key={`SVG-${generateReactKey('')}`}
     >
-      <style>
-        {`.sequenceElementStyle{
-          font: bold 12
-        }
-          .labelStyle{
-          font: ${labelSize}
-          }
-        `}
-      </style>
       {data.lines.map((line, LineIndex) => (
         <React.Fragment key={`SVGLine-${LineIndex}`}>
           <g

diff --git a/src/components/SVGSequenceBreak.jsx b/src/components/SVGSequenceBreak.jsx
@@ -1,38 +1,47 @@
-import { SVGSequenceBreakFromBegin } from './SVGSequenceBreakFromBegin';
-import { SVGSequenceBreakFromEnd } from './SVGSequenceBreakFromEnd';
+import { SVGSequenceLabel } from './SVGSequenceLabel';
 
 export function SVGSequenceBreak({ breaks, options }) {
-  const { spaceBetweenResidues = 30, strokeWidth = 2 } = options;
+  const {
+    spaceBetweenResidues = 30,
+    spaceBetweenInternalLines = 12,
+    strokeWidth = 2,
+  } = options;
   return (
     <>
-      {breaks
-        .filter((b) => b.fromBegin)
-        .map((b, index) => (
-          <g
-            transform={`translate(${-strokeWidth + b.position * spaceBetweenResidues} 0)`}
-            key={`group-SequenceBreakFromBegin-${index}`}
-          >
-            <SVGSequenceBreakFromBegin
-              sequenceBreak={b}
-              options={options}
-              key={`breakFromBegin-${index}`}
-            />
-          </g>
-        ))}
-      {breaks
-        .filter((b) => b.fromEnd)
-        .map((b, index) => (
-          <g
-            transform={`translate(${strokeWidth + b.position * spaceBetweenResidues} 0)`}
-            key={`group-SequenceBreakFromEnd-${index}`}
-          >
-            <SVGSequenceBreakFromEnd
-              sequenceBreak={b}
-              options={options}
-              key={`breakFromEnd-${index}`}
-            />
-          </g>
-        ))}
+      {breaks.map((sequenceBreak, index) => (
+        <g
+          transform={`translate(${(sequenceBreak.fromBegin ? -1 : 1) * strokeWidth + sequenceBreak.position * spaceBetweenResidues} 0)`}
+          key={`group-SequenceBreak-${index}`}
+        >
+          <line
+            y2={-8}
+            stroke={sequenceBreak.color}
+            strokeWidth={strokeWidth}
+          />
+          <line
+            x2={sequenceBreak.fromBegin ? -5 : 5}
+            y1={sequenceBreak.fromBegin ? 0 : -8}
+            y2={sequenceBreak.fromBegin ? 5 : -8 - 5}
+            stroke={sequenceBreak.color}
+            strokeWidth={strokeWidth}
+          />
+          {sequenceBreak.members.map((m, index) => (
+            <g
+              transform={`translate(0 ${sequenceBreak.fromBegin ? 2 + (index + 1) * spaceBetweenInternalLines : -15 - index * spaceBetweenInternalLines})`}
+              key={`group-breakLabel-${m.type}${index}`}
+            >
+              <SVGSequenceLabel
+                label={m.type}
+                charge={m.charge}
+                similarity={Math.trunc(m.similarity * 100)}
+                textColor={m.textColor}
+                options={options}
+                key={`breakLabel-${m.type}-${index}`}
+              />
+            </g>
+          ))}
+        </g>
+      ))}
     </>
   );
 }
diff --git a/src/components/SVGSequenceBreakFromBegin.jsx b/src/components/SVGSequenceBreakFromBegin.jsx
@@ -1,10 +1,10 @@
 import { SVGSequenceLabel } from './SVGSequenceLabel';
 
 export function SVGSequenceBreakFromBegin({ sequenceBreak, options }) {
-  const { spaceBetweenInternalLines = 12 } = options;
+  const { spaceBetweenInternalLines = 12, strokeWidth = 2 } = options;
   return (
     <>
-      <line y2={-8} stroke={sequenceBreak.color} />
+      <line y2={-8} stroke={sequenceBreak.color} strokeWidth={strokeWidth} />
       <line x2={-5} y2={5} stroke={sequenceBreak.color} />
       {sequenceBreak.members.map((m, index) => (
         <g
@@ -24,3 +24,28 @@ export function SVGSequenceBreakFromBegin({ sequenceBreak, options }) {
     </>
   );
 }
+
+// export function SVGSequenceBreakFromEnd({ sequenceBreak, options }) {
+//   const { spaceBetweenInternalLines = 12 } = options;
+//   return (
+//     <>
+//       <line y2={-8} stroke={sequenceBreak.color} />
+//       <line y1={-8} x2={5} y2={-8 - 5} stroke={sequenceBreak.color} />
+//       {sequenceBreak.members.map((m, index) => (
+//         <g
+//           transform={`translate(5 ${-15 - index * spaceBetweenInternalLines})`}
+//           key={`group-breakLabel${m.type}${index}`}
+//         >
+//           <SVGSequenceLabel
+//             label={m.type}
+//             charge={m.charge}
+//             similarity={Math.trunc(m.similarity * 100)}
+//             textColor={m.textColor}
+//             options={options}
+//             key={`breakLabelFromEnd${m.type}${index}`}
+//           />
+//         </g>
+//       ))}
+//     </>
+//   );
+// }