taxonium-component/dist/AddConnectionWidget-DI0Fcuw8.js

React component for exploring large phylogenetic trees in the browser

import { jsx as e, jsxs as m, Fragment as b } from "react/jsx-runtime";
import { Suspense as N, useEffect as k, useState as f, useMemo as E } from "react";
import { o as C, bk as x, a as I, X as M, c as W, a7 as y, m as B, u, B as v, bl as L } from "./JBrowsePanel-uJIA-L6s.js";
import { M as V } from "./MenuItem-D4Mw907e.js";
import { S as w, a as z, b as T, c as j } from "./Stepper-BhvIoojA.js";
const A = C(function({ connectionType: o, model: t, session: i }) {
  const a = o.configEditorComponent || x;
  return e(N, { fallback: e(I.LoadingEllipses, {}), children: e(a, { model: { target: t }, session: i }) });
}), F = M(/* @__PURE__ */ e("path", {
  d: "M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3z"
}), "OpenInNew"), H = C(function({ connectionTypeChoices: t, connectionType: i, setConnectionType: a }) {
  const d = t[0];
  return k(() => {
    i || a(d);
  }, [i, d, a]), e("form", { autoComplete: "off", children: i ? e(W, { value: i.name, label: "connectionType", helperText: i.description ? m(b, { children: [i.description, i.url ? e(y, { href: i.url, rel: "noopener noreferrer", target: "_blank", children: e(F, {}) }) : null] }) : null, select: !0, fullWidth: !0, onChange: (n) => {
    a(t.find((p) => p.name === n.target.value));
  }, variant: "outlined", children: t.map((n) => e(V, { value: n.name, children: n.displayName || n.name }, n.name)) }) : null });
}), O = B()((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"], q = C(function({ model: o }) {
  const [t, i] = f(), [a, d] = f(), [n, p] = f(0), { classes: r } = O(), s = u.getSession(o), { pluginManager: S } = u.getEnv(s), c = E(() => t == null ? void 0 : t.configSchema.create({ connectionId: a }, u.getEnv(o)), [a, t, o]);
  return e("div", { className: r.root, children: e(w, { className: r.stepper, activeStep: n, orientation: "vertical", children: g.map((h) => m(z, { children: [e(T, { children: h }), m(j, { children: [n === 0 ? e(H, { connectionTypeChoices: S.getConnectionElements(), connectionType: t, setConnectionType: (l) => {
    i(l), l && d(`${l.name}-${Date.now()}`);
  } }) : t && c ? e(A, { connectionType: t, model: c, session: s }) : null, m("div", { className: r.actionsContainer, children: [e(v, { disabled: n === 0, onClick: () => {
    p(n - 1);
  }, className: r.button, children: "Back" }), e(v, { disabled: !(n === 0 && t || n === 1 && c), variant: "contained", color: "primary", onClick: () => {
    if (n === g.length - 1) {
      if (c && L(s)) {
        const l = s.addConnectionConf(c);
        s.makeConnection(l);
      } else
        s.notify("No config model to add");
      u.isSessionModelWithWidgets(s) && s.hideWidget(o);
    } else
      p(n + 1);
  }, className: r.button, "data-testid": "addConnectionNext", children: n === g.length - 1 ? "Connect" : "Next" })] })] })] }, h)) }) });
});
export {
  q as default
};
//# sourceMappingURL=AddConnectionWidget-DI0Fcuw8.js.map