taxonium-component/dist/FacetedDialog-cGGly596.js

React component for exploring large phylogenetic trees in the browser

import { jsxs as v, jsx as e, Fragment as F } from "react/jsx-runtime";
import { o as y, m as N, aR as D, T as K, bH as L, u as k, a6 as E, a7 as M, bI as R, by as G, bJ as I, bK as O, bL as $, bM as A, c as V, bN as _, bO as j, a as H, D as B } from "./JBrowsePanel-uJIA-L6s.js";
import { S as T } from "./SanitizedHTML-BVL8NCSg.js";
import { useState as W } from "react";
import { C as z } from "./Clear-Iez73PVU.js";
import { D as P } from "./DataGrid-DA9cZ2dC.js";
import { S as U, T as J } from "./HierarchicalTrackSelector-BfBdQ6-I.js";
import { G as q } from "./Grid-IFK_B2cC.js";
const Q = N()((i) => ({
  facet: {
    margin: 0,
    marginLeft: i.spacing(2)
  },
  select: {
    marginBottom: i.spacing(2)
  }
}));
function X({ onClick: i }) {
  return e(E, { title: "Clear selection on this facet filter", children: e(M, { onClick: () => {
    i();
  }, size: "small", children: e(z, {}) }) });
}
function Y({ visible: i, onClick: o }) {
  return e(E, { title: "Minimize/expand this facet filter", children: e(M, { onClick: () => {
    o();
  }, size: "small", children: i ? e(R, {}) : e(G, {}) }) });
}
const Z = y(function({ column: i, vals: o, model: c }) {
  const { classes: h } = Q(), [f, m] = W(!0), { faceted: u } = c, { filters: d } = u, { field: s } = i;
  return v(D, { className: h.facet, fullWidth: !0, children: [v("div", { children: [e(K, { component: "span", children: s }), e(X, { onClick: () => {
    u.setFilter(s, []);
  } }), e(Y, { visible: f, onClick: () => {
    m(!f);
  } })] }), f ? e(L, { multiple: !0, native: !0, className: h.select, value: d.get(i.field) || [], onChange: (r) => {
    u.setFilter(i.field, [...r.target.options].filter((p) => p.selected).map((p) => p.value));
  }, children: o.sort((r, p) => r[0].localeCompare(p[0])).map(([r, p]) => v("option", { value: r, children: [k.coarseStripHTML(r), " (", p, ")"] }, r)) }) : null] });
}), ee = y(function({ rows: i, columns: o, model: c }) {
  var h, f;
  const { faceted: m } = c, { filters: u } = m, d = o.slice(1), s = new Map(o.slice(1).map((n) => [n.field, /* @__PURE__ */ new Map()])), r = m.filters.keys(), p = d.map((n) => n.field), b = /* @__PURE__ */ new Set();
  for (const n of r)
    !((h = u.get(n)) === null || h === void 0) && h.length && b.add(n);
  for (const n of p)
    b.add(n);
  let a = i;
  for (const n of b) {
    const l = s.get(n);
    if (l)
      for (const t of a) {
        const g = I(n, t), S = l.get(g);
        g && (S === void 0 ? l.set(g, 1) : l.set(g, S + 1));
      }
    const w = !((f = u.get(n)) === null || f === void 0) && f.length ? new Set(u.get(n)) : void 0;
    a = a.filter((t) => w !== void 0 ? w.has(I(n, t)) : !0);
  }
  return e("div", { children: d.map((n) => e(Z, { vals: [...s.get(n.field)], column: n, model: c }, n.field)) });
}), te = y(function({ model: i, columns: o, shownTrackIds: c, selection: h }) {
  const { pluginManager: f } = k.getEnv(i), { view: m, faceted: u } = i, { rows: d, useShoppingCart: s, showOptions: r, filteredRows: p, filteredNonMetadataKeys: b, filteredMetadataKeys: a, visible: n } = u, [l, w] = W({
    name: k.measureGridWidth(d.map((t) => t.name), {
      maxWidth: 500,
      stripHTML: !0
    }) + 15,
    ...Object.fromEntries(b.filter((t) => n[t]).map((t) => [
      t,
      k.measureGridWidth(d.map((g) => g[t]), {
        maxWidth: 400,
        stripHTML: !0
      })
    ])),
    ...Object.fromEntries(a.filter((t) => n[`metadata.${t}`]).map((t) => [
      `metadata.${t}`,
      k.measureGridWidth(d.map((g) => g.metadata[t]), {
        maxWidth: 400,
        stripHTML: !0
      })
    ]))
  });
  return e(P, { rowHeight: 25, columnHeaderHeight: 35, checkboxSelection: !0, keepNonExistentRowsSelected: !0, rows: p, columnVisibilityModel: n, showToolbar: r, onColumnWidthChange: (t) => {
    w({
      ...l,
      [t.colDef.field]: t.width
    });
  }, onColumnVisibilityModelChange: (t) => {
    i.faceted.setVisible(t);
  }, onRowSelectionModelChange: (t) => {
    if (s) {
      const g = $(i), S = f.pluggableConfigSchemaType("track");
      i.setSelection([...t.ids].map((C) => A(S, g, C)));
    } else {
      const g = c, S = t.ids;
      O(() => {
        [...g].filter((C) => !S.has(C)).map((C) => m.hideTrack(C)), [...S].filter((C) => !g.has(C)).map((C) => {
          m.showTrack(C), i.addToRecentlyUsed(C);
        });
      });
    }
  }, rowSelectionModel: {
    type: "include",
    ids: new Set(s ? h.map((t) => t.trackId) : [...c])
  }, columns: o.map((t) => ({
    ...t,
    width: l[t.field]
  })) });
});
function ne({ model: i }) {
  const { faceted: o } = i, [c, h] = W(null), { showOptions: f, showFilters: m, showSparse: u, useShoppingCart: d } = o;
  return v(F, { children: [v(q, { container: !0, spacing: 4, alignItems: "center", children: [e(V, { label: "Search...", value: o.filterText, onChange: (s) => {
    o.setFilterText(s.target.value);
  }, slotProps: {
    input: {
      endAdornment: e(_, { position: "end", children: e(M, { onClick: () => {
        o.setFilterText("");
      }, children: e(z, {}) }) })
    }
  } }), e(M, { onClick: (s) => {
    h(s.currentTarget);
  }, children: e(j, {}) }), e(U, { model: i })] }), e(H.Menu, { anchorEl: c, open: !!c, onClose: () => {
    h(null);
  }, onMenuItemClick: (s, r) => {
    r(), h(null);
  }, menuItems: [
    {
      label: "Add tracks to selection instead of turning them on/off",
      onClick: () => {
        o.setUseShoppingCart(!d);
      },
      type: "checkbox",
      checked: d
    },
    {
      label: "Show sparse metadata columns",
      onClick: () => {
        o.setShowSparse(!u);
      },
      checked: u,
      type: "checkbox"
    },
    {
      label: "Show facet filters",
      onClick: () => {
        o.setShowFilters(!m);
      },
      checked: m,
      type: "checkbox"
    },
    {
      label: "Show extra table options",
      onClick: () => {
        o.setShowOptions(!f);
      },
      checked: f,
      type: "checkbox"
    }
  ] })] });
}
const ie = N()({
  cell: {
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis"
  },
  resizeHandle: {
    marginLeft: 5,
    background: "grey",
    width: 5
  }
}), x = 0.75, oe = y(function({ model: o }) {
  const { classes: c } = ie(), { selection: h, shownTrackIds: f, faceted: m } = o, { rows: u, panelWidth: d, showFilters: s, filteredNonMetadataKeys: r, filteredMetadataKeys: p } = m, b = [
    {
      field: "name",
      hideable: !1,
      renderCell: (a) => {
        const { value: n, row: l } = a, { id: w, conf: t } = l;
        return v("div", { className: c.cell, children: [e(T, { html: n }), e(J, { id: w, conf: t, trackId: w, model: o })] });
      }
    },
    ...r.map((a) => ({
      field: a,
      renderCell: (n) => {
        const l = n.value;
        return l ? e(T, { className: c.cell, html: l }) : "";
      }
    })),
    ...p.map((a) => ({
      field: `metadata.${a}`,
      headerName: ["name", ...r].includes(a) ? `${a} (from metadata)` : a,
      valueGetter: (n, l) => {
        var w;
        return `${(w = l.metadata[a]) !== null && w !== void 0 ? w : ""}`;
      },
      renderCell: (n) => {
        const l = n.value;
        return l ? e(T, { className: c.cell, html: l }) : "";
      }
    }))
  ];
  return v(F, { children: [e(ne, { model: o }), v("div", { style: {
    display: "flex",
    overflow: "hidden",
    height: window.innerHeight * x,
    width: window.innerWidth * x
  }, children: [e("div", { style: {
    height: window.innerHeight * x,
    width: window.innerWidth * x - (s ? d : 0)
  }, children: e(te, { model: o, columns: b, shownTrackIds: f, selection: h }) }), s ? v(F, { children: [e(H.ResizeHandle, { vertical: !0, onDrag: (a) => m.setPanelWidth(d - a), className: c.resizeHandle }), e("div", { style: { width: d, overflow: "auto" }, children: e(ee, { model: o, rows: u, columns: b }) })] }) : null] })] });
}), ue = y(function(i) {
  const { handleClose: o } = i;
  return e(H.Dialog, { open: !0, onClose: o, maxWidth: "xl", title: "Faceted track selector", children: e(B, { children: e(oe, { ...i }) }) });
});
export {
  ue as default
};
//# sourceMappingURL=FacetedDialog-cGGly596.js.map