plexora 0.0.1__py3-none-any.whl

plexora/client/src/js/services/importFormValidation.js

@@ -0,0 +1,257 @@
+/**
+ * importFormValidation.js -- the upload page's one form.
+ *
+ * The page asks for a name, an image, an optional mask and an optional data
+ * file. It does not ask what format the data is in: /inspect_data answers that
+ * from the file, and the two controls that cannot be answered from the file --
+ * which table inside a multi-table .zarr store, and which image inside a table
+ * that spans several -- are revealed only when the file forces the choice.
+ *
+ * Submission is a native POST navigation rather than fetch(). That is
+ * deliberate: this page's scripts share a realm with base.html's stack, and an
+ * AJAX submit here previously had to reconstruct a whole page's worth of state
+ * from the response. Letting the browser navigate keeps the server free to
+ * redirect wherever import decided the user should go next -- the viewer, or
+ * the column-classification screen.
+ */
+
+(function () {
+    'use strict'
+
+    // Bootstrap validation styling; the browser handles the actual submit.
+    Array.prototype.slice.call(document.querySelectorAll('.needs-validation'))
+        .forEach(function (form) {
+            form.addEventListener('submit', function (event) {
+                if (!form.checkValidity()) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                } else {
+                    setSubmitting(form, true);
+                }
+                form.classList.add('was-validated');
+            }, true);
+        });
+})();
+
+function setSubmitting(form, busy) {
+    const button = form.querySelector('button[type="submit"]');
+    if (!button) return;
+    button.disabled = busy;
+    // Reading a large .h5ad to work out its structure takes a moment, and the
+    // page navigates rather than streaming progress -- so say something.
+    button.textContent = busy ? 'Importing…' : 'Create Project';
+}
+
+// --------------------------------------------------------------------------
+// Project name, suggested from the image path
+// --------------------------------------------------------------------------
+
+let datasetNameManuallyEdited = false;
+
+function markDatasetNameEdited() {
+    datasetNameManuallyEdited = true;
+}
+
+function deriveDatasetName(path) {
+    if (!path) return "";
+    const base = path.split(/[\\/]/).pop() || "";
+    return base.replace(/\.(ome\.tiff|ome\.tif|ome\.zarr|tiff|tif|svs|zarr|png|qptiff)$/i, "");
+}
+
+function suggestDatasetName(caller, targetFieldId) {
+    if (datasetNameManuallyEdited) return;
+    const nameField = document.getElementById(targetFieldId || "name");
+    if (!nameField) return;
+    const suggested = deriveDatasetName(caller && caller.value);
+    if (suggested) nameField.value = suggested;
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    // Wire every "Browse..." button (see browsePicker.js) to fill its paired
+    // text field via the native OS file/folder dialog.
+    document.querySelectorAll('[data-browse-target]').forEach(function (button) {
+        const input = document.getElementById(button.dataset.browseTarget);
+        attachBrowseButton(button, input, {
+            mode: button.dataset.browseMode || 'file',
+            filter: button.dataset.browseFilter || 'any',
+        });
+        // A path arriving from the dialog has to go through the same
+        // inspection a typed one does, or the table/subset pickers never
+        // appear for anyone who used Browse.
+        if (input && input.id === 'data_file') {
+            button.addEventListener('click', () => setTimeout(() => inspectDataFile(input), 0));
+        }
+    });
+
+    const dataField = document.getElementById('data_file');
+    if (dataField && dataField.value) inspectDataFile(dataField);
+});
+
+// --------------------------------------------------------------------------
+// Path checks
+// --------------------------------------------------------------------------
+
+function markValidity(input, valid) {
+    input.classList.remove('is-valid', 'is-invalid');
+    if (valid !== null) input.classList.add(valid ? 'is-valid' : 'is-invalid');
+}
+
+async function checkFileExistence(caller) {
+    if (!caller.value) return markValidity(caller, null);
+    const response = await fetch(plexoraUrl('check_file_existence'), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: caller.value }),
+    });
+    const { exists } = await response.json();
+    markValidity(caller, exists);
+}
+
+/** Blank is fine for an optional field -- an empty box is not an error. */
+async function checkOptionalFileExistence(caller) {
+    if (!caller.value) return markValidity(caller, null);
+    return checkFileExistence(caller);
+}
+
+async function checkDatasetExistence(caller) {
+    const response = await fetch(plexoraUrl('dataset_existence'), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ datasetName: caller.value }),
+    });
+    const { exists } = await response.json();
+    markValidity(caller, !exists);
+}
+
+// --------------------------------------------------------------------------
+// Inspecting the data file
+// --------------------------------------------------------------------------
+
+const DATA_TYPE_LABELS = {
+    csv: 'CSV table',
+    anndata: 'AnnData',
+    spatialdata: 'SpatialData store',
+};
+
+// Replies can arrive out of order when someone types quickly, and a stale one
+// would re-show a picker for a file that is no longer in the box.
+let inspectToken = 0;
+let inspectTimer = null;
+
+function inspectDataFile(caller) {
+    clearTimeout(inspectTimer);
+    // Every inspection opens the file, and an .h5ad is not cheap to open --
+    // so wait for a pause in typing rather than firing per keystroke.
+    inspectTimer = setTimeout(() => runInspection(caller), 250);
+}
+
+/**
+ * @param caller the data path input
+ * @param table  which table inside a .zarr store to look at, on the second
+ *   pass. Everything below the table picker is a question about a table, so a
+ *   multi-table store cannot answer any of it until one is named -- and the
+ *   picker's own selection has to survive, which is why the table field is
+ *   left alone when this is set.
+ */
+async function runInspection(caller, table) {
+    const token = ++inspectToken;
+    const hint = document.getElementById('data_file_hint');
+    const error = document.getElementById('data_file_error');
+    if (!table) hideField('data_table_field');
+    hideField('subset_field');
+
+    if (!caller.value) {
+        markValidity(caller, null);
+        caller.setCustomValidity('');
+        hint.textContent = 'CSV, AnnData (.h5ad) or SpatialData (.zarr).';
+        return;
+    }
+
+    let payload;
+    try {
+        const response = await fetch(plexoraUrl('inspect_data'), {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ path: caller.value, table: table || null }),
+        });
+        payload = await response.json();
+    } catch (e) {
+        return;  // transport failures are reported by PlexoraStatus
+    }
+    if (token !== inspectToken) return;
+
+    if (!payload.ok) {
+        markValidity(caller, false);
+        // setCustomValidity is what stops the form submitting -- the red
+        // border alone would let an unreadable file through to the server.
+        caller.setCustomValidity(payload.error || 'Unreadable');
+        error.textContent = payload.error || '';
+        hint.textContent = '';
+        return;
+    }
+
+    markValidity(caller, true);
+    caller.setCustomValidity('');
+    error.textContent = '';
+    hint.textContent = DATA_TYPE_LABELS[payload.data_type] || payload.data_type;
+
+    if (!table && (payload.tables || []).length > 1) {
+        // Choosing re-runs this with the table, which is what puts the subset
+        // question. Returning here used to be the end of it, so a multi-table
+        // store could import loading every image at once.
+        //
+        // The re-run also matters for what this form does NOT ask: the chosen
+        // table's obs columns and layer names are recorded from this same
+        // inspection, and the requirements modal asks about them later.
+        showTablePicker(payload.tables, caller);
+        return;
+    }
+    if ((payload.ambiguous || []).length) {
+        showSubsetPicker(payload.ambiguous[0]);
+    }
+}
+
+function hideField(id) {
+    const field = document.getElementById(id);
+    if (!field) return;
+    field.hidden = true;
+    // A hidden required control blocks submission with no visible cause.
+    field.querySelectorAll('select, input').forEach((el) => {
+        el.required = false;
+    });
+}
+
+function showTablePicker(tables, dataInput) {
+    const field = document.getElementById('data_table_field');
+    const select = document.getElementById('data_table');
+    select.innerHTML = '';
+    select.append(new Option('Choose a table…', ''));
+    tables.forEach((table) => {
+        select.append(new Option(
+            `${table.name} — ${table.n_obs} cells × ${table.n_var} markers`,
+            table.name,
+        ));
+    });
+    // Assigned rather than added: this runs again on every re-inspection, and
+    // addEventListener would stack a fresh handler each time.
+    select.onchange = () => {
+        hideField('subset_field');
+        if (select.value) runInspection(dataInput, select.value);
+    };
+    select.required = true;
+    field.hidden = false;
+}
+
+function showSubsetPicker(ambiguous) {
+    const field = document.getElementById('subset_field');
+    const select = document.getElementById('subset_value');
+    document.getElementById('subset_column').value = ambiguous.column;
+    document.getElementById('subset_hint').textContent =
+        `This table covers several images (column "${ambiguous.column}"). ` +
+        'Choose the one this image shows.';
+    select.innerHTML = '';
+    select.append(new Option('Choose an image…', ''));
+    (ambiguous.values || []).forEach((value) => select.append(new Option(value, value)));
+    select.required = true;
+    field.hidden = false;
+}

