taxonium-component/dist/AddConnectionWidget-B_vr-m9F.js

React component for exploring large phylogenetic trees in the browser

import { jsx as t, jsxs as m, Fragment as E } from "react/jsx-runtime";
import { Suspense as x, useEffect as k, useState as f, useMemo as N } from "react";
import { o as C, aV as W, a as v, c as M, m as y, u as p, B as S, aW as B } from "./JBrowsePanel-BNE3gNW1.js";
import { M as L } from "./MenuItem-DAMdxuDJ.js";
import { S as I, a as T, b as j, c as A } from "./Stepper-CYaq8zXr.js";
const F = C(function({ connectionType: o, model: e, session: i }) {
  const s = o.configEditorComponent || W;
  return t(x, { fallback: t(v.LoadingEllipses, {}), children: t(s, { model: { target: e }, session: i }) });
}), $ = C(function({ connectionTypeChoices: e, connectionType: i, setConnectionType: s }) {
  const d = e[0];
  return k(() => {
    i || s(d);
  }, [i, d, s]), t("form", { autoComplete: "off", children: i ? t(M, { value: i.name, label: "connectionType", helperText: i.description ? m(E, { children: [i.description, i.url ? t(v.ExternalLink, { href: i.url }) : null] }) : null, select: !0, fullWidth: !0, onChange: (n) => {
    s(e.find((u) => u.name === n.target.value));
  }, variant: "outlined", children: e.map((n) => t(L, { value: n.name, children: n.displayName || n.name }, n.name)) }) : null });
}), w = y()((o) => ({
  root: {
    marginTop: o.spacing(1)
  },
  stepper: {
    backgroundColor: o.palette.background.default
  },
  button: {
    marginTop: o.spacing(1),
    marginRight: o.spacing(1)
  },
  actionsContainer: {
    marginBottom: o.spacing(2)
  }
})), g = ["Select a Connection Type", "Configure Connection"], G = C(function({ model: o }) {
  const [e, i] = f(), [s, d] = f(), [n, u] = f(0), { classes: r } = w(), a = p.getSession(o), { pluginManager: b } = p.getEnv(a), c = N(() => e == null ? void 0 : e.configSchema.create({ connectionId: s }, p.getEnv(o)), [s, e, o]);
  return t("div", { className: r.root, children: t(I, { className: r.stepper, activeStep: n, orientation: "vertical", children: g.map((h) => m(T, { children: [t(j, { children: h }), m(A, { children: [n === 0 ? t($, { connectionTypeChoices: b.getConnectionElements(), connectionType: e, setConnectionType: (l) => {
    i(l), l && d(`${l.name}-${Date.now()}`);
  } }) : e && c ? t(F, { connectionType: e, model: c, session: a }) : null, m("div", { className: r.actionsContainer, children: [t(S, { disabled: n === 0, onClick: () => {
    u(n - 1);
  }, className: r.button, children: "Back" }), t(S, { disabled: !(n === 0 && e || n === 1 && c), variant: "contained", color: "primary", onClick: () => {
    if (n === g.length - 1) {
      if (c && B(a)) {
        const l = a.addConnectionConf(c);
        a.makeConnection(l);
      } else
        a.notify("No config model to add");
      p.isSessionModelWithWidgets(a) && a.hideWidget(o);
    } else
      u(n + 1);
  }, className: r.button, "data-testid": "addConnectionNext", children: n === g.length - 1 ? "Connect" : "Next" })] })] })] }, h)) }) });
});
export {
  G as default
};
//# sourceMappingURL=AddConnectionWidget-B_vr-m9F.js.map