@sjcrh/proteinpaint-client 2.166.0 → 2.167.0

package/dist/brainImaging-ESQGNGZH.js

@@ -1,417 +0,0 @@
-import {
-  controlsInit,
-  term0_term2_defaultQ
-} from "./chunk-CZTC4MTE.js";
-import "./chunk-GZ2B634M.js";
-import "./chunk-4XDKCFFT.js";
-import {
-  renderTable,
-  svgLegend
-} from "./chunk-UT6W4ZZL.js";
-import "./chunk-HJ6L54YS.js";
-import {
-  dofetch3
-} from "./chunk-5TDKRZN5.js";
-import "./chunk-RYRCMHYR.js";
-import "./chunk-ECKWM4HB.js";
-import {
-  Menu
-} from "./chunk-NXOWHUR4.js";
-import "./chunk-5MWX5HUZ.js";
-import "./chunk-IQIXGTQV.js";
-import "./chunk-ICNJQHQZ.js";
-import {
-  copyMerge,
-  getCompInit
-} from "./chunk-FYTZCTJC.js";
-import "./chunk-7NTZWOJV.js";
-import "./chunk-OMO754MK.js";
-import "./chunk-RA5EXEHB.js";
-import "./chunk-PMZS3SHH.js";
-import "./chunk-LOZEKOES.js";
-import "./chunk-TOU7EVFQ.js";
-import {
-  linear
-} from "./chunk-W2IWHXLL.js";
-import "./chunk-5OHXYXLD.js";
-import "./chunk-UJUXE42U.js";
-import {
-  rgb
-} from "./chunk-OMR2DT66.js";
-import "./chunk-NDWTN4U5.js";
-import "./chunk-HFNDKYVF.js";
-
-// plots/brainImaging.js
-var BrainImaging = class {
-  constructor(opts) {
-    this.opts = opts;
-    this.type = "brainImaging";
-    setInteractivity(this);
-  }
-  async init(appState) {
-    const state = this.getState(appState);
-    const holder = this.opts.holder;
-    if (this.opts.header)
-      this.opts.header.style("padding-left", "7px").style("color", "rgb(85, 85, 85)").html(`Brain Imaging: ${state.config.queryKey}/${state.config.selectedSampleFileNames.join(" ")}`);
-    const controlsHolder = holder.append("div").style("display", "inline-block").style("vertical-align", "top");
-    const rightDiv = holder.append("div").style("display", "inline-block").style("vertical-align", "top");
-    const headerHolder = rightDiv.append("div").style("display", "inline-block").style("vertical-align", "top").style("padding", "10px");
-    const contentHolder = rightDiv.append("div").style("vertical-align", "top");
-    const table = contentHolder.append("table").style("border-collapse", "collapse");
-    const headerTr = table.append("tr");
-    const contentTr = table.append("tr").style("background-color", "black");
-    const tdL = contentTr.append("td");
-    const tdF = contentTr.append("td");
-    const tdT = contentTr.append("td");
-    const legendHolder = contentHolder.append("svg").style("width", "100%").on("mouseup", this.legendLabelMouseup);
-    const legendMenu = new Menu({ padding: "0px" });
-    this.dom = {
-      headerHolder,
-      contentHolder,
-      headerTr,
-      tdL,
-      tdF,
-      tdT,
-      legendHolder,
-      legendMenu
-    };
-    this.addSliders(state.config.settings.brainImaging);
-    const configInputsOptions = this.getConfigInputsOptions(state);
-    this.components = {
-      controls: await controlsInit({
-        app: this.app,
-        id: this.id,
-        holder: controlsHolder,
-        inputs: configInputsOptions
-      })
-    };
-    this.components.controls.on("downloadClick.brainImaging", () => {
-      const urls = [];
-      for (const key in this.imagesData)
-        for (const category in this.imagesData[key].dataUrls) {
-          const dataUrl = this.imagesData[key].dataUrls[category].url;
-          urls.push(dataUrl);
-        }
-      this.downloadImage(urls);
-    });
-    this.legendRenderer = svgLegend({ holder: this.dom.legendHolder });
-  }
-  addSliders(settings) {
-    const tr = this.dom.headerTr;
-    let td = tr.append("td");
-    td.append("label").attr("for", "saggital").text("Sagittal:");
-    this.dom.saggitalSlider = td.append("input").attr("id", "saggital").attr("type", "range").attr("min", 0).attr("max", 192).attr("value", settings.brainImageL).on("change", (e) => {
-      this.editBrainImage("brainImageL", e.target.value);
-    });
-    this.dom.saggitalInput = td.append("input").attr("type", "number").attr("min", 0).attr("max", 192).attr("value", settings.brainImageL).on("change", (e) => {
-      this.editBrainImage("brainImageL", e.target.value);
-    }).style("vertical-align", "top");
-    td = tr.append("td");
-    td.append("label").attr("for", "coronal").text("Coronal:");
-    this.dom.coronalSlider = td.append("input").attr("type", "range").attr("min", 0).attr("max", 228).attr("value", settings.brainImageF).on("change", (e) => {
-      this.editBrainImage("brainImageF", e.target.value);
-    });
-    this.dom.coronalInput = td.append("input").attr("type", "number").attr("min", 0).attr("max", 192).attr("value", settings.brainImageF).on("change", (e) => {
-      this.editBrainImage("brainImageF", e.target.value);
-    }).style("vertical-align", "top");
-    td = tr.append("td");
-    td.append("label").attr("for", "axial").text("Axial:");
-    this.dom.axialSlider = td.append("input").attr("id", "axial").attr("type", "range").attr("min", 0).attr("max", 192).attr("value", settings.brainImageT).on("change", (e) => {
-      this.editBrainImage("brainImageT", e.target.value);
-    });
-    this.dom.axialInput = td.append("input").attr("type", "number").attr("min", 0).attr("max", 192).attr("value", settings.brainImageT).on("change", (e) => {
-      this.editBrainImage("brainImageT", e.target.value);
-    });
-  }
-  editBrainImage(key, value) {
-    if (!value) return;
-    const settings = { [key]: Number(value) };
-    this.app.dispatch({ type: "plot_edit", id: this.id, config: { settings: { brainImaging: settings } } });
-  }
-  downloadImage(dataUrls) {
-    for (const dataUrl of dataUrls) {
-      const downloadImgName = "brainImaging";
-      const a = document.createElement("a");
-      document.body.appendChild(a);
-      a.addEventListener(
-        "click",
-        () => {
-          a.download = downloadImgName + ".png";
-          a.href = dataUrl;
-          document.body.removeChild(a);
-        },
-        false
-      );
-      a.click();
-    }
-  }
-  getConfigInputsOptions(state) {
-    if (state.config.selectedSampleFileNames.length == 1) return [];
-    const mandatoryConfigInputOptions = [
-      {
-        label: "Divide by",
-        type: "term",
-        chartType: "brainImaging",
-        configKey: "divideByTW",
-        title: "Categories to divide by",
-        usecase: { target: "brainImaging", detail: "term0" },
-        vocabApi: this.app.vocabApi,
-        numericEditMenuVersion: ["discrete"],
-        defaultQ4fillTW: term0_term2_defaultQ
-      },
-      {
-        label: "Color by",
-        type: "term",
-        chartType: "brainImaging",
-        configKey: "overlayTW",
-        title: "Categories to color the samples",
-        usecase: { target: "brainImaging", detail: "term2" },
-        vocabApi: this.app.vocabApi,
-        numericEditMenuVersion: ["discrete"],
-        defaultQ4fillTW: term0_term2_defaultQ
-      }
-    ];
-    return mandatoryConfigInputOptions;
-  }
-  getState(appState) {
-    const config = appState.plots.find((p) => p.id === this.id);
-    return {
-      config,
-      dslabel: appState.vocab.dslabel,
-      genome: appState.vocab.genome,
-      RefNIdata: appState.termdbConfig.queries.NIdata[config.queryKey]
-    };
-  }
-  async main() {
-    this.config = structuredClone(this.state.config);
-    this.settings = this.state.config.settings.brainImaging;
-    this.dom.saggitalSlider.property("value", this.settings.brainImageL);
-    this.dom.saggitalInput.property("value", this.settings.brainImageL);
-    this.dom.coronalSlider.property("value", this.settings.brainImageF);
-    this.dom.coronalInput.property("value", this.settings.brainImageF);
-    this.dom.axialSlider.property("value", this.settings.brainImageT);
-    this.dom.axialInput.property("value", this.settings.brainImageT);
-    const data = await Promise.all([
-      this.requestImage("l", this.settings.brainImageL),
-      this.requestImage("f", this.settings.brainImageF),
-      this.requestImage("t", this.settings.brainImageT)
-    ]);
-    this.imagesData = {
-      brainImageL: { dataUrls: {}, td: this.dom.tdL, data: data[0] },
-      brainImageF: { dataUrls: {}, td: this.dom.tdF, data: data[1] },
-      brainImageT: { dataUrls: {}, td: this.dom.tdT, data: data[2] }
-    };
-    for (const img of Object.values(this.imagesData)) this.renderImages(img);
-    this.renderLegend();
-  }
-  async requestImage(key, value) {
-    const body = {
-      genome: this.state.genome,
-      dslabel: this.state.dslabel,
-      refKey: this.state.config.queryKey,
-      [key]: value,
-      selectedSampleFileNames: this.state.config.selectedSampleFileNames,
-      divideByTW: this.state.config.divideByTW,
-      overlayTW: this.state.config.overlayTW,
-      legendFilter: this.state.config.legendFilter
-    };
-    return await dofetch3("brainImaging", { body });
-  }
-  renderImages({ data, td, dataUrls }) {
-    this.legendValues = data.legend;
-    if (data.error) throw data.error;
-    for (const [termV, result] of Object.entries(data.brainImage)) {
-      dataUrls[termV] = result;
-    }
-    td.selectAll("*").remove();
-    for (const [termV, result] of Object.entries(dataUrls)) {
-      if (this.state.config.divideByTW)
-        td.append("div").attr("class", "pp-chart-title").style("text-align", "center").text(`${termV} (n=${result.catNum})`).style("font-weight", "600").style("color", "white").style("font-size", "24px").style("margin-bottom", "5px").style("margin-top", "5px").style("display", "block");
-      td.append("div").append("img").attr("src", result.url);
-    }
-  }
-  renderLegend() {
-    const legendItems = [];
-    for (const [label, v] of Object.entries(this.legendValues)) {
-      const scale = linear(["white", v.color], [0, v.maxLength]).clamp(true);
-      legendItems.push({
-        text: label == "default" ? "Combined Intensity" : label,
-        width: 100,
-        scale,
-        colors: ["white", v.color],
-        domain: [0, v.maxLength],
-        key: label,
-        crossedOut: v.crossedOut
-      });
-    }
-    this.legendItems = legendItems;
-    const legendRendererData = [
-      {
-        items: legendItems
-      }
-    ];
-    this.legendRenderer(legendRendererData, {
-      settings: {
-        fontsize: 16,
-        iconh: 14,
-        iconw: 14,
-        dimensions: {
-          xOffset: 0
-        }
-      }
-    });
-  }
-};
-function makeChartBtnMenu(holder, chartsInstance) {
-  chartsInstance.dom.tip.clear();
-  const menuDiv = holder.append("div");
-  if (chartsInstance.state.termdbConfig.queries.NIdata) {
-    for (const [refKey, ref] of Object.entries(chartsInstance.state.termdbConfig.queries.NIdata)) {
-      const refDiv = menuDiv.append("div");
-      const refOption = refDiv.append("div").attr("class", "sja_menuoption sja_sharp_border").text(refKey).on("click", async () => {
-        refOption.attr("class", "sja_menuoption_not_interactive");
-        refOption.on("click", null);
-        const body = {
-          genome: chartsInstance.opts.vocab.genome,
-          dslabel: chartsInstance.opts.vocab.dslabel,
-          refKey,
-          samplesOnly: true
-        };
-        const result = await dofetch3("brainImagingSamples", { body });
-        const samples = result.samples;
-        const [rows, columns] = await getTableData(chartsInstance, samples, chartsInstance.state, refKey);
-        const applybt = {
-          text: "APPLY",
-          class: "sjpp_apply_btn sja_filter_tag_btn",
-          callback: (indexes) => {
-            chartsInstance.dom.tip.hide();
-            const selectedSampleFileNames = indexes.map((i) => samples[i].sample + ".nii");
-            const config = {
-              chartType: "brainImaging",
-              queryKey: refKey,
-              settings: {
-                brainImaging: {
-                  brainImageL: ref.parameters.l,
-                  brainImageF: ref.parameters.f,
-                  brainImageT: ref.parameters.t
-                }
-              },
-              selectedSampleFileNames
-            };
-            chartsInstance.app.dispatch({
-              type: "plot_create",
-              config
-            });
-          }
-        };
-        renderTable({
-          rows,
-          columns,
-          resize: true,
-          singleMode: false,
-          div: refDiv.append("div"),
-          maxHeight: "40vh",
-          buttons: [applybt]
-        });
-      });
-    }
-  }
-}
-var brainImaging = getCompInit(BrainImaging);
-var componentInit = brainImaging;
-async function getPlotConfig(opts) {
-  const settings = {
-    brainImaging: { brainImageL: 76, brainImageF: 116, brainImageT: 80 }
-  };
-  const config = { chartType: "brainImaging", settings, hidePlotFilter: true };
-  return copyMerge(config, opts);
-}
-async function getTableData(self, samples, state, refKey) {
-  const rows = [];
-  for (const sample of samples) {
-    const row = [{ value: sample.sample }];
-    for (const c of state.termdbConfig.queries.NIdata[refKey].sampleColumns || []) {
-      row.push({ value: sample[c.termid] });
-    }
-    rows.push(row);
-  }
-  const columns = [{ label: "Sample" }];
-  for (const c of state.termdbConfig.queries.NIdata[refKey].sampleColumns || []) {
-    columns.push({
-      label: (await self.app.vocabApi.getterm(c.termid)).name
-    });
-  }
-  return [rows, columns];
-}
-function setInteractivity(self) {
-  self.legendLabelMouseup = (event) => {
-    const targetData = event.target.__data__;
-    if (!targetData || targetData.key == "default") return;
-    const legendMenu = self.dom.legendMenu.clear();
-    const legendMenuDiv = legendMenu.d.append("div");
-    const legendFilter = self.state.config.legendFilter ? [...self.state.config.legendFilter] : [];
-    const legendFilterIndex = legendFilter.indexOf(targetData.key);
-    if (legendFilterIndex !== -1 || legendFilter.length + 1 !== self.legendItems.length) {
-      legendMenuDiv.append("div").attr("class", "sja_menuoption sja_sharp_border").text(legendFilterIndex == -1 ? "Hide" : "Show").on("click", () => {
-        legendMenu.hide();
-        if (legendFilterIndex == -1) legendFilter.push(targetData.key);
-        else legendFilter.splice(legendFilterIndex, 1);
-        self.app.dispatch({
-          type: "plot_edit",
-          id: self.id,
-          config: { legendFilter }
-        });
-      });
-    }
-    legendMenuDiv.append("div").attr("class", "sja_menuoption sja_sharp_border").text("Show only").on("click", () => {
-      legendMenu.hide();
-      const legendFilter2 = [];
-      for (const legendCat of self.legendItems) {
-        if (legendCat.key !== targetData.key) legendFilter2.push(legendCat.key);
-      }
-      self.app.dispatch({
-        type: "plot_edit",
-        id: self.id,
-        config: { legendFilter: legendFilter2 }
-      });
-    });
-    legendMenuDiv.append("div").attr("class", "sja_menuoption sja_sharp_border").text("Show all").on("click", () => {
-      legendMenu.hide();
-      self.app.dispatch({
-        type: "plot_edit",
-        id: self.id,
-        config: { legendFilter: [] }
-      });
-    });
-    if (self.state.config.overlayTW.term.type != "geneVariant") {
-      let color = self.state.config.overlayTW?.term?.values?.[targetData.key]?.color || "red";
-      color = rgb(color).formatHex();
-      legendMenuDiv.append("div").attr("class", "sja_sharp_border").style("padding", "0px 10px").text("Color:").append("input").attr("type", "color").attr("value", color).on("change", (e) => {
-        self.changeColor(targetData.key, e.target.value);
-      });
-    }
-    legendMenu.showunder(event.target);
-  };
-  self.changeColor = async function(key, color) {
-    const tw = self.config.overlayTW;
-    if (!(tw.term.type == "geneVariant" && tw.q.type == "values") && tw.term.values[key])
-      tw.term.values[key].color = color;
-    else {
-      if (!tw.term.values) tw.term.values = {};
-      if (!tw.term.values[key]) tw.term.values[key] = {};
-      tw.term.values[key].color = color;
-    }
-    await self.app.dispatch({
-      type: "plot_edit",
-      id: self.id,
-      config: { overlayTW: tw }
-    });
-  };
-}
-export {
-  brainImaging,
-  componentInit,
-  getPlotConfig,
-  makeChartBtnMenu
-};
-//# sourceMappingURL=brainImaging-ESQGNGZH.js.map

