@datagrok/sequence-translator 1.0.10 → 1.0.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/sequence-translator",
   "friendlyName": "Sequence Translator",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "author": {
     "name": "Vadym Kovadlo",
     "email": "vkovadlo@datagrok.ai"
@@ -15,7 +15,7 @@
   "dependencies": {
     "@datagrok-libraries/utils": "^1.11.1",
     "@types/react": "^18.0.15",
-    "datagrok-api": "^1.6.0",
+    "datagrok-api": "^1.7.2",
     "datagrok-tools": "^4.1.2",
     "npm": "^8.11.0",
     "openchemlib": "6.0.1",

package/src/axolabs/define-pattern.ts

@@ -131,17 +131,20 @@ export function defineAxolabsPattern() {
       asBases[i] = ui.choiceInput('', asBases[i].value, baseChoices, (v: string) => {
         if (!enumerateModifications.includes(v)) {
           enumerateModifications.push(v);
-          isEnumerateModificationsDiv.append(ui.boolInput(v, true, (boolV: boolean) => {
-            if (boolV) {
-              if (!enumerateModifications.includes(v))
-                enumerateModifications.push(v);
-            } else {
-              const index = enumerateModifications.indexOf(v, 0);
-              if (index > -1)
-                enumerateModifications.splice(index, 1);
-            }
-            updateSvgScheme();
-          }).root);
+          isEnumerateModificationsDiv.append(
+            ui.divText('', {style: {width: '25px'}}),
+            ui.boolInput(v, true, (boolV: boolean) => {
+              if (boolV) {
+                if (!enumerateModifications.includes(v))
+                  enumerateModifications.push(v);
+              } else {
+                const index = enumerateModifications.indexOf(v, 0);
+                if (index > -1)
+                  enumerateModifications.splice(index, 1);
+              }
+              updateSvgScheme();
+            }).root,
+          );
         }
         updateAsModification();
         updateSvgScheme();
@@ -174,17 +177,20 @@ export function defineAxolabsPattern() {
       ssBases[i] = ui.choiceInput('', ssBases[i].value, baseChoices, (v: string) => {
         if (!enumerateModifications.includes(v)) {
           enumerateModifications.push(v);
-          isEnumerateModificationsDiv.append(ui.boolInput(v, true, (boolV: boolean) => {
-            if (boolV) {
-              if (!enumerateModifications.includes(v))
-                enumerateModifications.push(v);
-            } else {
-              const index = enumerateModifications.indexOf(v, 0);
-              if (index > -1)
-                enumerateModifications.splice(index, 1);
-            }
-            updateSvgScheme();
-          }).root);
+          isEnumerateModificationsDiv.append(
+            ui.divText('', {style: {width: '25px'}}),
+            ui.boolInput(v, true, (boolV: boolean) => {
+              if (boolV) {
+                if (!enumerateModifications.includes(v))
+                  enumerateModifications.push(v);
+              } else {
+                const index = enumerateModifications.indexOf(v, 0);
+                if (index > -1)
+                  enumerateModifications.splice(index, 1);
+              }
+              updateSvgScheme();
+            }).root,
+          );
         }
         updateSsModification();
         updateSvgScheme();
@@ -499,18 +505,20 @@ export function defineAxolabsPattern() {
   const loadPatternDiv = ui.div([]);
   const asModificationDiv = ui.div([]);
   const firstAsPtoDiv = ui.div([]);
-  const isEnumerateModificationsDiv = ui.divH([ui.boolInput(defaultBase, true, (v: boolean) => {
-    if (v) {
-      if (!enumerateModifications.includes(defaultBase))
-        enumerateModifications.push(defaultBase);
-    } else {
-      const index = enumerateModifications.indexOf(defaultBase, 0);
-      if (index > -1)
-        enumerateModifications.splice(index, 1);
-    }
-    updateSvgScheme();
-    updateOutputExamples();
-  }).root]);
+  const isEnumerateModificationsDiv = ui.divH([
+    ui.boolInput(defaultBase, true, (v: boolean) => {
+      if (v) {
+        if (!enumerateModifications.includes(defaultBase))
+          enumerateModifications.push(defaultBase);
+      } else {
+        const index = enumerateModifications.indexOf(defaultBase, 0);
+        if (index > -1)
+          enumerateModifications.splice(index, 1);
+      }
+      updateSvgScheme();
+      updateOutputExamples();
+    }).root,
+  ]);
 
   let ssBases = Array(defaultSequenceLength).fill(ui.choiceInput('', defaultBase, baseChoices));
   let asBases = Array(defaultSequenceLength).fill(ui.choiceInput('', defaultBase, baseChoices));

package/src/axolabs/draw-svg.ts

@@ -35,11 +35,8 @@ function getTextWidth(text: string, font: number): number {
   return 2 * context.measureText(text).width;
 }
 
-function getTextInsideCircle(
-  bases: string[], index: number, nucleotideCounter: number,
-  numberOfNucleotides: number, enumerateModifications: string[]): string {
-  return (bases[index].slice(-3) == '(o)') || !enumerateModifications.includes(bases[index]) ? '' :
-    ['A', 'G', 'C', 'U', 'T'].includes(bases[index]) ? bases[index] : String(numberOfNucleotides - nucleotideCounter);
+function getTextInsideCircle(bases: string[], index: number): string {
+  return (bases[index].slice(-3) == '(o)' || !['A', 'G', 'C', 'U', 'T'].includes(bases[index])) ? '' : bases[index];
 }
 
 function getFontColorVisibleOnBackground(rgbString: string): string {
@@ -157,13 +154,15 @@ export function drawAxolabsPattern(
     Math.max(xOfSsRightModifications, xOfAsRightModifications) +
       widthOfLeftModification + baseDiameter * (Math.max(ssRightOverhangs, asRightOverhangs));
   const yOfTitle = baseRadius;
+  const yOfSsNumbers = 2 * baseRadius;
+  const yOfAsNumbers = 8.5 * baseRadius;
   const yOfSsTexts = 4 * baseRadius;
   const yOfAsTexts = 7 * baseRadius;
   const yOfComment = asExists ? 11 * baseRadius : 8.5 * baseRadius;
   const yOfSsCircles = 3.5 * baseRadius;
   const yOfAsCircles = 6.5 * baseRadius;
-  const yOfCirclesInLegends = asExists ? 9 * baseRadius : 6 * baseRadius;
-  const yOfTextLegend = asExists ? 9.5 * baseRadius - 3 : yOfAsCircles - 3;
+  const yOfCirclesInLegends = asExists ? 9.5 * baseRadius : 6 * baseRadius;
+  const yOfTextLegend = asExists ? 10 * baseRadius - 3 : yOfAsCircles - 3;
 
   const image = svg.render(width, height);
 
@@ -188,14 +187,17 @@ export function drawAxolabsPattern(
   }
   let nucleotideCounter = numberOfSsNucleotides;
   for (let i = ssBases.length - 1; i > -1; i--) {
+    const xOfNumbers = getXOfBaseCircles(i, ssRightOverhangs) +
+      getShiftToAlignNumberInsideCircle(ssBases, ssBases.length - i, numberOfSsNucleotides - nucleotideCounter);
     if (ssBases[i].slice(-3) != '(o)')
       nucleotideCounter--;
+    const n = (ssBases[i].slice(-3) != '(o)' && enumerateModifications.includes(ssBases[i])) ?
+      String(numberOfSsNucleotides - nucleotideCounter) : '';
     image.append(
+      svg.text(n, xOfNumbers, yOfSsNumbers, legendFontSize, fontColor),
       svg.circle(getXOfBaseCircles(i, ssRightOverhangs), yOfSsCircles, baseRadius, getBaseColor(ssBases[i])),
-      svg.text(getTextInsideCircle(ssBases, i, nucleotideCounter, numberOfSsNucleotides, enumerateModifications),
-        getXOfBaseCircles(i, ssRightOverhangs) +
-        getShiftToAlignNumberInsideCircle(ssBases, ssBases.length - i, numberOfSsNucleotides - nucleotideCounter),
-        yOfSsTexts, baseFontSize, getFontColorVisibleOnBackground(axolabsMap[ssBases[i]]['color'])),
+      svg.text(getTextInsideCircle(ssBases, i), xOfNumbers, yOfSsTexts, baseFontSize,
+        getFontColorVisibleOnBackground(getBaseColor(ssBases[i]))),
       ssPtoStatuses[i] ?
         svg.star(getXOfBaseCircles(i, ssRightOverhangs) + baseRadius, yOfSsTexts + psLinkageRadius, psLinkageColor) :
         '',
@@ -217,13 +219,16 @@ export function drawAxolabsPattern(
     for (let i = asBases.length - 1; i > -1; i--) {
       if (asBases[i].slice(-3) != '(o)')
         nucleotideCounter--;
+      const xOfNumbers = getXOfBaseCircles(i, asRightOverhangs) +
+        getShiftToAlignNumberInsideCircle(asBases, i, nucleotideCounter + 1);
+      const n = (asBases[i].slice(-3) != '(o)' && enumerateModifications.includes(asBases[i])) ?
+        String(nucleotideCounter + 1) : '';
       image.append(
+        svg.text(n, xOfNumbers, yOfAsNumbers, legendFontSize, fontColor),
         svg.circle(getXOfBaseCircles(i, asRightOverhangs), yOfAsCircles, baseRadius, getBaseColor(asBases[i])),
-        svg.text(getTextInsideCircle(
-          asBases, i, numberOfAsNucleotides - nucleotideCounter - 1, numberOfAsNucleotides, enumerateModifications),
-        getXOfBaseCircles(i, asRightOverhangs) +
-          getShiftToAlignNumberInsideCircle(asBases, i, nucleotideCounter + 1),
-        yOfAsTexts, baseFontSize, getFontColorVisibleOnBackground(axolabsMap[asBases[i]]['color'])),
+        svg.text(getTextInsideCircle(asBases, i),
+          getXOfBaseCircles(i, asRightOverhangs) + getShiftToAlignNumberInsideCircle(asBases, i, nucleotideCounter + 1),
+          yOfAsTexts, baseFontSize, getFontColorVisibleOnBackground(getBaseColor(asBases[i]))),
         asPtoStatuses[i] ? svg.star(getXOfBaseCircles(i, asRightOverhangs) +
           baseRadius, yOfAsTexts + psLinkageRadius, psLinkageColor) : '',
       );

package/{test-SequenceTranslator-916a90d7d48b-0c0e8404.html → test-SequenceTranslator-49ff04f38f57-128d0678.html}

@@ -1,4 +1,4 @@
-<html><head><meta charset="utf-8"/><title>SequenceTranslator Test Report. Datagrok version datagrok/datagrok:latest SHA=916a90d7d48b. Commit 0c0e8404.</title><style type="text/css">html,
+<html><head><meta charset="utf-8"/><title>SequenceTranslator Test Report. Datagrok version datagrok/datagrok:latest SHA=49ff04f38f57. Commit 128d0678.</title><style type="text/css">html,
 body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1rem;
@@ -229,7 +229,7 @@ header {
   font-size: 1rem;
   padding: 0 0.5rem;
 }
-</style></head><body><div id="jesthtml-content"><header><h1 id="title">SequenceTranslator Test Report. Datagrok version datagrok/datagrok:latest SHA=916a90d7d48b. Commit 0c0e8404.</h1></header><div id="metadata-container"><div id="timestamp">Started: 2022-10-19 11:03:39</div><div id="summary"><div id="suite-summary"><div class="summary-total">Suites (1)</div><div class="summary-passed">1 passed</div><div class="summary-failed summary-empty">0 failed</div><div class="summary-pending summary-empty">0 pending</div></div><div id="test-summary"><div class="summary-total">Tests (1)</div><div class="summary-passed">1 passed</div><div class="summary-failed summary-empty">0 failed</div><div class="summary-pending summary-empty">0 pending</div></div></div></div><div id="suite-1" class="suite-container"><div class="suite-info"><div class="suite-path">/home/runner/work/public/public/packages/SequenceTranslator/src/__jest__/remote.test.ts</div><div class="suite-time warn">19.305s</div></div><div class="suite-tests"><div class="test-result passed"><div class="test-info"><div class="test-suitename"> </div><div class="test-title">TEST</div><div class="test-status">passed</div><div class="test-duration">3.874s</div></div></div></div><div class="suite-consolelog"><div class="suite-consolelog-header">Console Log</div><div class="suite-consolelog-item"><pre class="suite-consolelog-item-origin">    at Object.&lt;anonymous&gt; (/home/runner/work/public/public/packages/SequenceTranslator/src/__jest__/test-node.ts:62:11)
+</style></head><body><div id="jesthtml-content"><header><h1 id="title">SequenceTranslator Test Report. Datagrok version datagrok/datagrok:latest SHA=49ff04f38f57. Commit 128d0678.</h1></header><div id="metadata-container"><div id="timestamp">Started: 2022-10-24 16:17:41</div><div id="summary"><div id="suite-summary"><div class="summary-total">Suites (1)</div><div class="summary-passed">1 passed</div><div class="summary-failed summary-empty">0 failed</div><div class="summary-pending summary-empty">0 pending</div></div><div id="test-summary"><div class="summary-total">Tests (1)</div><div class="summary-passed">1 passed</div><div class="summary-failed summary-empty">0 failed</div><div class="summary-pending summary-empty">0 pending</div></div></div></div><div id="suite-1" class="suite-container"><div class="suite-info"><div class="suite-path">/home/runner/work/public/public/packages/SequenceTranslator/src/__jest__/remote.test.ts</div><div class="suite-time warn">15.882s</div></div><div class="suite-tests"><div class="test-result passed"><div class="test-info"><div class="test-suitename"> </div><div class="test-title">TEST</div><div class="test-status">passed</div><div class="test-duration">1.582s</div></div></div></div><div class="suite-consolelog"><div class="suite-consolelog-header">Console Log</div><div class="suite-consolelog-item"><pre class="suite-consolelog-item-origin">    at Object.&lt;anonymous&gt; (/home/runner/work/public/public/packages/SequenceTranslator/src/__jest__/test-node.ts:62:11)
     at Generator.next (&lt;anonymous&gt;)
     at fulfilled (/home/runner/work/public/public/packages/SequenceTranslator/src/__jest__/test-node.ts:28:58)
     at processTicksAndRejections (internal/process/task_queues.js:97:5)</pre><pre class="suite-consolelog-item-message">Using web root: http://localhost:8080</pre></div><div class="suite-consolelog-item"><pre class="suite-consolelog-item-origin">    at /home/runner/work/public/public/packages/SequenceTranslator/src/__jest__/remote.test.ts:40:11
@@ -243,14 +243,14 @@ header {
     at Generator.next (&lt;anonymous&gt;)
     at fulfilled (/home/runner/work/public/public/packages/SequenceTranslator/src/__jest__/remote.test.ts:28:58)
     at processTicksAndRejections (internal/process/task_queues.js:97:5)</pre><pre class="suite-consolelog-item-message">Test result : Success : 1 : SequenceTranslator.sequence-translator.usCfCfUfGfAf : OK
-Test result : Success : 1 : SequenceTranslator.sequence-translator.usAfsusgsgsg : OK
+Test result : Success : 0 : SequenceTranslator.sequence-translator.usAfsusgsgsg : OK
 Test result : Success : 1 : SequenceTranslator.sequence-translator.UfUfUfsCfsuacg : OK
 Test result : Success : 0 : SequenceTranslator.sequence-translator.susususauasu : OK
 Test result : Success : 0 : SequenceTranslator.sequence-translator.CfGfCfsGfsCf : OK
-Test result : Success : 0 : SequenceTranslator.sequence-translator.acacacsacsac : OK
+Test result : Success : 1 : SequenceTranslator.sequence-translator.acacacsacsac : OK
 Test result : Success : 0 : SequenceTranslator.sequence-translator.cccgggusug : OK
-Test result : Success : 0 : SequenceTranslator.sequence-translator.UfAfCfGfGfCfAfUf : OK
-Test result : Success : 1 : SequenceTranslator.sequence-translator.(invabasic)cuCfuUfsc : OK
+Test result : Success : 1 : SequenceTranslator.sequence-translator.UfAfCfGfGfCfAfUf : OK
+Test result : Success : 0 : SequenceTranslator.sequence-translator.(invabasic)cuCfuUfsc : OK
 Test result : Success : 1 : SequenceTranslator.sequence-translator.(invabasic)usAfsucuCfuUfAfgcugUfgCfacususu : OK
-Test result : Success : 1 : SequenceTranslator.sequence-translator.(invabasic)asacgGfuGfCfAfacucuauuca : OK
+Test result : Success : 0 : SequenceTranslator.sequence-translator.(invabasic)asacgGfuGfCfAfacucuauuca : OK
 </pre></div></div></div></div></body></html>