taxonium-component/dist/SetColorDialog-BgsJDCy_.js

React component for exploring large phylogenetic trees in the browser

import { jsxs as n, jsx as e, Fragment as E } from "react/jsx-runtime";
import { useState as m } from "react";
import { D as L } from "./DraggableDialog-SkGHL3cH.js";
import { m as w, B as a, ap as N, aq as I, ar as T, as as U, u as h, a as W, D as G, d as K } from "./JBrowsePanel-BNE3gNW1.js";
import { C as j, a as O } from "./ColorPicker-BTI_Q3I7.js";
import { m as v, a as y } from "./util-1O8hqJLz.js";
import { D as P } from "./DataGrid-cokHFdGI.js";
const R = w()({
  cell: {
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis"
  }
});
function _({ rows: t, onChange: i, showTips: s }) {
  const { classes: p } = R(), [g, u] = m(null), [l, f] = m([]), { name: $, color: q, baseUri: z, ...x } = t[0], [D, M] = m("blue"), [C, H] = m({
    idx: 0,
    field: null
  });
  return n("div", { children: [e(a, { disabled: !l.length, onClick: (o) => {
    u(o.currentTarget);
  }, children: "Change color of selected items" }), n(a, { disabled: !l.length, onClick: () => {
    i(v([...t], l));
  }, children: [e(N, {}), s ? "Move selected items up" : null] }), n(a, { disabled: !l.length, onClick: () => {
    i(y([...t], l));
  }, children: [e(I, {}), s ? "Move selected items down" : null] }), n(a, { disabled: !l.length, onClick: () => {
    i(v([...t], l, t.length));
  }, children: [e(T, {}), s ? "Move selected items to top" : null] }), n(a, { disabled: !l.length, onClick: () => {
    i(y([...t], l, t.length));
  }, children: [e(U, {}), 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: () => {
    u(null);
  } }), e("div", { style: { height: 400, width: "100%" }, children: e(P, { disableRowSelectionOnClick: !0, getRowId: (o) => o.name, checkboxSelection: !0, onRowSelectionModelChange: (o) => {
    f([...o.ids]);
  }, rows: t, rowHeight: 25, columnHeaderHeight: 33, columns: [
    {
      field: "color",
      headerName: "Color",
      renderCell: ({ value: o, id: r }) => e(O, { color: o || "blue", onChange: (d) => {
        const c = t.find((b) => b.name === r);
        c && (c.color = d), i([...t]);
      } })
    },
    {
      field: "name",
      headerName: "Name",
      width: h.measureGridWidth(t.map((o) => o.name))
    },
    ...Object.keys(x).map((o) => ({
      field: o,
      renderCell: ({ value: r }) => e("div", { className: p.cell, children: e(W.SanitizedHTML, { html: h.getStr(r) }) }),
      width: h.measureGridWidth(t.map((r) => `${r[o]}`))
    }))
  ], sortModel: [], onSortModelChange: (o) => {
    const r = o[0], d = (C.idx + 1) % 2, c = r.field || C.field;
    H({ idx: d, field: c }), i(c ? [...t].sort((b, A) => {
      const S = h.getStr(b[c]), k = h.getStr(A[c]);
      return d === 1 ? S.localeCompare(k) : k.localeCompare(S);
    }) : t);
  } }) })] });
}
const B = w()({
  content: {
    minWidth: 800
  },
  float: {
    float: "right"
  }
});
function Y() {
  return n(E, { 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" })] })] });
}
function te({ model: t, handleClose: i }) {
  const { classes: s } = B(), { sources: p } = t, [g, u] = m(structuredClone(p || [])), [l, f] = h.useLocalStorage("multiwiggle-showTips", !1);
  return n(L, { open: !0, onClose: i, maxWidth: "xl", title: "Multi-wiggle color/arrangement editor", children: [n(G, { className: s.content, children: [e(a, { variant: "contained", className: s.float, onClick: () => {
    f(!l);
  }, children: l ? "Hide tips" : "Show tips" }), e("br", {}), l ? e(Y, {}) : null, e(_, { rows: g, onChange: u, showTips: l })] }), n(K, { children: [e(a, { variant: "contained", type: "submit", color: "inherit", onClick: () => {
    t.clearLayout(), u(t.sources || []);
  }, children: "Clear custom settings" }), e(a, { variant: "contained", color: "secondary", onClick: () => {
    i(), u([...t.sources || []]);
  }, children: "Cancel" }), e(a, { variant: "contained", color: "primary", type: "submit", onClick: () => {
    t.setLayout(g), i();
  }, children: "Submit" })] })] });
}
export {
  te as default
};
//# sourceMappingURL=SetColorDialog-BgsJDCy_.js.map