synapse-react-client/dist/components/Plot/SynapsePlot.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { jsx as s, Fragment as g } from "react/jsx-runtime";
import "../../synapse-client/SynapseClient.js";
import "@sage-bionetworks/synapse-client/generated/models/ErrorResponseCode";
import "@sage-bionetworks/synapse-client/generated/models/TwoFactorAuthErrorResponse";
import "@sage-bionetworks/synapse-client/util/SynapseClientError";
import { parseEntityIdFromSqlStatement as L } from "../../utils/functions/SqlFunctions.js";
import "../../utils/functions/EntityTypeUtils.js";
import { BUNDLE_MASK_QUERY_RESULTS as M } from "../../utils/SynapseConstants.js";
import "lodash-es";
import "@sage-bionetworks/synapse-client/util/synapseClientFetch";
import "@tanstack/react-query";
import "../../utils/PermissionLevelToAccessType.js";
import "react";
import "../../utils/context/SynapseContext.js";
import "use-deep-compare-effect";
import "@sage-bionetworks/synapse-types";
import { Skeleton as Q } from "@mui/material";
import "../../utils/hooks/useCookiePreferences.js";
import "../../utils/hooks/useSourceAppConfigs.js";
import "universal-cookie";
import "../../utils/AppUtils/session/ApplicationSessionContext.js";
import "../../utils/context/FullContextProvider.js";
import "../../utils/context/DocumentMetadataContext.js";
import './SynapsePlot.css';import '../../style/components/_spinner.css';/* empty css                                   */
import "@tanstack/query-core";
import "lodash-es/isEmpty";
import "lodash-es/isEqual";
import "lodash-es/xorWith";
import "react-router";
import "@sage-bionetworks/synapse-client";
import "../../utils/types/IsType.js";
import { useGetFullTableQueryResults as T } from "../../synapse-queries/entity/useGetQueryResultBundle.js";
import { Plot as U } from "./Plot.js";
/* empty css                 */
const qt = (a) => {
  const { query: u } = a.synapsePlotWidgetParams, { selectedFacets: q, additionalFilters: P, onCustomPlotClick: c, queryContext: w } = a.customPlotParams ?? {}, R = {
    concreteType: "org.sagebionetworks.repo.model.table.QueryBundleRequest",
    partMask: M,
    entityId: L(u),
    query: {
      sql: u,
      selectedFacets: q,
      additionalFilters: P
    }
  }, { data: m, isLoading: S } = T(R);
  if (S)
    return /* @__PURE__ */ s(Q, { width: "100%", height: "200px" });
  if (!m)
    return /* @__PURE__ */ s(g, {});
  const {
    title: k,
    xtitle: y,
    ytitle: d,
    type: v,
    xaxistype: f,
    showlegend: b,
    barmode: C,
    horizontal: l,
    displayModeBar: F,
    hoverinfo: h
  } = a.synapsePlotWidgetParams, E = {
    displayModeBar: F
  }, e = {
    showlegend: b,
    title: k,
    barmode: C
  };
  y && (e.xaxis = {
    title: y
  }), f && (e.xaxis = {
    ...e.xaxis,
    type: f
  }), d && (e.yaxis = {
    title: d
  });
  const r = [], N = l ? "h" : "v", n = m.queryResult?.queryResults.headers ?? [], x = m.queryResult?.queryResults.rows ?? [];
  if (n.length == 0 || x.length == 0)
    return /* @__PURE__ */ s(g, {});
  for (let t = 0; t < n.length - 1; t += 1)
    r[t] = {
      orientation: N,
      name: n[t + 1].name,
      type: v,
      x: [],
      y: [],
      customdata: [],
      ...h !== void 0 && { hoverinfo: h }
    };
  for (const t of x)
    for (let o = 1; o < t.values.length; o += 1) {
      const i = t.values, A = r[o - 1].x, B = r[o - 1].y, D = r[o - 1].customdata;
      A.push(l ? i[o] : i[0]), B.push(l ? i[0] : i[o]), D.push(JSON.stringify(t));
    }
  let p;
  return c && (p = (t) => {
    const o = JSON.parse(
      t.points[0].customdata
    );
    c({
      row: o,
      queryContext: w
    });
  }), /* @__PURE__ */ s(
    U,
    {
      style: { width: "100%", height: "450px" },
      className: p ? "SynapsePlot--clickable" : void 0,
      layout: e,
      data: r,
      config: E,
      onClick: p
    }
  );
};
export {
  qt as SynapsePlot,
  qt as default
};
//# sourceMappingURL=SynapsePlot.js.map