package/dist/chat-AY7RCQYY.js

@@ -1,145 +0,0 @@
-import {
-  getId
-} from "./chunk-KGYPMYQD.js";
-import "./chunk-PBJFLQGL.js";
-import "./chunk-N5VBIEH5.js";
-import "./chunk-FOXJTDTH.js";
-import "./chunk-SN5QKRXO.js";
-import {
-  PlotBase
-} from "./chunk-I2GCD26Y.js";
-import "./chunk-PRZWSBMA.js";
-import {
-  keyupEnter
-} from "./chunk-UT6W4ZZL.js";
-import "./chunk-HJ6L54YS.js";
-import {
-  dofetch3
-} from "./chunk-5TDKRZN5.js";
-import "./chunk-RYRCMHYR.js";
-import "./chunk-ECKWM4HB.js";
-import {
-  Menu
-} from "./chunk-NXOWHUR4.js";
-import "./chunk-5MWX5HUZ.js";
-import "./chunk-IQIXGTQV.js";
-import "./chunk-ICNJQHQZ.js";
-import {
-  copyMerge,
-  getCompInit
-} from "./chunk-FYTZCTJC.js";
-import "./chunk-7NTZWOJV.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 "./chunk-OMR2DT66.js";
-import "./chunk-NDWTN4U5.js";
-import "./chunk-HFNDKYVF.js";
-
-// plots/chat/chat.ts
-var Chat = class extends PlotBase {
-  constructor(opts, api) {
-    super(opts, api);
-    this.type = "chat";
-    this.opts = opts;
-    this.components = {
-      controls: {}
-    };
-    this.initUi(opts);
-  }
-  static {
-    this.type = "chat";
-  }
-  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 {};
-  }
-  //async init(appState: MassState) {}
-  async main() {
-  }
-  initUi(opts) {
-    const holder = opts.holder.classed("sjpp-chat-main", true);
-    const div = holder.append("div").style("padding", "5px").style("display", "inline-block");
-    this.dom = {
-      tip: new Menu({ padding: "" }),
-      div,
-      // error div on top
-      error: div.append("div").attr("id", "sjpp-corrVolcano-error").style("opacity", 0.75),
-      // div with bubbles to show chat history
-      bubbleDiv: div.append("div").attr("class", "sjpp_show_scrollbar").style("margin", "5px 20px 0px 20px").style("height", "200px").style("overflow", "auto").style("scroll-behavior", "smooth")
-    };
-    if (opts.header) {
-      this.dom.header = opts.header.text("CHAT").style("opacity", 0.7);
-    }
-    div.append("input").style("margin", "15px").style("padding", "17px").style("border-radius", "34px").attr("size", 70).attr("placeholder", "What are you looking for?").on("keyup", async (event) => {
-      if (!keyupEnter(event)) return;
-      const prompt = event.target.value.trim();
-      if (!prompt) return;
-      if (prompt.length < 5) return;
-      this.addBubble({ msg: prompt, me: 1 });
-      const body = {
-        genome: this.app.vocabApi.vocab.genome,
-        dslabel: this.app.vocabApi.vocab.dslabel,
-        prompt
-      };
-      event.target.value = "";
-      const serverBubble = this.addBubble({ msg: "..." });
-      try {
-        const data = await dofetch3("termdb/chat", { body });
-        if (data.error) throw data.error;
-        serverBubble.html("Got result..");
-        console.log(data);
-        const result = JSON.parse(data);
-        const plotConfig = result.plot;
-        const answer = result.answer;
-        if (plotConfig) {
-          this.app.dispatch({
-            type: "plot_create",
-            id: getId(),
-            config: plotConfig
-          });
-          serverBubble.html("Please refer to the plot generated above");
-        } else {
-          serverBubble.html(answer);
-        }
-      } catch (e) {
-        if (e.stack) console.log(e.stack);
-        serverBubble.html(`Error: ${e.message || e}`);
-      }
-    }).node().focus();
-  }
-  addBubble(arg) {
-    const bubble = this.dom.bubbleDiv.append("div").style("padding", "10px").html(`${arg.me ? '<span style="font-size:.7em">[ME]</span> ' : ""}${arg.msg}`);
-    if (arg.me) bubble.style("background", "#f1f1f1");
-    const n = this.dom.bubbleDiv.node();
-    n.scrollTop = n.scrollHeight;
-    return bubble;
-  }
-};
-var chatInit = getCompInit(Chat);
-var componentInit = chatInit;
-async function getPlotConfig(opts) {
-  const config = {
-    chartType: "chat"
-  };
-  return copyMerge(config, opts);
-}
-function makeChartBtnMenu(_holder, chartsInstance) {
-  const chart = { config: { chartType: "chat" } };
-  chartsInstance.prepPlot(chart);
-}
-export {
-  chatInit,
-  componentInit,
-  getPlotConfig,
-  makeChartBtnMenu
-};
-//# sourceMappingURL=chat-AY7RCQYY.js.map

