taxonium-component/dist/SetColorDialog-DV7WMvqb.js

React component for exploring large phylogenetic trees in the browser

import { jsxs as n, jsx as e, Fragment as H } from "react/jsx-runtime";
import { useState as m } from "react";
import { D as L } from "./DraggableDialog-CJbvvTj3.js";
import { m as w, B as a, ay as N, az as I, aA as U, aB as W, u, a as G, D as K, d as T } from "./JBrowsePanel-uJIA-L6s.js";
import { C as j, a as B } from "./ColorPicker-BkeYpg1W.js";
import { m as y, a as v } from "./util-BUvuuJah.js";
import { D as P } from "./DataGrid-DA9cZ2dC.js";
const _ = w()({
  cell: {
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis"
  }
});
function z({ rows: t, onChange: i, showTips: s }) {
  const { classes: p } = _(), [g, h] = m(null), [l, b] = m([]), { name: R, color: Y, baseUri: $, ...x } = t[0], [D, M] = m("blue"), [C, A] = m({
    idx: 0,
    field: null
  });
  return n("div", { children: [e(a, { disabled: !l.length, onClick: (o) => {
    h(o.currentTarget);
  }, children: "Change color of selected items" }), n(a, { onClick: () => {
    i(y([...t], l));
  }, disabled: !l.length, children: [e(N, {}), s ? "Move selected items up" : null] }), n(a, { onClick: () => {
    i(v([...t], l));
  }, disabled: !l.length, children: [e(I, {}), s ? "Move selected items down" : null] }), n(a, { onClick: () => {
    i(y([...t], l, t.length));
  }, disabled: !l.length, children: [e(U, {}), s ? "Move selected items to top" : null] }), n(a, { onClick: () => {
    i(v([...t], l, t.length));
  }, disabled: !l.length, children: [e(W, {}), s ? "Move selected items to bottom" : null] }), e(j.ColorPopover, { anchorEl: g, color: D, onChange: (o) => {
    M(o);
    for (const r of l) {
      const d = t.find((c) => c.name === r);
      d && (d.color = o);
    }
    i([...t]);
  }, onClose: () => {
    h(null);
  } }), e("div", { style: { height: 400, width: "100%" }, children: e(P, { getRowId: (o) => o.name, checkboxSelection: !0, onRowSelectionModelChange: (o) => {
    b([...o.ids]);
  }, rows: t, rowHeight: 25, columnHeaderHeight: 33, columns: [
    {
      field: "color",
      headerName: "Color",
      renderCell: ({ value: o, id: r }) => e(B, { color: o || "blue", onChange: (d) => {
        const c = t.find((f) => f.name === r);
        c && (c.color = d), i([...t]);
      } })
    },
    {
      field: "name",
      headerName: "Name",
      width: u.measureGridWidth(t.map((o) => o.name))
    },
    ...Object.keys(x).map((o) => ({
      field: o,
      renderCell: ({ value: r }) => e("div", { className: p.cell, children: e(G.SanitizedHTML, { html: u.getStr(r) }) }),
      width: u.measureGridWidth(t.map((r) => `${r[o]}`))
    }))
  ], sortModel: [], onSortModelChange: (o) => {
    const r = o[0], d = (C.idx + 1) % 2, c = r.field || C.field;
    A({ idx: d, field: c }), i(c ? [...t].sort((f, E) => {
      const S = u.getStr(f[c]), k = u.getStr(E[c]);
      return d === 1 ? S.localeCompare(k) : k.localeCompare(S);
    }) : t);
  } }) })] });
}
const O = w()({
  content: {
    minWidth: 800
  },
  float: {
    float: "right"
  }
});
function ee({ model: t, handleClose: i }) {
  const { classes: s } = O(), { sources: p } = t, [g, h] = m(structuredClone(p || [])), [l, b] = u.useLocalStorage("multiwiggle-showTips", !1);
  return n(L, { open: !0, onClose: i, maxWidth: "xl", title: "Multi-wiggle color/arrangement editor", children: [n(K, { className: s.content, children: [e(a, { variant: "contained", className: s.float, onClick: () => {
    b(!l);
  }, children: l ? "Hide tips" : "Show tips" }), e("br", {}), l ? n(H, { children: ["Helpful tips", n("ul", { children: [e("li", { children: "You can select rows in the table with the checkboxes" }), e("li", { children: "Multi-select is enabled with shift-click and control-click" }), e("li", { children: 'The "Move selected items up/down" can re-arrange subtracks' }), e("li", { children: "Sorting the data grid itself can also re-arrange subtracks" }), e("li", { children: "Changes are applied when you hit Submit" }), e("li", { children: "You can click and drag the dialog box to move it on the screen" }), e("li", { children: "Columns in the table can be hidden using a vertical '...' menu on the right side of each column" })] })] }) : null, e(z, { rows: g, onChange: h, showTips: l })] }), n(T, { children: [e(a, { variant: "contained", type: "submit", color: "inherit", onClick: () => {
    t.clearLayout(), h(t.sources || []);
  }, children: "Clear custom settings" }), e(a, { variant: "contained", color: "secondary", onClick: () => {
    i(), h([...t.sources || []]);
  }, children: "Cancel" }), e(a, { variant: "contained", color: "primary", type: "submit", onClick: () => {
    t.setLayout(g), i();
  }, children: "Submit" })] })] });
}
export {
  ee as default
};
//# sourceMappingURL=SetColorDialog-DV7WMvqb.js.map