taxonium-component/dist/SearchResultsDialog-ChZ07m9Q.js

React component for exploring large phylogenetic trees in the browser

import { jsx as n, jsxs as g, Fragment as z } from "react/jsx-runtime";
import { A as h, z as w, G as C, H as N, I as R, J as L, K as x, u as $, P as G, B as P, bM as F, bL as J, a as K, D as W, T as j, d as X } from "./JBrowsePanel-uJIA-L6s.js";
import { c as O, d as M } from "./index-dFotuATn.js";
import * as T from "react";
import e from "prop-types";
import { T as q, a as S, b as f } from "./TableCell-DGdBCaoe.js";
import { D as Y } from "./Divider-DdgIO2wW.js";
function Z(o) {
  return h("MuiTable", o);
}
w("MuiTable", ["root", "stickyHeader"]);
const Q = (o) => {
  const {
    classes: t,
    stickyHeader: a
  } = o;
  return R({
    root: ["root", a && "stickyHeader"]
  }, Z, t);
}, ee = N("table", {
  name: "MuiTable",
  slot: "Root",
  overridesResolver: (o, t) => {
    const {
      ownerState: a
    } = o;
    return [t.root, a.stickyHeader && t.stickyHeader];
  }
})(L(({
  theme: o
}) => ({
  display: "table",
  width: "100%",
  borderCollapse: "collapse",
  borderSpacing: 0,
  "& caption": {
    ...o.typography.body2,
    padding: o.spacing(2),
    color: (o.vars || o).palette.text.secondary,
    textAlign: "left",
    captionSide: "bottom"
  },
  variants: [{
    props: ({
      ownerState: t
    }) => t.stickyHeader,
    style: {
      borderCollapse: "separate"
    }
  }]
}))), E = "table", _ = /* @__PURE__ */ T.forwardRef(function(t, a) {
  const s = C({
    props: t,
    name: "MuiTable"
  }), {
    className: l,
    component: r = E,
    padding: u = "normal",
    size: c = "medium",
    stickyHeader: i = !1,
    ...b
  } = s, y = {
    ...s,
    component: r,
    padding: u,
    size: c,
    stickyHeader: i
  }, d = Q(y), p = T.useMemo(() => ({
    padding: u,
    size: c,
    stickyHeader: i
  }), [u, c, i]);
  return /* @__PURE__ */ n(q.Provider, {
    value: p,
    children: /* @__PURE__ */ n(ee, {
      as: r,
      role: r === E ? null : "table",
      ref: a,
      className: O(d.root, l),
      ownerState: y,
      ...b
    })
  });
});
M.process.env.NODE_ENV !== "production" && (_.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * The content of the table, normally `TableHead` and `TableBody`.
   */
  children: e.node,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: e.object,
  /**
   * @ignore
   */
  className: e.string,
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: e.elementType,
  /**
   * Allows TableCells to inherit padding of the Table.
   * @default 'normal'
   */
  padding: e.oneOf(["checkbox", "none", "normal"]),
  /**
   * Allows TableCells to inherit size of the Table.
   * @default 'medium'
   */
  size: e.oneOfType([e.oneOf(["medium", "small"]), e.string]),
  /**
   * Set the header sticky.
   * @default false
   */
  stickyHeader: e.bool,
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
});
function oe(o) {
  return h("MuiTableBody", o);
}
w("MuiTableBody", ["root"]);
const te = (o) => {
  const {
    classes: t
  } = o;
  return R({
    root: ["root"]
  }, oe, t);
}, ae = N("tbody", {
  name: "MuiTableBody",
  slot: "Root"
})({
  display: "table-row-group"
}), ne = {
  variant: "body"
}, H = "tbody", A = /* @__PURE__ */ T.forwardRef(function(t, a) {
  const s = C({
    props: t,
    name: "MuiTableBody"
  }), {
    className: l,
    component: r = H,
    ...u
  } = s, c = {
    ...s,
    component: r
  }, i = te(c);
  return /* @__PURE__ */ n(S.Provider, {
    value: ne,
    children: /* @__PURE__ */ n(ae, {
      className: O(i.root, l),
      as: r,
      ref: a,
      role: r === H ? null : "rowgroup",
      ownerState: c,
      ...u
    })
  });
});
M.process.env.NODE_ENV !== "production" && (A.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * The content of the component, normally `TableRow`.
   */
  children: e.node,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: e.object,
  /**
   * @ignore
   */
  className: e.string,
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: e.elementType,
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
});
function se(o) {
  return h("MuiTableContainer", o);
}
w("MuiTableContainer", ["root"]);
const re = (o) => {
  const {
    classes: t
  } = o;
  return R({
    root: ["root"]
  }, se, t);
}, le = N("div", {
  name: "MuiTableContainer",
  slot: "Root"
})({
  width: "100%",
  overflowX: "auto"
}), I = /* @__PURE__ */ T.forwardRef(function(t, a) {
  const s = C({
    props: t,
    name: "MuiTableContainer"
  }), {
    className: l,
    component: r = "div",
    ...u
  } = s, c = {
    ...s,
    component: r
  }, i = re(c);
  return /* @__PURE__ */ n(le, {
    ref: a,
    as: r,
    className: O(i.root, l),
    ownerState: c,
    ...u
  });
});
M.process.env.NODE_ENV !== "production" && (I.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * The content of the component, normally `Table`.
   */
  children: e.node,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: e.object,
  /**
   * @ignore
   */
  className: e.string,
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: e.elementType,
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
});
function ce(o) {
  return h("MuiTableHead", o);
}
w("MuiTableHead", ["root"]);
const ie = (o) => {
  const {
    classes: t
  } = o;
  return R({
    root: ["root"]
  }, ce, t);
}, de = N("thead", {
  name: "MuiTableHead",
  slot: "Root"
})({
  display: "table-header-group"
}), pe = {
  variant: "head"
}, D = "thead", V = /* @__PURE__ */ T.forwardRef(function(t, a) {
  const s = C({
    props: t,
    name: "MuiTableHead"
  }), {
    className: l,
    component: r = D,
    ...u
  } = s, c = {
    ...s,
    component: r
  }, i = ie(c);
  return /* @__PURE__ */ n(S.Provider, {
    value: pe,
    children: /* @__PURE__ */ n(de, {
      as: r,
      className: O(i.root, l),
      ref: a,
      role: r === D ? null : "rowgroup",
      ownerState: c,
      ...u
    })
  });
});
M.process.env.NODE_ENV !== "production" && (V.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * The content of the component, normally `TableRow`.
   */
  children: e.node,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: e.object,
  /**
   * @ignore
   */
  className: e.string,
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: e.elementType,
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
});
function ue(o) {
  return h("MuiTableRow", o);
}
const U = w("MuiTableRow", ["root", "selected", "hover", "head", "footer"]), be = (o) => {
  const {
    classes: t,
    selected: a,
    hover: s,
    head: l,
    footer: r
  } = o;
  return R({
    root: ["root", a && "selected", s && "hover", l && "head", r && "footer"]
  }, ue, t);
}, fe = N("tr", {
  name: "MuiTableRow",
  slot: "Root",
  overridesResolver: (o, t) => {
    const {
      ownerState: a
    } = o;
    return [t.root, a.head && t.head, a.footer && t.footer];
  }
})(L(({
  theme: o
}) => ({
  color: "inherit",
  display: "table-row",
  verticalAlign: "middle",
  // We disable the focus ring for mouse, touch and keyboard users.
  outline: 0,
  [`&.${U.hover}:hover`]: {
    backgroundColor: (o.vars || o).palette.action.hover
  },
  [`&.${U.selected}`]: {
    backgroundColor: o.vars ? `rgba(${o.vars.palette.primary.mainChannel} / ${o.vars.palette.action.selectedOpacity})` : x(o.palette.primary.main, o.palette.action.selectedOpacity),
    "&:hover": {
      backgroundColor: o.vars ? `rgba(${o.vars.palette.primary.mainChannel} / calc(${o.vars.palette.action.selectedOpacity} + ${o.vars.palette.action.hoverOpacity}))` : x(o.palette.primary.main, o.palette.action.selectedOpacity + o.palette.action.hoverOpacity)
    }
  }
}))), B = "tr", k = /* @__PURE__ */ T.forwardRef(function(t, a) {
  const s = C({
    props: t,
    name: "MuiTableRow"
  }), {
    className: l,
    component: r = B,
    hover: u = !1,
    selected: c = !1,
    ...i
  } = s, b = T.useContext(S), y = {
    ...s,
    component: r,
    hover: u,
    selected: c,
    head: b && b.variant === "head",
    footer: b && b.variant === "footer"
  }, d = be(y);
  return /* @__PURE__ */ n(fe, {
    as: r,
    ref: a,
    className: O(d.root, l),
    role: r === B ? null : "row",
    ownerState: y,
    ...i
  });
});
M.process.env.NODE_ENV !== "production" && (k.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * Should be valid `<tr>` children such as `TableCell`.
   */
  children: e.node,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: e.object,
  /**
   * @ignore
   */
  className: e.string,
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: e.elementType,
  /**
   * If `true`, the table row will shade on hover.
   * @default false
   */
  hover: e.bool,
  /**
   * If `true`, the table row will have the selected shading.
   * @default false
   */
  selected: e.bool,
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
});
function ye({ searchResults: o, assemblyName: t, model: a, handleClose: s }) {
  const l = $.getSession(a), { pluginManager: r } = $.getEnv(l), { assemblyManager: u } = l, c = t || a.displayedRegions[0].assemblyName, i = u.get(c);
  if (!i)
    throw new Error(`assembly ${c} not found`);
  if (!i.regions)
    throw new Error(`assembly ${c} regions not loaded`);
  function b(d) {
    var p;
    if (d) {
      const m = r.pluggableConfigSchemaType("track"), v = F(m, J(a), d);
      return ((p = v == null ? void 0 : v.name) === null || p === void 0 ? void 0 : p.value) || "";
    }
    return "";
  }
  async function y(d) {
    var p;
    try {
      const m = (p = i == null ? void 0 : i.regions) === null || p === void 0 ? void 0 : p.find((v) => d === v.refName);
      m ? (a.setDisplayedRegions([m]), a.showAllRegions()) : await a.navToLocString(d, c);
    } catch (m) {
      console.warn(m), l.notify(`${m}`, "warning");
    }
  }
  return n(I, { component: G, children: g(_, { children: [n(V, { children: g(k, { children: [n(f, { children: "Name" }), n(f, { align: "right", children: "Location" }), n(f, { align: "right", children: "Track" }), n(f, { align: "right" })] }) }), n(A, { children: o.map((d) => g(k, { children: [n(f, { component: "th", scope: "row", children: d.getLabel() }), n(f, { align: "right", children: d.getLocation() }), n(f, { align: "right", children: b(d.getTrackId()) || "N/A" }), n(f, { align: "right", children: n(P, { onClick: async () => {
    try {
      await y(d.getLocation() || d.getLabel());
      const p = d.getTrackId();
      p && a.showTrack(p);
    } catch (p) {
      console.error(p), l.notifyError(`${p}`, p);
    }
    s();
  }, color: "primary", variant: "contained", children: "Go" }) })] }, d.getId())) })] }) });
}
function Ce({ model: o, assemblyName: t, searchQuery: a, searchResults: s, handleClose: l }) {
  return g(K.Dialog, { open: !0, maxWidth: "xl", onClose: l, title: "Search results", children: [n(W, { children: s != null && s.length ? g(z, { children: [g(j, { children: ["Showing results for ", n("b", { children: a })] }), n(ye, { model: o, handleClose: l, assemblyName: t, searchResults: s })] }) : g(j, { children: ["No results found for ", n("b", { children: a })] }) }), n(Y, {}), n(X, { children: n(P, { onClick: () => {
    l();
  }, color: "primary", children: "Cancel" }) })] });
}
export {
  Ce as default
};
//# sourceMappingURL=SearchResultsDialog-ChZ07m9Q.js.map