package/dist/chat-AY7RCQYY.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../plots/chat/chat.ts"],
-  "sourcesContent": ["import { getCompInit, copyMerge, type RxComponent } from '#rx'\nimport { PlotBase } from '../PlotBase'\nimport type { BasePlotConfig, MassState } from '#mass/types/mass'\nimport { Menu } from '#dom'\nimport { keyupEnter } from '#src/client'\nimport { dofetch3 } from '#common/dofetch'\nimport { getId } from '#mass/nav'\n\n/**\n\n */\n\nclass Chat extends PlotBase implements RxComponent {\n\tstatic type = 'chat'\n\treadonly type = 'chat'\n\tcomponents: { controls: any }\n\n\tconstructor(opts: any, api) {\n\t\tsuper(opts, api)\n\t\tthis.opts = opts\n\t\tthis.components = {\n\t\t\tcontrols: {}\n\t\t}\n\t\tthis.initUi(opts)\n\t}\n\n\tgetState(appState: MassState) {\n\t\tconst config = appState.plots.find((p: BasePlotConfig) => p.id === this.id)\n\t\tif (!config) {\n\t\t\tthrow `No plot with id='${this.id}' found. Did you set this.id before this.api = getComponentApi(this)?`\n\t\t}\n\t\treturn {}\n\t}\n\n\t//async init(appState: MassState) {}\n\n\tasync main() {}\n\n\tinitUi(opts) {\n\t\tconst holder = opts.holder.classed('sjpp-chat-main', true)\n\t\tconst div = holder.append('div').style('padding', '5px').style('display', 'inline-block')\n\t\tthis.dom = {\n\t\t\ttip: new Menu({ padding: '' }),\n\t\t\tdiv,\n\t\t\t// error div on top\n\t\t\terror: div.append('div').attr('id', 'sjpp-corrVolcano-error').style('opacity', 0.75),\n\t\t\t// div with bubbles to show chat history\n\t\t\tbubbleDiv: div\n\t\t\t\t.append('div')\n\t\t\t\t.attr('class', 'sjpp_show_scrollbar')\n\t\t\t\t.style('margin', '5px 20px 0px 20px')\n\t\t\t\t.style('height', '200px')\n\t\t\t\t.style('overflow', 'auto')\n\t\t\t\t.style('scroll-behavior', 'smooth')\n\t\t}\n\t\tif (opts.header) {\n\t\t\tthis.dom.header = opts.header.text('CHAT').style('opacity', 0.7)\n\t\t}\n\t\t// show input box at bottom\n\t\tdiv\n\t\t\t.append('input')\n\t\t\t.style('margin', '15px')\n\t\t\t.style('padding', '17px')\n\t\t\t.style('border-radius', '34px')\n\t\t\t.attr('size', 70)\n\t\t\t.attr('placeholder', 'What are you looking for?')\n\t\t\t.on('keyup', async event => {\n\t\t\t\tif (!keyupEnter(event)) return\n\t\t\t\tconst prompt = event.target.value.trim()\n\t\t\t\tif (!prompt) return // blank\n\t\t\t\tif (prompt.length < 5) return // do not compute on short string\n\t\t\t\tthis.addBubble({ msg: prompt, me: 1 })\n\t\t\t\tconst body = {\n\t\t\t\t\tgenome: this.app.vocabApi.vocab.genome,\n\t\t\t\t\tdslabel: this.app.vocabApi.vocab.dslabel,\n\t\t\t\t\tprompt\n\t\t\t\t}\n\t\t\t\tevent.target.value = '' // clear input\n\t\t\t\tconst serverBubble = this.addBubble({ msg: '...' })\n\n\t\t\t\ttry {\n\t\t\t\t\tconst data = await dofetch3('termdb/chat', { body })\n\t\t\t\t\tif (data.error) throw data.error\n\t\t\t\t\tserverBubble.html('Got result..')\n\t\t\t\t\tconsole.log(data)\n\n\t\t\t\t\tconst result = JSON.parse(data)\n\t\t\t\t\tconst plotConfig = result.plot\n\t\t\t\t\tconst answer = result.answer\n\n\t\t\t\t\tif (plotConfig) {\n\t\t\t\t\t\t// generate a plot as answer\n\t\t\t\t\t\tthis.app.dispatch({\n\t\t\t\t\t\t\ttype: 'plot_create',\n\t\t\t\t\t\t\tid: getId(),\n\t\t\t\t\t\t\tconfig: plotConfig\n\t\t\t\t\t\t})\n\t\t\t\t\t\tserverBubble.html('Please refer to the plot generated above')\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// text answer\n\t\t\t\t\t\tserverBubble.html(answer)\n\t\t\t\t\t}\n\t\t\t\t\t/* may switch by data.type\n                    type=chat: server returns a chat msg\n                    type=plot: server returns a plot obj\n                    */\n\t\t\t\t} catch (e: any) {\n\t\t\t\t\tif (e.stack) console.log(e.stack)\n\t\t\t\t\tserverBubble.html(`Error: ${e.message || e}`)\n\t\t\t\t}\n\t\t\t})\n\t\t\t.node()\n\t\t\t.focus()\n\t}\n\taddBubble(arg: { msg: string; me?: number }) {\n\t\t/* \n        {\n                msg: add a chat bubble for this msg; msg is html as it might contain hyperlinks\n                me: if 1, is me; otherwise is ai\n        }\n\n        return the created bubble and allow to be modified\n        */\n\t\tconst bubble = this.dom.bubbleDiv\n\t\t\t.append('div')\n\t\t\t.style('padding', '10px')\n\t\t\t.html(`${arg.me ? '<span style=\"font-size:.7em\">[ME]</span> ' : ''}${arg.msg}`)\n\t\tif (arg.me) bubble.style('background', '#f1f1f1')\n\t\t// set this to scroll to bottom\n\t\tconst n = this.dom.bubbleDiv.node()\n\t\tn.scrollTop = n.scrollHeight\n\t\treturn bubble\n\t}\n}\n\nexport const chatInit = getCompInit(Chat)\nexport const componentInit = chatInit\n\nexport async function getPlotConfig(opts: any) {\n\tconst config = {\n\t\tchartType: 'chat'\n\t}\n\treturn copyMerge(config, opts)\n}\n\nexport function makeChartBtnMenu(_holder, chartsInstance) {\n\tconst chart = { config: { chartType: 'chat' } }\n\tchartsInstance.prepPlot(chart)\n}\n"],
-  "mappings": "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",
-  "names": []
-}