@datagrok/sequence-translator 1.1.5 → 1.2.0

package/src/view/utils/router.ts

@@ -0,0 +1,71 @@
+/* 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';
+
+class MultiviewRouter {
+  constructor(private view: DG.View) {
+    this.pathParts = window.location.pathname.split('/');
+  }
+
+  private appName: string;
+  private tabName: string;
+  private searchParams: URLSearchParams;
+  private pathParts: string[];
+
+  navigate() {
+    this.parseUrl();
+    this.updateHistory();
+    this.updateView();
+  }
+
+  parseUrl() {
+    this.appName = this.pathParts[1];
+    this.tabName = this.pathParts[2];
+    this.searchParams = new URLSearchParams(window.location.search);
+  }
+
+  private getUrl() {
+    return '/' + this.appName + '/' + this.tabName + '?' + this.searchParams.toString();
+  }
+
+  updateHistory() {
+    window.history.pushState({}, '', this.getUrl());
+  }
+
+  updateView() {
+    this.view.path = this.getUrl();
+  }
+}
+
+// class Router {
+//   constructor(private readonly view: DG.View) {
+//     this.pathParts = window.location.pathname.split('/');
+//     console.log(`pathParts:`, this.pathParts);
+//     this.searchParams = new URLSearchParams(window.location.search);
+//     console.log(`searchParams:`, this.searchParams);
+//   }
+
+//   searchParams: URLSearchParams;
+//   private pathParts: string[];
+
+//   getUrlParamsString(): string {
+//     return Object.entries(this.searchParams)
+//       .map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&');
+//   }
+
+//   updatePath(control: DG.TabControl) {
+//     const urlParamsTxt: string = Object.entries(this.searchParams)
+//       .map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&');
+//     this.view.path = '/apps/SequenceTranslator' + `/${control.currentPane.name}`;
+//     if (urlParamsTxt)
+//       this.view.path += `/?${urlParamsTxt}`;
+//   }
+
+//   get tabName(): string {
+//     const idx = this.pathParts.findIndex((el) => el === 'SequenceTranslator');
+//     if (idx === -1) // todo: remove after verification of validity condition
+//       return '';
+//     return this.pathParts[idx + 1];
+//   }
+// }

package/src/demo/handle-error.ts

@@ -1,12 +0,0 @@
-import * as grok from 'datagrok-api/grok';
-import * as DG from 'datagrok-api/dg';
-import * as ui from 'datagrok-api/ui';
-
-import {_package} from '../package';
-
-export function handleError(err: any): void {
-  const errMsg: string = err instanceof Error ? err.message : err.toString();
-  const stack: string | undefined = err instanceof Error ? err.stack : undefined;
-  grok.shell.error(errMsg);
-  _package.logger.error(err.message, undefined, stack);
-}

package/src/view/const/view.ts

@@ -1,10 +0,0 @@
-/* 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';
-
-export const MAIN_TAB = 'SEQUENCE';
-export const AXOLABS_TAB = 'PATTERN';
-export const SDF_TAB = 'SDF';
-
-export const DEFAULT_AXOLABS_INPUT = 'Afcgacsu';

package/src/view/css/axolabs-tab.css

@@ -1 +0,0 @@
-/* Naming convention: class names should begin with st and tab name (main, axo, sdf) to avoid naming collitions */

package/src/view/css/main-tab.css

@@ -1,46 +0,0 @@
-/* Naming convention: class names should begin with st and tab name (main, axo, sdf) to avoid naming collitions */
-.st-main-input-table {
-  width: 100%;
-}
-
-.st-main-input-table td:has(textarea) {
-  width: 100%;
-  padding-right: 20px;
-}
-
-.st-main-input-table td:has(select) {
-  min-width: 120px;
-  vertical-align: top;
-}
-
-.st-main-output-table {
-  margin-top: 20px;
-  margin-right: 20px;
-  margin-bottom: 10px;
-}
-
-.st-main-output-table table {
-  width: 100%;
-  table-layout: fixed;
-}
-
-/* .st-main-output-table table tbody tr td { */
-/*   max-width: 20%; */
-/* } */
-
-.st-main-output-table td {
-  padding-top: 6px;
-  padding-bottom: 6px;
-}
-.st-main-output-table tr:nth-child(even) {
-  background-color: var(--grey-1);
-}
-
-.st-main-output-table td:nth-child(odd) {
-  width: 120px;
-  vertical-align: top;
-}
-
-.st-main-output-table td a {
-  overflow-wrap: break-word;
-}

package/src/view/css/sdf-tab.css