plexora/client/src/js/services/numericData.js

@@ -0,0 +1,100 @@
+class NumericData {
+  /**
+   * Constructor for NumericDataLayer.
+   *
+   * @param config - the cinfiguration file (json)
+   * @param dataLayer - the data layer (stub) that executes server requests and holds client side data
+   */
+  constructor(config, dataLayer) {
+      // Roles, not literal column names -- the same map plugins read.
+      this.schema = PlexoraDataset.resolveSchema(config);
+      this.dataLayer = dataLayer;
+      this.cellsPromise = null;
+  }
+
+  /*
+   * Load cell segmentation data
+   */
+  async loadCells() {
+      if (this.cellsPromise) {
+          return this.cellsPromise;
+      }
+      this.cellsPromise = this.fetchCells();
+      return this.cellsPromise;
+  }
+
+  async fetchCells() {
+      const { cellId, x, y } = this.schema;
+      const fields = [ cellId, x, y ];
+      const idsCenters = await this.getAllUInt32Entries(fields);
+      // Deinterleave in one linear pass instead of two full-array .filter()
+      // passes (was O(2 * cellCount * fields.length)).
+      const count = idsCenters.length / fields.length;
+      const ids = new Uint32Array(count);
+      const centers = new Uint32Array(count * (fields.length - 1));
+      for (let i = 0, o = 0, c = 0; i < idsCenters.length; i += fields.length, o++) {
+          ids[o] = idsCenters[i];
+          for (let k = 1; k < fields.length; k++) {
+              centers[c++] = idsCenters[i + k];
+          }
+      }
+      return { ids, centers };
+  }
+
+  /*
+   * Access DataLayer bitrange as floating point.
+   */
+  get floatRange() {
+      return this.dataLayer.getImageBitRange(true);
+  }
+
+  /*
+   * Access DataLayer bitrange as an integer.
+   */
+  get intRange() {
+      return this.dataLayer.getImageBitRange(false);
+  }
+
+  /*
+   * @function getNearestCell - return nearest cell to point
+   *
+   * @param x - cell x position in image coordinates
+   * @param y - cell y position in image coordinates
+   */
+  getNearestCell(x, y) {
+      return this.dataLayer.getNearestCell(x, y);
+  }
+
+  /*
+   * @function getAllFloat32Ids - all integer entries
+   * @param keys - list of keys to access
+   */
+  async getAllFloat32Entries(keys) {
+      return this.getAllEntries(keys, false);
+  }
+
+  /*
+   * @function getAllUInt32Ids - all integer entries
+   * @param keys - list of keys to access
+   */
+  async getAllUInt32Entries(keys) {
+      return this.getAllEntries(keys, true);
+  }
+
+  /*
+   * @function getAllEntries - all cell entries by keys
+   * @param keys - list of keys to access
+   * @param useInt - whether requesting integers
+   */
+  async getAllEntries(keys, useInt) {
+      if (!keys.length) {
+          return [];
+      }
+      const { dataLayer } = this;
+      const arr = await dataLayer.getAllCells(keys, useInt);
+      if (useInt) {
+          return new Uint32Array(arr);
+      }
+      return new Float32Array(arr);
+  }
+}

