Merge branch 'visualizations-update' of gitlab.ub.uni-bielefeld.de:sfb1288inf/nopaque into visualizations-update

2025-11-04 04:12:45 +00:00 · 2023-07-18 16:05:09 +02:00
parent 691d4757ff e46f0032bd
commit 7721926d6c
15 changed files with 379 additions and 398 deletions
--- a/app/static/js/CorpusAnalysis/CorpusAnalysisApp.js
+++ b/app/static/js/CorpusAnalysis/CorpusAnalysisApp.js
@@ -1,13 +1,15 @@
 class CorpusAnalysisApp {
  constructor(corpusId) {
+    this.corpusId = corpusId;
+
    this.data = {};

    // HTML elements
    this.elements = {
      container: document.querySelector('#corpus-analysis-app-container'),
+      extensionCards: document.querySelector('#corpus-analysis-app-extension-cards'),
      extensionTabs: document.querySelector('#corpus-analysis-app-extension-tabs'),
-      initModal: document.querySelector('#corpus-analysis-app-init-modal'),
-      overview: document.querySelector('#corpus-analysis-app-overview')
+      initModal: document.querySelector('#corpus-analysis-app-init-modal')
    };
    // Materialize elements
    this.elements.m = {
@@ -17,80 +19,97 @@ class CorpusAnalysisApp {

    this.extensions = {};

-    this.settings = {
-      corpusId: corpusId
-    };
+    this.settings = {};
  }

-  init() {
+  async init() {
    this.disableActionElements();
    this.elements.m.initModal.open();
-    // Init data
-    this.data.cqiClient = new cqi.CQiClient('/cqi_over_sio', this.settings.corpusId);
-    this.data.cqiClient.connect('anonymous', '')
-      .then((cqiStatus) => {
-        return this.data.cqiClient.corpora.list();
-      })
-      .then((cqiCorpora) => {
-          this.data.corpus = {o: cqiCorpora[0]};
-          console.log(this.data.corpus.o.staticData);
-          
-          // TODO: Don't do this hgere
-          this.data.corpus.o.updateDb();
-          this.enableActionElements();
-          for (let extension of Object.values(this.extensions)) {extension.init();}
-          this.elements.m.initModal.close();
-        },
-        (cqiError) => {
-          let errorString = `${cqiError.code}: ${cqiError.constructor.name}`;
-          let errorsElement = this.elements.initModal.querySelector('.errors');
-          let progressElement = this.elements.initModal.querySelector('.progress');
-          errorsElement.innerText = errorString;
-          errorsElement.classList.remove('hide');
-          app.flash(errorString, 'error');
-          progressElement.classList.add('hide');
-        }
-      );
-  
-    // Add event listeners
-    for (let extensionSelectorElement of this.elements.overview.querySelectorAll('.extension-selector')) {
+
+    const statusTextElement = this.elements.initModal.querySelector('.status-text');
+
+    // Setup CQi over SocketIO connection and gather data from the CQPServer
+    try {
+      statusTextElement.innerText = 'Creating CQi over SocketIO client...';
+      const cqiClient = new cqi.CQiClient('/cqi_over_sio');
+      statusTextElement.innerText += ' Done';
+      statusTextElement.innerHTML += '<br>Waiting for the CQP server...';
+      const response = await cqiClient.api.socket.emitWithAck('init', this.corpusId);
+      if (response.code !== 200) {throw new Error();}
+      statusTextElement.innerText += ' Done';
+      statusTextElement.innerHTML += '<br>Connecting to the CQP server...';
+      await cqiClient.connect('anonymous', '');
+      statusTextElement.innerText += ' Done';
+      statusTextElement.innerHTML += '<br>Building and receiving corpus data cache from the server (This may take a while)...';
+      const cqiCorpus = await cqiClient.corpora.get(`NOPAQUE-${this.corpusId.toUpperCase()}`);
+      statusTextElement.innerText += ' Done';
+      // TODO: Don't do this hgere
+      await cqiCorpus.updateDb();
+      this.data.cqiClient = cqiClient;
+      this.data.cqiCorpus = cqiCorpus;
+      this.data.corpus = {o: cqiCorpus};  // legacy
+    } catch (error) {
+      let errorString = '';
+      if ('code' in error) {errorString += `[${error.code}] `;}
+      errorString += `${error.constructor.name}`;
+      if ('description' in error) {errorString += `: ${error.description}`;}
+      const errorsElement = this.elements.initModal.querySelector('.errors');
+      const progressElement = this.elements.initModal.querySelector('.progress');
+      errorsElement.innerText = errorString;
+      errorsElement.classList.remove('hide');
+      progressElement.classList.add('hide');
+      return;
+    }
+
+    // Initialize extensions
+    for (const extension of Object.values(this.extensions)) {
+      statusTextElement.innerHTML += `<br>Initializing ${extension.name} extension...`;
+      await extension.init();
+      statusTextElement.innerText += ' Done'
+    }
+    for (const extensionSelectorElement of this.elements.extensionCards.querySelectorAll('.extension-selector')) {
      extensionSelectorElement.addEventListener('click', () => {
        this.elements.m.extensionTabs.select(extensionSelectorElement.dataset.target);
      });
    }
+
+    this.enableActionElements();
+    this.elements.m.initModal.close();
  }

  registerExtension(extension) {
-    if (extension.name in this.extensions) {
-      console.error(`Can't register extension ${extension.name}: Already registered`);
-      return;
-    }
+    if (extension.name in this.extensions) {return;}
    this.extensions[extension.name] = extension;
-    if ('cQiClient' in this.data && this.data.cQiClient.connected) {extension.init();}
  }

  disableActionElements() {
-    let actionElements = this.elements.container.querySelectorAll('.corpus-analysis-action');
-    for (let actionElement of actionElements) {
-      if (actionElement.nodeName === 'INPUT') {
-        actionElement.disabled = true;
-      } else if (actionElement.nodeName === 'SELECT') {
-        actionElement.parentNode.querySelector('input.select-dropdown').disabled = true;
-      } else {
-        actionElement.classList.add('disabled');
+    const actionElements = this.elements.container.querySelectorAll('.corpus-analysis-action');
+    for (const actionElement of actionElements) {
+      switch(actionElement.nodeName) {
+        case 'INPUT':
+          actionElement.disabled = true;
+          break;
+        case 'SELECT':
+          actionElement.parentNode.querySelector('input.select-dropdown').disabled = true;
+          break;
+        default:
+          actionElement.classList.add('disabled');
      }
    }
  }

  enableActionElements() {
-    let actionElements = this.elements.container.querySelectorAll('.corpus-analysis-action');
-    for (let actionElement of actionElements) {
-      if (actionElement.nodeName === 'INPUT') {
-        actionElement.disabled = false;
-      } else if (actionElement.nodeName === 'SELECT') {
-        actionElement.parentNode.querySelector('input.select-dropdown').disabled = false;
-      } else {
-        actionElement.classList.remove('disabled');
+    const actionElements = this.elements.container.querySelectorAll('.corpus-analysis-action');
+    for (const actionElement of actionElements) {
+      switch(actionElement.nodeName) {
+        case 'INPUT':
+          actionElement.disabled = false;
+          break;
+        case 'SELECT':
+          actionElement.parentNode.querySelector('input.select-dropdown').disabled = false;
+          break;
+        default:
+          actionElement.classList.remove('disabled');
      }
    }
  }
--- a/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js
+++ b/app/static/js/CorpusAnalysis/CorpusAnalysisConcordance.js
@@ -30,62 +30,60 @@ class CorpusAnalysisConcordance {
    this.app.registerExtension(this);
  }

-  init() {
+  async submitForm() {
+    this.app.disableActionElements();
+    let query = this.elements.form.query.value.trim();
+    let subcorpusName = this.elements.form['subcorpus-name'].value;
+    this.elements.error.innerText = '';
+    this.elements.error.classList.add('hide');
+    this.elements.progress.classList.remove('hide');
+    try {
+      const subcorpus = {};
+      subcorpus.q = query;
+      subcorpus.selectedItems = new Set();
+      await this.data.corpus.o.query(subcorpusName, query);
+      if (subcorpusName !== 'Last') {this.data.subcorpora.Last = subcorpus;}
+      const cqiSubcorpus = await this.data.corpus.o.subcorpora.get(subcorpusName);
+      subcorpus.o = cqiSubcorpus;
+      const paginatedSubcorpus = await cqiSubcorpus.paginate(this.settings.context, 1, this.settings.perPage);
+      subcorpus.p = paginatedSubcorpus;
+      this.data.subcorpora[subcorpusName] = subcorpus;
+      this.settings.selectedSubcorpus = subcorpusName;
+      this.renderSubcorpusList();
+      this.renderSubcorpusInfo();
+      this.renderSubcorpusActions();
+      this.renderSubcorpusItems();
+      this.renderSubcorpusPagination();
+      this.elements.progress.classList.add('hide');
+    } catch (error) {
+      let errorString = '';
+      if ('code' in error) {errorString += `[${error.code}] `;}
+      errorString += `${error.constructor.name}`;
+      this.elements.error.innerText = errorString;
+      this.elements.error.classList.remove('hide');
+      app.flash(errorString, 'error');
+      this.elements.progress.classList.add('hide');
+    }
+    this.app.enableActionElements();
+  }
+
+  async init() {
    // Init data
    this.data.corpus = this.app.data.corpus;
    this.data.subcorpora = {};
    // Add event listeners
-    this.elements.form.addEventListener('submit', event => {
+    this.elements.form.addEventListener('submit', (event) => {
      event.preventDefault();
-      this.app.disableActionElements();
-      let query = this.elements.form.query.value.trim();
-      let subcorpusName = this.elements.form['subcorpus-name'].value;
-      this.elements.error.innerText = '';
-      this.elements.error.classList.add('hide');
-      this.elements.progress.classList.remove('hide');
-      let subcorpus = {};
-      this.data.corpus.o.query(subcorpusName, query)
-        .then((cqiStatus) => {
-          subcorpus.q = query;
-          subcorpus.selectedItems = new Set();
-          if (subcorpusName !== 'Last') {this.data.subcorpora.Last = subcorpus;}
-          return this.data.corpus.o.subcorpora.get(subcorpusName);
-        })
-        .then((cqiSubcorpus) => {
-          subcorpus.o = cqiSubcorpus;
-          return cqiSubcorpus.paginate(this.settings.context, 1, this.settings.perPage);
-        })
-        .then(
-          (paginatedSubcorpus) => {
-            subcorpus.p = paginatedSubcorpus;
-            this.data.subcorpora[subcorpusName] = subcorpus;
-            this.settings.selectedSubcorpus = subcorpusName;
-            this.renderSubcorpusList();
-            this.renderSubcorpusInfo();
-            this.renderSubcorpusActions();
-            this.renderSubcorpusItems();
-            this.renderSubcorpusPagination();
-            this.elements.progress.classList.add('hide');
-            this.app.enableActionElements();
-          },
-          (cqiError) => {
-            let errorString = `${cqiError.code}: ${cqiError.constructor.name}`;
-            this.elements.error.innerText = errorString;
-            this.elements.error.classList.remove('hide');
-            app.flash(errorString, 'error');
-            this.elements.progress.classList.add('hide');
-            this.app.enableActionElements();
-          }
-        );
+      this.submitForm();
    });
-    this.elements.form.addEventListener('change', event => {
+    this.elements.form.addEventListener('change', (event) => {
      if (event.target === this.elements.form['context']) {
        this.settings.context = parseInt(this.elements.form['context'].value);
-        this.elements.form.submit.click();
+        this.submitForm();
      }
      if (event.target === this.elements.form['per-page']) {
        this.settings.perPage = parseInt(this.elements.form['per-page'].value);
-        this.elements.form.submit.click();
+        this.submitForm();
      }
      if (event.target === this.elements.form['text-style']) {
        this.settings.textStyle = parseInt(this.elements.form['text-style'].value);
@@ -161,7 +159,7 @@ class CorpusAnalysisConcordance {
      </a>
    `.trim();
    M.Tooltip.init(this.elements.subcorpusActions.querySelectorAll('.tooltipped'));
-    this.elements.subcorpusActions.querySelector('.subcorpus-export-trigger').addEventListener('click', event => {
+    this.elements.subcorpusActions.querySelector('.subcorpus-export-trigger').addEventListener('click', (event) => {
      event.preventDefault();
      let subcorpus = this.data.subcorpora[this.settings.selectedSubcorpus];
      let modalElementId = Utils.generateElementId('export-subcorpus-modal-');
@@ -218,7 +216,7 @@ class CorpusAnalysisConcordance {
          }
        }
      );
-      exportButton.addEventListener('click', event => {
+      exportButton.addEventListener('click', (event) => {
        event.preventDefault();
        this.app.disableActionElements();
        this.elements.progress.classList.remove('hide');
@@ -240,7 +238,7 @@ class CorpusAnalysisConcordance {
          promise = subcorpus.o.export(50);
        }
        promise.then(
-          data => {
+          (data) => {
            let blob;
            if (exportFormat === 'csv') {
              let csvContent = 'sep=,\r\n';
@@ -286,7 +284,7 @@ class CorpusAnalysisConcordance {
      });
      modal.open();
    });
-    this.elements.subcorpusActions.querySelector('.subcorpus-delete-trigger').addEventListener('click', event => {
+    this.elements.subcorpusActions.querySelector('.subcorpus-delete-trigger').addEventListener('click', (event) => {
      event.preventDefault();
      let subcorpus = this.data.subcorpora[this.settings.selectedSubcorpus];
      subcorpus.o.drop().then(
@@ -362,7 +360,7 @@ class CorpusAnalysisConcordance {
    this.setTextStyle();
    this.setTokenRepresentation();
    for (let gotoReaderTriggerElement of this.elements.subcorpusItems.querySelectorAll('.goto-reader-trigger')) {
-      gotoReaderTriggerElement.addEventListener('click', event => {
+      gotoReaderTriggerElement.addEventListener('click', (event) => {
        event.preventDefault();
        let corpusAnalysisReader = this.app.extensions.Reader;
        let itemId = parseInt(gotoReaderTriggerElement.closest('.item').dataset.id);
@@ -384,7 +382,7 @@ class CorpusAnalysisConcordance {
      });
    }
    for (let selectTriggerElement of this.elements.subcorpusItems.querySelectorAll('.select-trigger')) {
-      selectTriggerElement.addEventListener('click', event => {
+      selectTriggerElement.addEventListener('click', (event) => {
        event.preventDefault();
        let itemElement = selectTriggerElement.closest('.item');
        let itemId = parseInt(itemElement.dataset.id);
@@ -446,14 +444,14 @@ class CorpusAnalysisConcordance {
      </li>
    `.trim();
    for (let paginationTriggerElement of this.elements.subcorpusPagination.querySelectorAll('.pagination-trigger[data-target]')) {
-      paginationTriggerElement.addEventListener('click', event => {
+      paginationTriggerElement.addEventListener('click', (event) => {
        event.preventDefault();
        this.app.disableActionElements();
        this.elements.progress.classList.remove('hide');
        let page = parseInt(paginationTriggerElement.dataset.target);
        subcorpus.o.paginate(page, this.settings.perPage, this.settings.context)
          .then(
-            paginatedSubcorpus => {
+            (paginatedSubcorpus) => {
              subcorpus.p = paginatedSubcorpus;
              this.renderSubcorpusItems();
              this.renderSubcorpusPagination();
--- a/app/static/js/CorpusAnalysis/CorpusAnalysisReader.js
+++ b/app/static/js/CorpusAnalysis/CorpusAnalysisReader.js
@@ -19,45 +19,52 @@ class CorpusAnalysisReader {
    this.settings = {
      perPage: parseInt(this.elements.form['per-page'].value),
      textStyle: parseInt(this.elements.form['text-style'].value),
-      tokenRepresentation: this.elements.form['token-representation'].value
+      tokenRepresentation: this.elements.form['token-representation'].value,
+      pagination: {
+        innerWindow: 5,
+        outerWindow: 1
+      }
    }

    this.app.registerExtension(this);
  }

-  init() {
+  async submitForm() {
+    this.app.disableActionElements();
+    this.elements.error.innerText = '';
+    this.elements.error.classList.add('hide');
+    this.elements.progress.classList.remove('hide');
+    try {
+      const paginatedCorpus = await this.data.corpus.o.paginate(1, this.settings.perPage);
+      this.data.corpus.p = paginatedCorpus;
+      this.renderCorpus();
+      this.renderCorpusPagination();
+      this.elements.progress.classList.add('hide');
+    } catch (error) {
+      let errorString = '';
+      if ('code' in error) {errorString += `[${error.code}] `;}
+      errorString += `${error.constructor.name}`;
+      if ('description' in error) {errorString += `: ${error.description}`;}
+      this.elements.error.innerText = errorString;
+      this.elements.error.classList.remove('hide');
+      app.flash(errorString, 'error');
+      this.elements.progress.classList.add('hide');
+    }
+    this.app.enableActionElements();
+  }
+
+  async init() {
    // Init data
    this.data.corpus = this.app.data.corpus;
    // Add event listeners
    this.elements.form.addEventListener('submit', (event) => {
      event.preventDefault();
-      this.app.disableActionElements();
-      this.elements.error.innerText = '';
-      this.elements.error.classList.add('hide');
-      this.elements.progress.classList.remove('hide');
-      this.data.corpus.o.paginate(1, this.settings.perPage)
-        .then(
-          (paginatedCorpus) => {
-            this.data.corpus.p = paginatedCorpus;
-            this.renderCorpus();
-            this.renderCorpusPagination();
-            this.elements.progress.classList.add('hide');
-            this.app.enableActionElements();
-          },
-          (cqiError) => {
-            let errorString = `${cqiError.code}: ${cqiError.constructor.name}`;
-            this.elements.error.innerText = errorString;
-            this.elements.error.classList.remove('hide');
-            app.flash(errorString, 'error');
-            this.elements.progress.classList.add('hide');
-            this.app.enableActionElements();
-          }
-        );
+      this.submitForm();
    });
-    this.elements.form.addEventListener('change', event => {
+    this.elements.form.addEventListener('change', (event) => {
      if (event.target === this.elements.form['per-page']) {
        this.settings.perPage = parseInt(this.elements.form['per-page'].value);
-        this.elements.form.submit.click();
+        this.submitForm();
      }
      if (event.target === this.elements.form['text-style']) {
        this.settings.textStyle = parseInt(this.elements.form['text-style'].value);
@@ -69,7 +76,7 @@ class CorpusAnalysisReader {
      }
    });
    // Load initial data
-    this.elements.form.submit.click();
+    await this.submitForm();
  }

  clearCorpus() {
@@ -142,7 +149,7 @@ class CorpusAnalysisReader {
    }

    // render page buttons (5 before and 5 after current page)
-    for (let i = this.data.corpus.p.page -5; i <= this.data.corpus.p.page; i++) {
+    for (let i = this.data.corpus.p.page - this.settings.pagination.innerWindow; i <= this.data.corpus.p.page; i++) {
      if (i <= 0) {continue;}
      pageElement = Utils.HTMLToElement(
        `
@@ -153,7 +160,7 @@ class CorpusAnalysisReader {
      );
      this.elements.corpusPagination.appendChild(pageElement);
    };
-    for (let i = this.data.corpus.p.page +1; i <= this.data.corpus.p.page +5; i++) {
+    for (let i = this.data.corpus.p.page +1; i <= this.data.corpus.p.page + this.settings.pagination.innerWindow; i++) {
      if (i > this.data.corpus.p.pages) {break;}
      pageElement = Utils.HTMLToElement(
        `
@@ -201,7 +208,7 @@ class CorpusAnalysisReader {
    this.elements.corpusPagination.appendChild(pageElement);
    
    for (let paginateTriggerElement of this.elements.corpusPagination.querySelectorAll('.pagination-trigger[data-target]')) {
-      paginateTriggerElement.addEventListener('click', event => {
+      paginateTriggerElement.addEventListener('click', (event) => {
        event.preventDefault();
        let page = parseInt(paginateTriggerElement.dataset.target);
        this.page(page);
--- a/app/static/js/CorpusAnalysis/CorpusAnalysisStaticVisualization.js
+++ b/app/static/js/CorpusAnalysis/CorpusAnalysisStaticVisualization.js
@@ -13,7 +13,7 @@ class CorpusAnalysisStaticVisualization {
    this.app.registerExtension(this);
  }

-  init() {
+  async init() {
    // Init data
    this.data.corpus = this.app.data.corpus;
    this.renderGeneralCorpusInfo();
--- a/app/static/js/cqi/api/client.js
+++ b/app/static/js/cqi/api/client.js
@@ -1,18 +1,16 @@
 cqi.api.APIClient = class APIClient {
  /**
   * @param {string} host
-   * @param {string} corpusId
   * @param {number} [timeout=60] timeout
   * @param {string} [version=0.1] version
   */
-  constructor(host, corpus_id, timeout = 60, version = '0.1') {
+  constructor(host, timeout = 60, version = '0.1') {
    this.host = host;
    this.timeout = timeout * 1000;  // convert seconds to milliseconds
    this.version = version;
    this.socket = io(
      this.host,
      {
-        auth: {corpus_id: corpus_id},
        transports: ['websocket'],
        upgrade: false
      }
@@ -24,22 +22,16 @@ cqi.api.APIClient = class APIClient {
   * @param {object} [fn_args={}]
   * @returns {Promise}
   */
-  #request(fn_name, fn_args = {}) {
-    return new Promise((resolve, reject) => {
-      // this.socket.timeout(this.timeout).emit('cqi', {fn_name: fn_name, fn_args: fn_args}, (timeoutError, response) => {
-      //   if (timeoutError) {
-      //     reject(timeoutError);
-      //   }
-      this.socket.emit('cqi', fn_name, fn_args, (response) => {
-        if (response.code === 200) {
-          resolve(response.payload);
-        } else if (response.code === 500) {
-          reject(new Error(`[${response.code}] ${response.msg}`));
-        } else if (response.code === 502) {
-          reject(new cqi.errors.lookup[response.payload.code]());
-        }
-      });
-    });
+  async #request(fn_name, fn_args = {}) {
+    // TODO: implement timeout
+    let response = await this.socket.emitWithAck('exec', fn_name, fn_args);
+    if (response.code === 200) {
+      return response.payload;
+    } else if (response.code === 500) {
+      throw new Error(`[${response.code}] ${response.msg}`);
+    } else if (response.code === 502) {
+      throw new cqi.errors.lookup[response.payload.code]();
+    }
  }

  /**
@@ -630,7 +622,9 @@ cqi.api.APIClient = class APIClient {
  async ext_corpus_static_data(corpus) {
    const fn_name = 'ext_corpus_static_data';
    const fn_args = {corpus: corpus};
-    return await this.#request(fn_name, fn_args);
+    let compressedEncodedData = await this.#request(fn_name, fn_args);
+    let data = pako.inflate(compressedEncodedData, {to: 'string'});
+    return JSON.parse(data);
  }

  /**
--- a/app/static/js/cqi/client.js
+++ b/app/static/js/cqi/client.js
@@ -1,13 +1,12 @@
 cqi.CQiClient = class CQiClient {
  /**
   * @param {string} host
-   * @param {string} corpusId
   * @param {number} [timeout=60] timeout
   * @param {string} [version=0.1] version
   */
-  constructor(host, corpusId, timeout = 60, version = '0.1') {
+  constructor(host, timeout = 60, version = '0.1') {
     /** @type {cqi.api.APIClient} */
-    this.api = new cqi.api.APIClient(host, corpusId, timeout, version);
+    this.api = new cqi.api.APIClient(host, timeout, version);
  }

  /**
--- a/app/static/js/cqi/models/corpora.js
+++ b/app/static/js/cqi/models/corpora.js
@@ -138,15 +138,7 @@ cqi.models.corpora.CorpusCollection = class CorpusCollection extends cqi.models.
    /************************************************************************
     *                     Custom additions for nopaque                     *
     ************************************************************************/
-    // returnValue.static_data = await this.client.api.ext_corpus_static_data(corpusName);
-    let tmp = await this.client.api.ext_corpus_static_data(corpusName);
-    console.log(tmp);
-    let inflated = pako.inflate(tmp);
-    console.log(inflated);
-    let decoder = new TextDecoder('utf-8');
-    console.log(decoder);
-    let decoded = decoder.decode(inflated);
-    returnValue.static_data = JSON.parse(decoded);
+    returnValue.static_data = await this.client.api.ext_corpus_static_data(corpusName);
    return returnValue;
  }