@datagrok/sequence-translator 1.3.5 → 1.3.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/sequence-translator",
   "friendlyName": "Sequence Translator",
-  "version": "1.3.5",
+  "version": "1.3.10",
   "author": {
     "name": "Alexey Choposky",
     "email": "achopovsky@datagrok.ai"
@@ -22,23 +22,26 @@
     }
   ],
   "dependencies": {
-    "@datagrok-libraries/bio": "^5.41.9",
+    "@datagrok-libraries/bio": "5.42.5",
     "@datagrok-libraries/chem-meta": "^1.2.5",
     "@datagrok-libraries/tutorials": "^1.3.12",
-    "@datagrok-libraries/utils": "^4.2.6",
+    "@datagrok-libraries/utils": "^4.2.13",
     "@types/react": "^18.0.15",
     "cash-dom": "^8.1.0",
-    "datagrok-api": "^1.18.6",
+    "datagrok-api": "^1.20.0",
     "lodash": "^4.17.21",
     "object-hash": "^3.0.0",
     "openchemlib": "6.0.1",
     "save-svg-as-png": "^1.4.17",
     "ts-loader": "^9.3.1",
     "typeahead-standalone": "4.14.1",
-    "typescript": "^5.4.2"
+    "typescript": "^5.4.2",
+    "wu": "latest"
   },
   "devDependencies": {
-    "@datagrok/bio": "^2.12.23",
+    "@datagrok-libraries/helm-web-editor": "^1.1.6",
+    "@datagrok-libraries/js-draw-lite": "^0.0.4",
+    "@datagrok/bio": "^2.13.3",
     "@datagrok/chem": "1.9.2",
     "@types/jquery": "^3.5.14",
     "@types/js-yaml": "^4.0.5",
@@ -46,6 +49,7 @@
     "@types/node-fetch": "^2.6.2",
     "@types/object-hash": "^3.0.6",
     "@types/react": "^18.0.15",
+    "@types/wu": "latest",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "css-loader": "^6.7.3",

package/src/apps/common/view/components/colored-input/style.css

@@ -19,8 +19,9 @@
   max-width: 100%;
   padding: 2px;
   line-height: normal;
-  font-family: 'Roboto Mono', 'Roboto Mono Local', monospace;
-  font-size: 12px;
+  font-family: 'Roboto', 'Roboto Local', sans-serif;
+  font-size: 13px;
+  padding-top: 6px !important;
   color: transparent;
   white-space: pre-wrap;
   word-wrap: break-word;

package/src/apps/pattern/model/const.ts

@@ -57,6 +57,12 @@ export namespace LEGEND_SETTINGS_KEYS {
 export namespace PATTERN_RECORD_KEYS {
   export const PATTERN_CONFIG = 'patternConfig';
   export const AUTHOR_ID = 'authorID';
+  export const DATE = 'date';
+}
+
+export namespace DATE_KEYS {
+  export const CREATE = 'create';
+  export const MODIFY = 'modify';
 }
 
 export const GRAPH_SETTINGS_KEY_LIST = [
@@ -72,11 +78,6 @@ export const LEGEND_SETTINGS_KEY_LIST = [
   LEGEND_SETTINGS_KEYS.NUCLEOTIDES_WITH_NUMERIC_LABELS
 ];
 
-export const PATTERN_RECORD_KEY_LIST = [
-  PATTERN_RECORD_KEYS.PATTERN_CONFIG,
-  PATTERN_RECORD_KEYS.AUTHOR_ID
-];
-
 export const EXAMPLE_PATTERN_CONFIG =
 {
   'patternConfig': {
@@ -119,3 +120,5 @@ export const EXAMPLE_PATTERN_CONFIG =
   },
   'authorID': ''
 };
+
+export const DEFAULT_DATE = '2024-01-01T18:00:00.000Z';

package/src/apps/pattern/model/data-manager.ts

@@ -3,7 +3,8 @@ import * as grok from 'datagrok-api/grok';
 
 import {
   EXAMPLE_PATTERN_CONFIG,
-  GRAPH_SETTINGS_KEY_LIST as GKL, LEGEND_SETTINGS_KEYS as L, OTHER_USERS, PATTERN_RECORD_KEYS as R, STORAGE_NAME
+  GRAPH_SETTINGS_KEY_LIST as GKL, LEGEND_SETTINGS_KEYS as L,
+  OTHER_USERS, PATTERN_RECORD_KEYS as R, STORAGE_NAME, DATE_KEYS as D
 } from './const';
 import {
   PatternConfigRecord, PatternConfiguration, PatternExistsError, PatternNameExistsError, RawPatternRecords
@@ -76,7 +77,7 @@ export class DataManager {
     return patternHash;
   }
 
-  async getPatternRecord(hash: string): Promise<PatternConfigRecord | null> {
+  async getPatternRecordByHash(hash: string): Promise<PatternConfigRecord | null> {
     if (hash === null || hash === '')
       return null;
     try {
@@ -91,7 +92,7 @@ export class DataManager {
   async getPatternConfig(hash: string | null): Promise<PatternConfiguration | null> {
     if (hash === '' || hash === null)
       return null;
-    const record = await this.getPatternRecord(hash);
+    const record = await this.getPatternRecordByHash(hash);
     const config = record === null ? null : record[R.PATTERN_CONFIG] as PatternConfiguration;
     return config;
   }
@@ -144,13 +145,13 @@ export class DataManager {
     return hash;
   }
 
-  private async getRecordFromPattern(patternConfig: PatternConfiguration): Promise<string> {
-    const record = {
+  private async getRecordFromPattern(
+    patternConfig: PatternConfiguration
+  ): Promise<PatternConfigRecord> {
+    return {
       [R.PATTERN_CONFIG]: patternConfig,
       [R.AUTHOR_ID]: await grok.dapi.users.current().then((u) => u.id),
     };
-    const stringifiedRecord = JSON.stringify(record);
-    return stringifiedRecord;
   }
 
   private getHash(patternConfig: PatternConfiguration): string {
@@ -173,13 +174,21 @@ export class DataManager {
       const patternName = patternConfig[L.PATTERN_NAME];
       this.validatePatternNameUniqueness(patternName);
 
-      const record = await this.getRecordFromPattern(patternConfig);
+      const recordObj = await this.getRecordFromPattern(patternConfig);
+      const timestamp = new Date().toISOString();
+      recordObj[R.DATE] = {
+        [D.CREATE]: timestamp,
+        [D.MODIFY]: timestamp,
+      };
+      const record = JSON.stringify(recordObj);
       await grok.dapi.userDataStorage.postValue(STORAGE_NAME, hash, record, false);
       this.currentUserPatternNameToHash.set(patternName, hash);
 
       eventBus.selectAuthor(this.getCurrentUserAuthorshipCategory());
 
       eventBus.updatePatternList();
+      eventBus.requestPatternLoad(hash);
+      eventBus.updateUrlState(hash);
     } catch (e) {
       if (e instanceof PatternNameExistsError || e instanceof PatternExistsError)
         throw e;
@@ -188,17 +197,33 @@ export class DataManager {
     }
   }
 
-  async overwritePatternInUserStorage(
+  async overwriteExistingPatternInUserStorage(
     eventBus: EventBus
   ): Promise<void> {
     const patternConfig = eventBus.getPatternConfig();
-    const hash = this.getHash(patternConfig);
     const patternName = patternConfig[L.PATTERN_NAME];
-    const record = await this.getRecordFromPattern(patternConfig);
-    await grok.dapi.userDataStorage.postValue(STORAGE_NAME, hash, record, false);
-    this.currentUserPatternNameToHash.set(patternName, hash);
-    // eventBus.selectUser(this.getCurrentUserAuthorshipCategory());
-    eventBus.updatePatternList();
+    const oldHash = this.currentUserPatternNameToHash.get(patternName);
+
+    if (oldHash === undefined)
+      throw new Error(`Old hash is undefined`);
+    const newHash = this.getHash(patternConfig);
+    const newRecordObj = await this.getRecordFromPattern(patternConfig);
+    const timestamp = new Date().toISOString();
+    newRecordObj[R.DATE] = {
+      [D.MODIFY]: timestamp,
+    };
+    const oldPattern = await grok.dapi.userDataStorage.getValue(STORAGE_NAME, oldHash, false);
+    const oldPatternsRecord = JSON.parse(oldPattern) as PatternConfigRecord;
+    if (oldPatternsRecord[R.DATE] !== undefined && oldPatternsRecord[R.DATE][D.CREATE] != undefined)
+      newRecordObj[R.DATE][D.CREATE] = oldPatternsRecord[R.DATE][D.CREATE];
+
+    const newRecord = JSON.stringify(newRecordObj);
+    await grok.dapi.userDataStorage.postValue(STORAGE_NAME, newHash, newRecord, false);
+    await grok.dapi.userDataStorage.remove(STORAGE_NAME, oldHash, false);
+
+    this.currentUserPatternNameToHash.set(patternName, newHash);
+    eventBus.requestPatternLoad(newHash);
+    eventBus.updateUrlState(newHash);
   }
 
   async deletePattern(
@@ -274,7 +299,10 @@ export class DataManager {
       this.currentUserPatternNameToHash.set(patternName, patternHash);
     } else {
       if (!userIdsToUserNames.has(authorID)) {
-        const userFriendlyName = (await grok.dapi.users.find(authorID)).friendlyName;
+        let userFriendlyName = '<UNKNOWN_USER>';
+        try {
+          userFriendlyName = (await grok.dapi.users.find(authorID)).friendlyName;
+        } catch (e) {}
         userIdsToUserNames.set(authorID, userFriendlyName);
       }
       const fullPatternName = patternName + ` (created by ${userIdsToUserNames.get(authorID)})`;

package/src/apps/pattern/model/event-bus.ts

@@ -434,6 +434,8 @@ export class EventBus {
   }
 
   selectAuthor(username: string) {
+    if (typeof username !== 'string')
+      throw new Error('Selected user must be defined');
     this._patternAuthorSelection$.next(username);
   }
 

package/src/apps/pattern/model/translator.ts

@@ -1,7 +1,7 @@
 import * as grok from 'datagrok-api/grok';
+import * as DG from 'datagrok-api/dg';
 import {STRAND, STRANDS, TERMINI, TERMINUS} from './const';
 import {EventBus} from './event-bus';
-import {ITranslationHelper} from '../../../types';
 import {_package} from '../../../package';
 import {JsonData} from '../../common/model/data-loader/json-loader';
 
@@ -11,13 +11,18 @@ export function bulkTranslate(eventBus: EventBus): void {
     grok.shell.warning('Please select a table');
     return;
   }
-  const strandColNames = STRANDS.filter(
+  const strandInputData = STRANDS.filter(
     (strand) => !(strand === STRAND.ANTISENSE && !eventBus.isAntisenseStrandActive())
-  ).map((strand) => eventBus.getSelectedStrandColumn(strand))
-    .filter((colName) => colName) as string[];
-
-  if (strandColNames.length === 0) {
-    grok.shell.warning('Please column for sense strand');
+  ).map((strand) => {
+    return {
+      strand,
+      column: eventBus.getSelectedStrandColumn(strand)
+    };
+  })
+    .filter((el) => el.column);
+
+  if (strandInputData.length === 0) {
+    grok.shell.warning('Select a sense strand column');
     return;
   }
 
@@ -26,9 +31,41 @@ export function bulkTranslate(eventBus: EventBus): void {
 
   const idColumn = df.getCol(idColumnName);
 
-  const strandCols = strandColNames.map((colName) => df.getCol(colName));
+  const strandColData = strandInputData.map((el) => {
+    return {strand: el.strand, column: df.getCol(el.column!)};
+  });
+
+  if (!areStrandColsValid(strandColData, eventBus)) {
+    grok.shell.warning(`Some strands in the table input do not match pattern length`);
+    return;
+  }
+
+  strandColData.forEach((strandColData) => {
+    const inputCol = strandColData.column;
+    const strand = strandColData.strand;
+    const modifications = eventBus.getNucleotideSequences()[strand];
+    const terminals = eventBus.getTerminalModifications()[strand];
+    const ptoFlags = eventBus.getPhosphorothioateLinkageFlags()[strand];
+
+    const outputColName = `${eventBus.getPatternName()}(${inputCol.name})`;
+    df.columns.addNewString(outputColName).init((i) => {
+      const input = inputCol.get(i);
+      return applyPatternToRawSequence(
+        input, modifications, ptoFlags, terminals
+      );
+    });
+  });
 }
 
+function areStrandColsValid(strandColumns: {strand: STRAND, column: DG.Column<string>}[], eventBus: EventBus) {
+  const nucleotides = eventBus.getNucleotideSequences();
+  return strandColumns.every((el) => {
+    const patternLength = nucleotides[el.strand].length;
+    return el.column.toList().every((input) => input.length === patternLength);
+  });
+}
+
+
 export function applyPatternToRawSequence(
   rawNucleotideSequence: string,
   modifications: string[],

package/src/apps/pattern/model/types.ts

@@ -1,11 +1,7 @@
-/* Do not change these import lines to match external modules in webpack configuration */
-import * as grok from 'datagrok-api/grok';
-import * as ui from 'datagrok-api/ui';
-import * as DG from 'datagrok-api/dg';
-
 import {
   TERMINI, STRANDS,
-  GRAPH_SETTINGS_KEYS as G, LEGEND_SETTINGS_KEYS as L, PATTERN_RECORD_KEYS as R
+  GRAPH_SETTINGS_KEYS as G, LEGEND_SETTINGS_KEYS as L, PATTERN_RECORD_KEYS as R,
+  DATE_KEYS as D
 } from './const';
 
 export type StrandType = typeof STRANDS[number];
@@ -30,9 +26,15 @@ export type PatternLegendSettings = {
 
 export type PatternConfiguration = PatternGraphSettings & PatternLegendSettings;
 
+type DateRecord = {
+  [D.CREATE]?: string,
+  [D.MODIFY]: string;
+}
+
 export type PatternConfigRecord = {
   [R.PATTERN_CONFIG]: PatternConfiguration,
   [R.AUTHOR_ID]: string,
+  [R.DATE]?: DateRecord
 }
 
 export class PatternNameExistsError extends Error {

package/src/apps/pattern/view/components/bulk-convert/column-input.ts

@@ -53,11 +53,8 @@ export class ColumnInputManager {
       this.selectedTable.columns.names().sort((a, b) => a.localeCompare(b)) :
       [];
     const strandColumnInput = Object.fromEntries(STRANDS.map((strand) => {
-      const input = ui.choiceInput(
-        `${STRAND_LABEL[strand]} column`,
-        columns[0],
-        columns,
-        (colName: string) => this.eventBus.selectStrandColumn(strand, colName)
+      const input = ui.input.choice(`${STRAND_LABEL[strand]} column`, {value: columns[0], items: columns,
+        onValueChanged: (input) => this.eventBus.selectStrandColumn(strand, input.value)}
       );
       this.eventBus.selectStrandColumn(strand, columns[0]);
       return [strand, input.root];
@@ -67,11 +64,8 @@ export class ColumnInputManager {
 
   private createIdColumnInput(): HTMLElement {
     const columns = this.selectedTable ? this.selectedTable.columns.names() : [];
-    const idColumnInput = ui.choiceInput(
-      'ID column',
-      columns[0],
-      columns,
-      (colName: string) => this.eventBus.selectIdColumn(colName)
+    const idColumnInput = ui.input.choice('ID column', {value: columns[0], items: columns,
+      onValueChanged: (input) => this.eventBus.selectIdColumn(input.value)}
     );
     this.eventBus.selectIdColumn(columns[0]);
     return idColumnInput.root;

package/src/apps/pattern/view/components/bulk-convert/table-input.ts

@@ -63,16 +63,13 @@ export class TableInputManager {
   private createTableInput(): DG.InputBase<DG.DataFrame | null> {
     const currentlySelectedTable = this.eventBus.getTableSelection();
 
-    const tableInput = ui.tableInput(
-      'Tables',
-      currentlySelectedTable,
-      this.availableTables,
-      (table: DG.DataFrame) => {
+    const tableInput = ui.input.table('Tables', {value: currentlySelectedTable!, items: this.availableTables,
+      onValueChanged: (input) => {
         // WARNING: non-null check necessary to prevent resetting columns to
         // null upon handling onTableAdded
-        if (table !== null && table instanceof DG.DataFrame)
-          this.eventBus.selectTable(table);
-      });
+        if (input.value !== null)
+          this.eventBus.selectTable(input.value);
+      }});
     return tableInput;
   }
 

package/src/apps/pattern/view/components/edit-block-controls.ts

@@ -74,9 +74,9 @@ export class PatternEditControlsManager {
 
 
   private createAntisenseStrandToggle(): HTMLElement {
-    const toggleAntisenseStrand = ui.switchInput(
+    const toggleAntisenseStrand = ui.input.toggle(
       `${STRAND_LABEL[STRAND.ANTISENSE]} strand`,
-      this.eventBus.isAntisenseStrandActive()
+      {value: this.eventBus.isAntisenseStrandActive()}
     );
 
     toggleAntisenseStrand.onInput(
@@ -96,10 +96,7 @@ export class PatternEditControlsManager {
     const createStrandLengthInput = (strand: StrandType) => {
       const sequenceLength = this.eventBus.getNucleotideSequences()[strand].length;
 
-      const input = ui.intInput(
-        `${STRAND_LABEL[strand]} length`,
-        sequenceLength
-      );
+      const input = ui.input.int(`${STRAND_LABEL[strand]} length`, {value: sequenceLength});
       input.onInput(() => updateStrandLengthInputs(strand, input));
 
       this.eventBus.nucleotideSequencesChanged$.subscribe(() => {
@@ -142,7 +139,7 @@ export class PatternEditControlsManager {
       .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
     const defaultNucleotideBase = this.dataManager.fetchDefaultNucleobase();
 
-    const sequenceBaseInput = ui.choiceInput('Sequence basis', defaultNucleotideBase, availableNucleoBases);
+    const sequenceBaseInput = ui.input.choice('Sequence basis', {value: defaultNucleotideBase, items: availableNucleoBases});
 
     sequenceBaseInput.onInput(() => this.eventBus.replaceSequenceBase(sequenceBaseInput.value!));
 
@@ -155,10 +152,7 @@ export class PatternEditControlsManager {
   }
 
   private createPatternCommentInput(): StringInput {
-    const patternCommentInput = ui.textInput(
-      'Comment',
-      this.eventBus.getComment()
-    );
+    const patternCommentInput = ui.input.textArea('Comment', {value: this.eventBus.getComment()});
 
     $(patternCommentInput.root).addClass('st-pattern-text-input');
 
@@ -174,10 +168,7 @@ export class PatternEditControlsManager {
   }
 
   private createPatternNameInputBlock(): HTMLElement {
-    const patternNameInput = ui.textInput(
-      'Pattern name',
-      this.eventBus.getPatternName()
-    );
+    const patternNameInput = ui.input.textArea('Pattern name', {value: this.eventBus.getPatternName()});
 
     $(patternNameInput.root).addClass('st-pattern-text-input');
 

package/src/apps/pattern/view/components/load-block-controls.ts

@@ -93,15 +93,16 @@ export class PatternLoadControlsManager {
     if (this.dataManager.getOtherUsersPatternNames().length > 0)
       possibleValues.push(this.dataManager.getOtherUsersAuthorshipCategory());
 
-    const authorChoiceInput = ui.choiceInput(
-      'Author',
-      this.eventBus.getSelectedAuthor(),
-      possibleValues,
-      (userName: string) => {
-        this.authorSelectedByUser = true;
-        this.eventBus.selectAuthor(userName);
-      }
-    );
+    const authorChoiceInput = ui.input.choice(
+      'Author', {value: this.eventBus.getSelectedAuthor(), items: possibleValues});
+
+    authorChoiceInput.onInput(() => {
+      this.authorSelectedByUser = true;
+      if (authorChoiceInput.value === null)
+        throw new Error('author choice must be non-null');
+      this.eventBus.selectAuthor(authorChoiceInput.value);
+    });
+
     this.setAuthorChoiceInputStyle(authorChoiceInput);
     authorChoiceInput.setTooltip('Select pattern author');
 
@@ -132,7 +133,7 @@ export class PatternLoadControlsManager {
     }
 
     const defaultValue = this.getPatternName(patternList);
-    const choiceInput = ui.choiceInput('Pattern', defaultValue, patternList);
+    const choiceInput = ui.input.choice('Pattern', {value: defaultValue, items: patternList});
     choiceInput.setTooltip('Select pattern to load');
 
     $(choiceInput.input).css({

package/src/apps/pattern/view/components/numeric-label-visibility-controls.ts

@@ -44,11 +44,10 @@ export class NumericLabelVisibilityControls {
 
   private createSingleInput(nucleotide: string): BooleanInput {
     const initialValue = this.eventBus.getModificationsWithNumericLabels().includes(nucleotide);
-    const input = ui.boolInput(
-      nucleotide,
-      initialValue,
-      (value: boolean) => this.handleNumericLabelToggle(nucleotide, value)
-    );
+    const input = ui.input.bool(nucleotide, {
+      value: initialValue,
+      onValueChanged: (input) => this.handleNumericLabelToggle(nucleotide, input.value)
+    });
     $(input.root).css('padding-right', '20px');
 
     input.setTooltip(`Show numeric labels for ${nucleotide}`);

package/src/apps/pattern/view/components/right-section.ts

@@ -7,6 +7,7 @@ import {PatternExistsError, PatternNameExistsError} from '../../model/types';
 import {SvgDisplayManager} from '../svg-utils/svg-display-manager';
 import {NumericLabelVisibilityControls} from './numeric-label-visibility-controls';
 import {TranslationExamplesBlock} from './translation-examples-block';
+import {DEFAULT_DATE, PATTERN_RECORD_KEYS as P, DATE_KEYS as D, LEGEND_SETTINGS_KEYS as L} from '../../model/const';
 
 export class PatternAppRightSection {
   private svgDisplay: HTMLDivElement;
@@ -44,6 +45,7 @@ export class PatternAppRightSection {
       this.createSavePatternButton(),
       this.createDownloadPngButton(),
       this.createShareLinkButton(),
+      this.createInfoButton(),
     ], {style: {gap: '12px', marginTop: '12px'}});
   }
 
@@ -55,6 +57,53 @@ export class PatternAppRightSection {
     return svgDownloadButton;
   }
 
+  private createInfoButton(): HTMLButtonElement {
+    const shareLinkButton = ui.button(
+      ui.iconFA('info-circle'),
+      () => this.openInfoDialog()
+    );
+
+    this.eventBus.patternHasUnsavedChanges$.subscribe((hasUnsavedChanges: boolean) => {
+      shareLinkButton.disabled = hasUnsavedChanges;
+    });
+
+    ui.tooltip.bind(shareLinkButton, 'View pattern metadata');
+    return shareLinkButton;
+  }
+
+  private async openInfoDialog() {
+    let author = this.dataManager.getCurrentUserName();
+    let patternName = this.dataManager.getDefaultPatternName();
+    let createDate = DEFAULT_DATE;
+    let modifyDate = DEFAULT_DATE;
+    const hash = new URLSearchParams(window.location.search).get('pattern');
+    if (hash !== null) {
+      const record = await this.dataManager.getPatternRecordByHash(hash);
+      if (record !== null) {
+        const authorID = record[P.AUTHOR_ID];
+        const userFriendlyName = (await grok.dapi.users.find(authorID)).friendlyName;
+        author = userFriendlyName;
+        patternName = record[P.PATTERN_CONFIG][L.PATTERN_NAME];
+        if (record[P.DATE] !== undefined) {
+          const create = record[P.DATE][D.CREATE];
+          if (create !== undefined)
+            createDate = create;
+          const modify = record[P.DATE][D.MODIFY];
+          if (modify !== undefined)
+            modifyDate = modify;
+        }
+      }
+    }
+
+    const message = ui.divV([
+      ui.divText(`Author: ${author}`),
+      ui.divText(`Pattern Name: ${patternName}`),
+      ui.divText(`Created: ${new Date(createDate).toLocaleString()}`),
+      ui.divText(`Modified: ${new Date(modifyDate).toLocaleString()}`),
+    ]);
+    grok.shell.info(message);
+  }
+
   private createShareLinkButton(): HTMLButtonElement {
     const shareLinkButton = ui.button(
       ui.iconFA('link'),
@@ -135,7 +184,7 @@ class OverwritePatternDialog {
 
   private processOverwriteNamesakePattern(): void {
     const patternName = this.eventBus.getPatternName();
-    this.dataManager.overwritePatternInUserStorage(this.eventBus)
+    this.dataManager.overwriteExistingPatternInUserStorage(this.eventBus)
       .then(() => {
         grok.shell.info(`Pattern ${patternName} overwritten`);
       })

package/src/apps/pattern/view/components/strand-editor/header-controls.ts

@@ -43,7 +43,7 @@ export class HeaderControls {
   private createAllPtoActivationInput(): BooleanInput {
     const flags = this.initialPatternConfig.phosphorothioateLinkageFlags;
     const initialValue = this.areAllPtoLinkagesSet(flags);
-    const allPtoActivationInput = ui.boolInput('All PTO', initialValue);
+    const allPtoActivationInput = ui.input.bool('All PTO', {value: initialValue});
 
     allPtoActivationInput.onInput(() => {
       const value = allPtoActivationInput.value!;
@@ -79,7 +79,7 @@ export class HeaderControls {
       if (!this.eventBus.isAntisenseStrandActive() && strand === STRAND.ANTISENSE)
         return;
       const initialValue = this.isFirstPtoActive(strand);
-      const firstPtoInput = ui.boolInput(`First ${strand} PTO`, initialValue);
+      const firstPtoInput = ui.input.bool(`First ${strand} PTO`, {value: initialValue});
 
       firstPtoInput.onInput(() => {
         const value = firstPtoInput.value!;

package/src/apps/pattern/view/components/strand-editor/strand-controls.ts

@@ -78,7 +78,7 @@ export class StrandControls {
       );
     const nucleotides = this.eventBus.getNucleotideSequences()[strand];
     const choiceInputs = nucleotides.map((nucleotide, index) => {
-      const input = ui.choiceInput<string>('', nucleotide, nucleotideBaseChoices);
+      const input = ui.input.choice<string>('', {value: nucleotide, items: nucleotideBaseChoices});
       input.onInput(() => {
         const newValue = input.value!;
         this.eventBus.setNucleotide(strand, index, newValue);
@@ -92,7 +92,7 @@ export class StrandControls {
   private createPTOFlagInputs(strand: StrandType): BooleanInput[] {
     const ptoLinkageFlags = this.eventBus.getPhosphorothioateLinkageFlags()[strand].slice(1);
     const ptoLinkageInputs = ptoLinkageFlags.map((flag, index) => {
-      const input = ui.boolInput('', flag);
+      const input = ui.input.bool('', {value: flag});
       input.onInput(() => {
         const newValue = input.value!;
         this.eventBus.setPhosphorothioateLinkageFlag(strand, index + 1, newValue);

package/src/apps/pattern/view/components/terminal-modification-editor.ts

@@ -106,7 +106,7 @@ class StrandTerminalModificationControls {
 
   private createInputForTerminus(strand: StrandType, terminus: TERMINUS): StringInput {
     const initialValue = this.eventBus.getTerminalModifications()[strand][terminus];
-    const input = ui.textInput(terminus, initialValue);
+    const input = ui.input.textArea(terminus, {value: initialValue});
     this.applyStylingToInput(input);
 
     input.onInput(() => {

package/src/apps/pattern/view/components/translation-examples-block.ts

@@ -125,7 +125,7 @@ class StrandExample {
   }
 
   private createTextInputForExamples(): StringInput {
-    const input = ui.textInput('', '');
+    const input = ui.input.textArea('', {value: ''});
     this.applyStylingToInput(input);
 
     return input;

package/src/apps/pattern/view/ui.ts

@@ -55,7 +55,7 @@ async function getInitialPatternRecord(
     return dataManager.getDefaultPatternRecord();
   }
 
-  let initialPatternRecord = await dataManager.getPatternRecord(patternHash);
+  let initialPatternRecord = await dataManager.getPatternRecordByHash(patternHash);
   if (!initialPatternRecord) {
     urlRouter.clearPatternURL();
     initialPatternRecord = dataManager.getDefaultPatternRecord();

package/src/apps/structure/view/ui.ts

@@ -33,11 +33,11 @@ class StructureAppLayout {
     this.onInvalidInput = new rxjs.Subject<string>();
     this.inputBase = Object.fromEntries(
       STRANDS.map(
-        (key) => [key, ui.textInput('', '', () => { this.onInput.next(); })]
+        (key) => [key, ui.input.textArea('', {value: '', onValueChanged: () => { this.onInput.next(); }})]
       )
     );
-    this.useChiralInput = ui.boolInput('Use chiral', true);
-    this.saveAllStrandsInput = ui.boolInput('Save as one entity', true);
+    this.useChiralInput = ui.input.bool('Use chiral', {value: true});
+    this.saveAllStrandsInput = ui.input.bool('Save as one entity', {value: true});
     ui.tooltip.bind(this.saveAllStrandsInput.root, 'Save SDF with all strands in one molfile');
     this.directionInversion = Object.fromEntries(
       STRANDS.map((key) => [key, false])
@@ -102,8 +102,8 @@ class StructureAppLayout {
       STRANDS.map(
         (key, idx) => {
           const selected = (idx === 0) ? DIRECTION.STRAIGHT : DIRECTION.INVERSE;
-          return [key, ui.choiceInput(
-            `${key.toUpperCase()} direction`, selected, [DIRECTION.STRAIGHT, DIRECTION.INVERSE]
+          return [key, ui.input.choice(
+            `${key.toUpperCase()} direction`, {value: selected, items: [DIRECTION.STRAIGHT, DIRECTION.INVERSE]}
           )];
         }
       )