plexora/client/src/js/services/passVariablesToFrontend.js

@@ -0,0 +1,20 @@
+function passVariablesToFrontend(vars) {
+    return vars
+}
+
+function plexoraBaseUrl() {
+    const base = window.PLEXORA_BASE_URL || "";
+    if (!base || base === "/") {
+        return "";
+    }
+    return "/" + String(base).replace(/^\/+|\/+$/g, "");
+}
+
+function plexoraUrl(path) {
+    const normalizedPath = String(path || "").replace(/^\/+/, "");
+    const base = plexoraBaseUrl();
+    if (!normalizedPath) {
+        return base || "/";
+    }
+    return (base ? base + "/" : "/") + normalizedPath;
+}

plexora/client/src/js/services/simpleEventHandler.js

@@ -0,0 +1,25 @@
+
+class SimpleEventHandler {
+
+    constructor(subject) {
+        this.subject = subject;
+        this.eventListeners = [];
+    }
+
+    bind(eventNames, eventFunction) {
+        for (const eventName of eventNames.split(' ')) {
+            this.eventListeners.push({eventName, eventFunction});
+            const eventFunctionWrap = e => eventFunction(e.detail, e);
+            this.subject.addEventListener(eventName, eventFunctionWrap, false);
+        }
+    }
+
+    getListeners() {
+        return this.eventListeners;
+    }
+
+    trigger(eventName, detail) {
+        this.subject.dispatchEvent(new CustomEvent(eventName, {detail}));
+    }
+
+}

plexora/client/src/js/vendor.js

@@ -0,0 +1,29 @@
+import {Buffer} from 'buffer/';
+import {PNG} from 'pngjs'
+import UPNG from 'upng-js'
+import 'bootstrap'
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'pngjs'
+import "regenerator-runtime";
+import * as d3 from 'd3';
+import {sliderBottom} from 'd3-simple-slider';
+import 'lodash'
+import '@fortawesome/fontawesome-free/js/all'
+import Sortable from 'sortablejs';
+import OpenSeadragon from 'openseadragon';
+import {jsPDF} from 'jspdf';
+import {ViewerManager} from './views/viewerManager';
+import {GLRenderer} from './services/glRenderer';
+import Dropzone from 'dropzone';
+
+window.d3 = d3;
+window.d3.sliderBottom = sliderBottom;
+window.PNG = PNG;
+window.UPNG = UPNG;
+window.Buffer = Buffer;
+window.Sortable = Sortable;
+window.OpenSeadragon = OpenSeadragon;
+window.jsPDF = jsPDF;
+window.Dropzone = Dropzone;
+window.ViewerManager = ViewerManager;
+window.GLRenderer = GLRenderer;