@@ -1,39 +0,0 @@
-/* Naming convention: class names should begin with st and tab name (main, axo, sdf) to avoid naming collitions */
-
-.st-sdf-body {
-  padding-right: 20px;
-}
-
-.st-sdf-input-form {
-  text-align: right;
-  vertical-align: top;
-  min-width: 95px;
-}
-
-.st-sdf-direction-choice label {
-  min-width: 100px;
-  float: right;
-}
-
-.st-sdf-direction-choice div {
-  justify-content: right;
-}
-
-.st-sdf-text-input-td { /* Style for td containing textarea */
-  width: 100%;
-}
-
-.st-sdf-mol-img {
-  margin-right: 30px;
-  float: right;
-}
-
-.st-sdf-bool-button-block {
-  justify-content: right;
-  margin-bottom: 10px;
-}
-
-.st-sdf-bottom {
-  flex-direction: row-reverse;
-  padding-top: 20px;
-}

package/src/view/view.ts

@@ -1,127 +0,0 @@
-/* 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 {MAIN_TAB, AXOLABS_TAB, SDF_TAB} from './const/view';
-import {MainTabUI} from './tabs/main';
-import {SdfTabUI} from './tabs/sdf';
-import {AxolabsTabUI} from './tabs/axolabs';
-import {MonomerLibViewer} from './monomer-lib-viewer/viewer';
-
-export class SequenceTranslatorUI {
-  constructor() {
-    this.view = DG.View.create();
-    this.urlRouter = new URLRouter(this.view);
-    this.view.box = true;
-    this.view.name = 'Sequence Translator';
-
-    const windows = grok.shell.windows;
-    windows.showProperties = false;
-    windows.showToolbox = false;
-    windows.showHelp = false;
-
-    const viewMonomerLibIcon = ui.iconFA('book', MonomerLibViewer.view, 'View monomer library');
-    this.topPanel = [
-      viewMonomerLibIcon,
-    ];
-    this.view.setRibbonPanels([this.topPanel]);
-
-    this.tabs = new TabLayout(
-      new MainTabUI(),
-      new AxolabsTabUI(),
-      new SdfTabUI(),
-      this.urlRouter
-    );
-  }
-
-  private readonly view: DG.View;
-  public readonly tabs: TabLayout;
-  private readonly topPanel: HTMLElement[];
-  private readonly urlRouter: URLRouter;
-
-  /** Create master layout of the app  */
-  public async createLayout(): Promise<void> {
-    const tabControl = await this.tabs.getControl();
-
-    const tabName = this.urlRouter.tabName;
-    if (tabName)
-      tabControl.currentPane = tabControl.getPane(tabName);
-    this.view.append(tabControl);
-
-    grok.shell.addView(this.view);
-  }
-};
-
-class TabLayout {
-  constructor(
-    public readonly mainTab: MainTabUI,
-    public readonly axolabsTab: AxolabsTabUI,
-    public readonly sdfTab: SdfTabUI,
-    private readonly urlRouter: URLRouter
-  ) {}
-
-  private control: DG.TabControl | null = null;
-
-  async getControl(): Promise<DG.TabControl> {
-    if (this.control)
-      return this.control;
-    const control = ui.tabControl({
-      [MAIN_TAB]: await this.mainTab.getHtmlElement(),
-      [AXOLABS_TAB]: this.axolabsTab.htmlDivElement,
-      [SDF_TAB]: await this.sdfTab.getHtmlDivElement(),
-    });
-
-    const sdfPane = control.getPane(SDF_TAB);
-    ui.tooltip.bind(sdfPane.header, 'Get atomic-level structure for SS + AS/AS2 and save SDF');
-
-    const mainPane = control.getPane(MAIN_TAB);
-    ui.tooltip.bind(mainPane.header, 'Translate across formats');
-
-    const axolabsPane = control.getPane(AXOLABS_TAB);
-    ui.tooltip.bind(axolabsPane.header, 'Create modification pattern for SS and AS');
-
-    control.onTabChanged.subscribe(() => {
-      if (control.currentPane.name !== MAIN_TAB)
-        this.urlRouter.searchParams.delete('seq');
-      else {
-        this.urlRouter.searchParams.set('seq', this.mainTab.sequence);
-      }
-      this.urlRouter.updatePath(control);
-    });
-
-    this.control = control;
-
-    return this.control;
-  }
-}
-
-class URLRouter {
-  constructor(private readonly view: DG.View) {
-    this.pathParts = window.location.pathname.split('/');
-    this.searchParams = new URLSearchParams(window.location.search);
-  }
-
-  public searchParams: URLSearchParams;
-  private pathParts: string[];
-
-  get urlParamsString(): string {
-    return Object.entries(this.searchParams)
-      .map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&');
-  }
-
-  public updatePath(control: DG.TabControl) {
-    const urlParamsTxt: string = Object.entries(this.searchParams)
-      .map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&');
-    this.view.path = '/apps/SequenceTranslator' + `/${control.currentPane.name}`;
-    if (urlParamsTxt)
-      this.view.path += `/?${urlParamsTxt}`;
-  }
-
-  get tabName(): string {
-    const idx = this.pathParts.findIndex((el) => el === 'SequenceTranslator');
-    if (idx === -1) // todo: remove after verification of validity condition
-      return '';
-    return this.pathParts[idx + 1];
-  }
-}