@sjcrh/proteinpaint-client 2.146.4-1 → 2.147.1

package/dist/AIProjectAdmin-3XLB3RBL.js

@@ -0,0 +1,624 @@
+import {
+  PlotBase
+} from "./chunk-OGTHZVXJ.js";
+import {
+  filterInit,
+  getNormalRoot,
+  renderTable,
+  sayerror
+} from "./chunk-5GYHGTRN.js";
+import "./chunk-HJ6L54YS.js";
+import "./chunk-BX6ANKGQ.js";
+import {
+  dofetch2,
+  dofetch3
+} from "./chunk-4JXJ4UBP.js";
+import "./chunk-4YNEZISK.js";
+import "./chunk-RY7CVONT.js";
+import "./chunk-IQIXGTQV.js";
+import "./chunk-EUFBKP6Q.js";
+import {
+  getColors
+} from "./chunk-PAV653SV.js";
+import "./chunk-4W3BORF5.js";
+import {
+  copyMerge,
+  getCompInit
+} from "./chunk-SU6RBYZK.js";
+import {
+  require_debounce
+} from "./chunk-2J7NXRQQ.js";
+import "./chunk-IVJWQYGG.js";
+import "./chunk-OMO754MK.js";
+import "./chunk-RA5EXEHB.js";
+import "./chunk-PMZS3SHH.js";
+import "./chunk-LOZEKOES.js";
+import "./chunk-TOU7EVFQ.js";
+import "./chunk-W2IWHXLL.js";
+import "./chunk-5OHXYXLD.js";
+import "./chunk-UJUXE42U.js";
+import {
+  rgb
+} from "./chunk-OMR2DT66.js";
+import "./chunk-NDWTN4U5.js";
+import {
+  __toESM
+} from "./chunk-HFNDKYVF.js";
+
+// plots/aiProjectAdmin/defaults.ts
+function getDefaultAIProjectAdminSettings(overrides = {}) {
+  const defaults = {};
+  return Object.assign(defaults, overrides);
+}
+
+// plots/aiProjectAdmin/repo/ProjectReposity.ts
+var ProjectReposity = class {
+  async getProjects(genome, dslabel) {
+    const body = {
+      genome,
+      dslabel,
+      for: "list"
+    };
+    try {
+      const response = await dofetch3("aiProjectAdmin", { body });
+      return response || [];
+    } catch (error) {
+      console.error("Error fetching projects:", error);
+      throw error;
+    }
+  }
+  /** Gets the image paths from db */
+  async getImagePaths(genome, dslabel, project) {
+    const body = {
+      genome,
+      dslabel,
+      for: "images",
+      project
+    };
+    try {
+      return await dofetch3("aiProjectAdmin", { body });
+    } catch (error) {
+      console.error("Error fetching images:", error);
+      throw error;
+    }
+  }
+  async updateProject(_body, method) {
+    const body = Object.assign({}, _body, { for: "admin" });
+    try {
+      if (method == "PUT" || method == "DELETE") {
+        return await dofetch2("aiProjectAdmin", { method, body }, {});
+      }
+      return await dofetch3("aiProjectAdmin", { method, body });
+    } catch (error) {
+      console.error("Error fetching projects:", error);
+      throw error;
+    }
+  }
+  //TODO: Will need a method to call metadata API, then build dictionary
+  async getTerms(app) {
+    const root = { id: "__root", name: "root", __tree_isroot: true };
+    try {
+      await app.vocabApi.buildAdHocDictionary();
+      const terms = await app.vocabApi.getTermChildren(root, []);
+      return terms || [];
+    } catch (error) {
+      console.error("Error getting terms:", error);
+      throw error;
+    }
+  }
+};
+
+// plots/aiProjectAdmin/view/ProjectAdminRender.ts
+var import_debounce = __toESM(require_debounce(), 1);
+var ProjectAdminRender = class {
+  constructor(dom, projects, interactions) {
+    this.dom = dom;
+    this.projects = projects;
+    this.interactions = interactions;
+  }
+  /** Renders project administration UI, allowing users to
+   * create new projects or edit existing ones.*/
+  renderProjectAdmin() {
+    const projectDiv = this.dom.holder.append("div").attr("id", "sjpp-ai-prjt-admin-projects").attr("class", "sjpp-deletable-ai-prjt-admin-div");
+    this.renderCreateProject(projectDiv);
+    this.renderProjectSelection(projectDiv);
+  }
+  /** Users submit a new project name before sample
+   * filtering UI to finalize project creation.*/
+  renderCreateProject(projectDiv) {
+    const newProjectDiv = projectDiv.append("div").attr("class", "sjpp-project-select-new").style("padding", "10px");
+    const input = newProjectDiv.append("input").attr("id", "sjpp-new-project-name").attr("display", "inline-block").attr("placeholder", "New project name");
+    const button = newProjectDiv.append("div").text("Create Project").classed("sja_menuoption", true).style("display", "inline-block").property("disabled", true).on("click", async () => {
+      const projectName = input.property("value");
+      const prjtNameLen = projectName.trim().length;
+      const showError = (msg) => {
+        sayerror(this.dom.errorDiv, msg);
+        input.property("value", "");
+        button.property("disabled", true);
+        setTimeout(() => {
+          this.dom.errorDiv.selectAll("*").remove();
+        }, 3e3);
+      };
+      if (prjtNameLen == 0) {
+        return showError("Project name cannot be empty");
+      }
+      if (prjtNameLen > 50 || prjtNameLen < 3) {
+        return showError("Project name must be between 3 and 50 characters");
+      }
+      const notUnique = this.projects.some((p) => p.name === projectName.trim());
+      if (notUnique) {
+        return showError(`Project name '${projectName}' already exists`);
+      }
+      if (this.dom.header) this.dom.header.text(`Project: ${projectName}`);
+      await this.interactions.appDispatchEdit({ settings: { project: { name: projectName, type: "new" } } });
+    });
+    input.on("keydown", () => {
+      const debouncer = () => {
+        button.property("disabled", input.property("value").length == 0);
+      };
+      (0, import_debounce.debounce)(debouncer, 300)();
+    });
+  }
+  /** Users may select an existing project from a table
+   * returned for the db to edit or delete, depending
+   * on user roles.*/
+  renderProjectSelection(projectDiv) {
+    if (!this.projects.length) return;
+    const tableDiv = projectDiv.append("div").attr("class", "sjpp-project-select-table").style("padding", "10px");
+    const columns = [{ label: "Project", sortable: true }];
+    const columnButtons = [
+      {
+        text: "Edit",
+        class: "sja_menuoption",
+        //_ = event, __ = idx
+        callback: async (_, idx) => {
+          const project = this.projects[idx];
+          await this.interactions.appDispatchEdit({ settings: { project } });
+          this.interactions.launchViewer(this.dom.holder, []);
+        }
+      },
+      {
+        //TODO: Add logic for admins only once user roles are implemented
+        //Leave here for development
+        text: "Delete",
+        class: "sja_menuoption",
+        callback: (_, i) => {
+          const project = this.projects[i];
+          this.interactions.deleteProject(project);
+          this.projects.splice(i, 1);
+          projectDiv.select(".sjpp-project-select-table").remove();
+          this.renderProjectSelection(projectDiv);
+        }
+      }
+    ];
+    renderTable({
+      div: tableDiv,
+      rows: this.projects.map((p) => {
+        return [{ value: p.name }];
+      }),
+      header: {
+        allowSort: true
+      },
+      columns,
+      singleMode: true,
+      columnButtons
+    });
+  }
+};
+
+// plots/aiProjectAdmin/interactions/AIProjectAdminInteractions.ts
+var AIProjectAdminInteractions = class {
+  constructor(app, id, prjtRepo) {
+    this.app = app;
+    this.id = id;
+    this.genome = app.vocabApi.vocab.genome;
+    this.dslabel = app.vocabApi.vocab.dslabel;
+    this.prjtRepo = prjtRepo;
+  }
+  async addProject(opts) {
+    const config = this.getConfig();
+    const projectObject = Object.assign({}, config.settings.project, opts.project);
+    const body = {
+      genome: this.genome,
+      dslabel: this.dslabel,
+      project: projectObject
+    };
+    try {
+      await this.prjtRepo.updateProject(body, "PUT");
+    } catch (e) {
+      console.error("Error adding project:", e.message || e);
+      throw e;
+    }
+  }
+  async editProject(opts) {
+    const config = this.getConfig();
+    const project = Object.assign(
+      {},
+      config.settings.project,
+      {
+        type: "edit"
+      },
+      opts.project
+    );
+    const body = {
+      genome: this.genome,
+      dslabel: this.dslabel,
+      project
+    };
+    try {
+      const res = await this.prjtRepo.updateProject(body, "POST");
+      if (!project.id) project.id = res.projectId;
+    } catch (e) {
+      console.error("Error editing project:", e.message || e);
+      throw e;
+    }
+    await this.appDispatchEdit({ settings: { project } }, config);
+  }
+  async deleteProject(project) {
+    const body = {
+      genome: this.genome,
+      dslabel: this.dslabel,
+      project: {
+        name: project.value,
+        id: project.id
+      }
+    };
+    try {
+      await this.prjtRepo.updateProject(body, "DELETE");
+    } catch (e) {
+      console.error("Error deleting project:", e.message || e);
+      throw e;
+    }
+  }
+  async getFilteredImages(filter) {
+    const config = this.getConfig();
+    return await this.app.vocabApi.getFilteredAiImages(config.settings.project, filter);
+  }
+  async launchViewer(holder, _images) {
+    holder.selectAll(".sjpp-deletable-ai-prjt-admin-div").remove();
+    const config = this.getConfig();
+    let images = [];
+    if (_images && _images.length > 0) {
+      images = _images;
+    } else {
+      const response = await this.prjtRepo.getImagePaths(
+        this.genome,
+        this.dslabel,
+        config.settings.project
+      );
+      images = response.images;
+    }
+    const wsiViewer = await import("./plot.wsi-KJTM6ZXN.js");
+    wsiViewer.default(this.dslabel, holder, { name: this.genome }, null, config.settings.project.id, images, true);
+  }
+  async appDispatchEdit(settings, config = {}) {
+    if (!config?.settings) {
+      config = this.getConfig();
+      if (!config) throw new Error(`No plot with id='${this.id}' found.`);
+    }
+    await this.app.dispatch({
+      type: "plot_edit",
+      id: this.id,
+      config: Object.assign(settings, config.settings)
+    });
+  }
+  getConfig() {
+    return this.app.getState().plots.find((p) => p.id === this.id);
+  }
+};
+
+// plots/aiProjectAdmin/view/ClassesTableRender.ts
+var ClassesTableRender = class {
+  constructor(holder, rows) {
+    this.dom = {
+      holder,
+      tableDiv: holder.append("div"),
+      btnDiv: holder.append("div")
+    };
+    this.columns = [
+      { label: "" },
+      // Empty for the delete icon
+      {
+        label: "NAME",
+        editCallback: (rowIdx, cell) => {
+          const newValue = cell.value.trim();
+          const foundSameName = this.rows.some((r, i) => newValue === r[1].value.trim() && i !== rowIdx);
+          if (foundSameName) {
+            alert(`Class name '${newValue}' already exists`);
+            cell.value = this.rowsCopy[rowIdx][1].value;
+            cell.__td.text(this.rowsCopy[rowIdx][1].value);
+            return;
+          }
+          this.rowsCopy = this.rows.map((r) => r.map((c) => ({ ...c })));
+        }
+      },
+      { label: "COLOR" }
+    ];
+    const colorScale = getColors(5);
+    this.rows = rows || this.setDefaultClasses(colorScale);
+    this.rowsCopy = [];
+    this.renderTable();
+    this.renderAddClassBtn(colorScale);
+  }
+  renderTable() {
+    this.dom.tableDiv.select("table").remove();
+    if (!this.rows || this.rows.length === 0) return;
+    this.rowsCopy = this.rows.map((r) => r.map((c) => ({ ...c })));
+    renderTable({
+      div: this.dom.tableDiv,
+      columns: this.columns,
+      rows: this.rows,
+      striped: false,
+      showLines: false,
+      singleMode: false,
+      resize: true
+    });
+    for (const [i, row] of this.rows.entries()) {
+      const deleteBtn = row[0].__td.select(".sja_menuoption");
+      deleteBtn.on("click", () => {
+        this.rows.splice(i, 1);
+        this.renderTable();
+      });
+    }
+  }
+  setDefaultClasses(colorScale) {
+    const rows = [];
+    for (let i = 0; i < 4; i++) {
+      this.getNewClass(colorScale, rows);
+    }
+    return rows;
+  }
+  getNewClass(colorScale, rows) {
+    const getName = (i2) => `New class ${i2}`;
+    let i = 1;
+    let found = true;
+    while (found) {
+      const checkName = getName(i);
+      found = rows.some((r) => r[1].value == checkName);
+      if (found) i++;
+    }
+    rows.push([
+      { html: `<div class="sja_menuoption">&times;<div>` },
+      { value: getName(i) },
+      { color: rgb(colorScale(`${i}`)).formatHex() }
+    ]);
+  }
+  renderAddClassBtn(colorScale) {
+    this.dom.btnDiv.append("div").text("Add Class").classed("sja_menuoption", true).style("display", "inline-block").style("margin", "10px 0px 0px 0px").on("click", () => {
+      if (this.rows.length >= 9) {
+        alert("Maximum number of classes reached.");
+        return;
+      }
+      this.getNewClass(colorScale, this.rows);
+      this.renderTable();
+    });
+  }
+};
+
+// plots/aiProjectAdmin/view/SelectorTableRender.ts
+var SelectorTableRender = class {
+  constructor(holder, interactions, images) {
+    this.dom = {
+      holder,
+      tableDiv: holder.append("div").attr("class", ".sjpp-deletable-ai-prjt-admin-div").attr("id", "sjpp-selector-table").style("padding", "10px 0"),
+      btnDiv: holder.append("div").attr("class", ".sjpp-deletable-ai-prjt-admin-div").attr("id", "sjpp-selector-btns")
+    };
+    this.images = images;
+    this.interactions = interactions;
+    this.selectedRows = new Set(
+      this.images.rows.filter((_, i) => {
+        if (i < 50) return true;
+      }).map((_, i) => i)
+    );
+    this.render();
+  }
+  render() {
+    renderTable({
+      div: this.dom.tableDiv,
+      columns: this.images.cols.map((c) => ({ ...c, sortable: true })),
+      rows: this.images.rows,
+      selectedRows: Array.from(this.selectedRows),
+      striped: true,
+      header: { allowSort: true },
+      noButtonCallback: (i, node) => {
+        if (node.checked) {
+          this.selectedRows.add(i);
+        } else {
+          this.selectedRows.delete(i);
+        }
+      }
+    });
+    this.renderApplyBtn();
+  }
+  renderApplyBtn() {
+    const btn = this.dom.btnDiv.append("div").text("Apply").classed("sja_menuoption", true).style("display", "block").style("width", "fit-content").style("margin-left", "5vw").on("click", async () => {
+      if (!this.selectedRows.size) alert(`No rows selected. Please select some rows.`);
+      btn.attr("disabled", true);
+      const images = Array.from(this.selectedRows).map((i) => `${this.images.rows[i][0].value}.svs`);
+      await this.interactions.editProject({
+        project: {
+          images
+        }
+      });
+      this.dom.holder.selectAll("*").remove();
+      this.interactions.launchViewer(this.dom.holder, images);
+    });
+  }
+};
+
+// plots/aiProjectAdmin/view/CreateProjectRender.ts
+var CreateProjectRender = class {
+  constructor(dom, app, interactions) {
+    dom.holder.style("padding", "10px 20px").attr("class", "sjpp-deletable-ai-prjt-admin-div");
+    this.dom = {
+      holder: dom.holder,
+      errorDiv: dom.errorDiv,
+      filterDiv: dom.holder.append("div").attr("id", "sjpp-ai-prjt-admin-filter-div"),
+      classDiv: dom.holder.append("div").attr("id", "sjpp-ai-prjt-admin-classes-table").style("padding", "20px 0px")
+    };
+    this.app = app;
+    this.interactions = interactions;
+    this.filter = null;
+  }
+  render() {
+    this.renderFilter();
+    this.classesTable = new ClassesTableRender(this.dom.classDiv);
+    this.renderApplyBtn();
+  }
+  renderFilter() {
+    const filter = filterInit({
+      holder: this.dom.filterDiv,
+      emptyLabel: "Add filter",
+      vocabApi: this.app.vocabApi,
+      termdbConfig: this.app.vocabApi.termdbConfig,
+      callback: (filter2) => {
+        this.filter = filter2;
+      }
+    });
+    const state = this.app.getState();
+    const root = getNormalRoot(state.termfilter.filter);
+    filter.main(root);
+  }
+  renderApplyBtn() {
+    const btn = this.dom.classDiv.append("div").text("Apply").classed("sja_menuoption", true).style("display", "inline-block").style("margin-left", "200px").on("click", async () => {
+      btn.attr("disabled", true);
+      const selections = await this.interactions.getFilteredImages(this.filter);
+      if (this.filter && (selections.status != "ok" || selections.data.length === 0)) {
+        alert("No images match your filter criteria.");
+        return;
+      }
+      await this.interactions.addProject({
+        project: {
+          filter: this.filter,
+          classes: this.classesTable.rows.map((row, i) => {
+            return { label: row[1].value, color: row[2].color, key_shortcut: `Digit${i + 1}` };
+          })
+        }
+      });
+      this.dom.holder.selectAll("*").remove();
+      new SelectorTableRender(this.dom.holder, this.interactions, selections.data);
+    });
+  }
+  /**** Uncomment before production */
+  // private validateInput() {
+  // 	const invalidInfo = {
+  // 		entries: [] as { dataType: string; reason: string }[],
+  // 		errorMsg: 'Please clear all "Data type: Class" errors before applying changes.'
+  // 	}
+  // 	//Show user error if no filter is defined.
+  // 	if (!this.filter) {
+  // 		invalidInfo.entries.push({ dataType: 'Filter', reason: 'No filter defined. Did you mean to add a filter?' })
+  // 	}
+  // 	//Check if all classes were deleted
+  // 	const classes = this.classesTable?.rows.map(row => row[1].value) || []
+  // 	if (classes.length === 0) {
+  // 		invalidInfo.entries.push({ dataType: 'Class', reason: 'No classes defined. Did you mean to add a class?' })
+  // 	}
+  // 	//Check to see if any class is still a default class
+  // 	const unchangedClasses =
+  // 		this.classesTable?.rows
+  // 			.filter(row => (row[1]?.value as string)?.startsWith('New class'))
+  // 			.map(r => r[1]?.value as string) || []
+  // 	for (const c of unchangedClasses) {
+  // 		invalidInfo.entries.push({ dataType: 'Class', reason: `${c} is the default class name. Please rename.` })
+  // 	}
+  // 	return invalidInfo
+  // }
+};
+
+// plots/aiProjectAdmin/AIProjectAdmin.ts
+var AIProjectAdmin = class extends PlotBase {
+  constructor(opts, api) {
+    super(opts, api);
+    this.type = "AIProjectAdmin";
+    this.opts = opts;
+    this.dom = {
+      holder: opts.holder,
+      errorDiv: opts.holder.append("div").style("margin", "3px").attr("class", "sjpp-ai-prjt-admin-error")
+    };
+    if (opts.header) this.dom.header = opts.header;
+    this.prjtRepo = new ProjectReposity();
+  }
+  static {
+    this.type = "AIProjectAdmin";
+  }
+  getState(appState) {
+    const config = appState.plots.find((p) => p.id === this.id);
+    if (!config) {
+      throw `No plot with id='${this.id}' found. Did you set this.id before this.api = getComponentApi(this)?`;
+    }
+    return {
+      config,
+      vocab: appState.vocab,
+      filter: appState.termfilter.filter
+    };
+  }
+  async init(appState) {
+    this.interactions = new AIProjectAdminInteractions(this.app, this.id, this.prjtRepo);
+    try {
+      this.projects = await this.prjtRepo.getProjects(appState.vocab.genome, appState.vocab.dslabel);
+    } catch (e) {
+      console.error("Error initializing AIProjectAdmin:", e);
+      throw e;
+    }
+    this.prjtAdminUI = new ProjectAdminRender(this.dom, this.projects, this.interactions);
+    this.prjtAdminUI.renderProjectAdmin();
+  }
+  async main() {
+    const state = structuredClone(this.state);
+    const config = state.config;
+    if (config.chartType != this.type) return;
+    const project = config.settings.project;
+    if (!project) return;
+    if (!this.interactions) throw new Error("AIProjectAdminInteractions not initialized");
+    this.dom.holder.selectAll(".sjpp-deletable-ai-prjt-admin-div").remove();
+    if (project.type === "new") {
+      const terms = await this.prjtRepo.getTerms(this.app);
+      if (!terms || terms.length === 0) {
+        sayerror(this.dom.errorDiv, "No metadata found.");
+        return;
+      }
+      const createProjectRender = new CreateProjectRender(this.dom, this.app, this.interactions);
+      createProjectRender.render();
+    }
+    if (project.type == "existing") {
+      if (!project.name) {
+        sayerror(this.dom.errorDiv, "Project name not provided.");
+        return;
+      }
+      if (!project.id) {
+        const existingProject = this.projects?.find((p) => p.name === project.name);
+        if (!existingProject) {
+          sayerror(this.dom.errorDiv, `Project ${project.name} not found.`);
+          return;
+        }
+        await this.app.save({
+          type: "plot_edit",
+          id: this.id,
+          config: { settings: { project: { id: existingProject.id } } }
+        });
+      }
+      this.interactions.launchViewer(this.dom.holder, []);
+    }
+  }
+};
+var aiProjectAdminInit = getCompInit(AIProjectAdmin);
+var componentInit = aiProjectAdminInit;
+async function getPlotConfig(opts) {
+  const config = {
+    chartType: "AIProjectAdmin",
+    subfolder: "aiProjectAdmin",
+    extension: "ts",
+    settings: getDefaultAIProjectAdminSettings(opts.overrides)
+  };
+  if (opts.settings?.project && !opts.settings?.project?.type) {
+    opts.settings.project.type = "existing";
+  }
+  return copyMerge(config, opts);
+}
+export {
+  aiProjectAdminInit,
+  componentInit,
+  getPlotConfig
+};
+//# sourceMappingURL=AIProjectAdmin-3XLB3RBL.js.map