@backstage-community/plugin-cicd-statistics 0.1.37 → 0.1.38

package/dist/charts/stage-chart.esm.js

@@ -0,0 +1,168 @@
+import React, { useMemo, Fragment } from 'react';
+import { ResponsiveContainer, ComposedChart, Legend, CartesianGrid, XAxis, YAxis, Tooltip, Area, Line, Bar } from 'recharts';
+import Alert from '@material-ui/lab/Alert';
+import Accordion from '@material-ui/core/Accordion';
+import AccordionSummary from '@material-ui/core/AccordionSummary';
+import AccordionDetails from '@material-ui/core/AccordionDetails';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { capitalize } from 'lodash';
+import { useZoom, useZoomArea } from './zoom.esm.js';
+import { statusTypes } from '../apis/types.esm.js';
+import { pickElements, formatDuration, tickFormatterX, tickFormatterY, tooltipValueFormatter, labelFormatter } from '../components/utils.esm.js';
+import { statusColorMap, fireColors, colorStroke, colorStrokeAvg } from './colors.esm.js';
+
+const fullWidth = { width: "100%" };
+const noUserSelect = { userSelect: "none" };
+const transitionProps = { unmountOnExit: true };
+function StageChart(props) {
+  const { stage, ...chartOptions } = props;
+  const {
+    chartTypes,
+    defaultCollapsed = 0,
+    defaultHidden = 0,
+    zeroYAxis = false
+  } = chartOptions;
+  const { zoomFilterValues } = useZoom();
+  const { zoomProps, getZoomArea } = useZoomArea();
+  const ticks = useMemo(
+    () => pickElements(stage.values, 8).map((val) => val.__epoch),
+    [stage.values]
+  );
+  const domainY = useMemo(
+    () => [zeroYAxis ? 0 : "auto", "auto"],
+    [zeroYAxis]
+  );
+  const statuses = useMemo(
+    () => statusTypes.filter((status) => stage.statusSet.has(status)),
+    [stage.statusSet]
+  );
+  const legendPayload = useMemo(
+    () => statuses.map((status) => ({
+      value: capitalize(status),
+      type: "line",
+      id: status,
+      color: statusColorMap[status]
+    })),
+    [statuses]
+  );
+  const subStages = useMemo(
+    () => new Map(
+      [...stage.stages.entries()].filter(
+        ([_name, subStage]) => subStage.combinedAnalysis.max > defaultHidden
+      )
+    ),
+    [stage.stages, defaultHidden]
+  );
+  const zoomFilteredValues = useMemo(
+    () => zoomFilterValues(stage.values),
+    [stage.values, zoomFilterValues]
+  );
+  return stage.combinedAnalysis.max < defaultHidden ? null : /* @__PURE__ */ React.createElement(
+    Accordion,
+    {
+      defaultExpanded: stage.combinedAnalysis.max > defaultCollapsed,
+      TransitionProps: transitionProps
+    },
+    /* @__PURE__ */ React.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React.createElement(Typography, null, stage.name, " (med ", formatDuration(stage.combinedAnalysis.med), ", avg", " ", formatDuration(stage.combinedAnalysis.avg), ")")),
+    /* @__PURE__ */ React.createElement(AccordionDetails, null, stage.values.length === 0 ? /* @__PURE__ */ React.createElement(Alert, { severity: "info" }, "No data") : /* @__PURE__ */ React.createElement(Grid, { container: true, direction: "column" }, /* @__PURE__ */ React.createElement(Grid, { item: true, style: noUserSelect }, /* @__PURE__ */ React.createElement(ResponsiveContainer, { width: "100%", height: 140 }, /* @__PURE__ */ React.createElement(ComposedChart, { data: zoomFilteredValues, ...zoomProps }, /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: "colorDur", x1: "0", y1: "0", x2: "0", y2: "1" }, fireColors.map(([percent, color]) => /* @__PURE__ */ React.createElement(
+      "stop",
+      {
+        key: percent,
+        offset: percent,
+        stopColor: color,
+        stopOpacity: 0.8
+      }
+    )))), statuses.length > 1 && /* @__PURE__ */ React.createElement(Legend, { payload: legendPayload }), /* @__PURE__ */ React.createElement(CartesianGrid, { strokeDasharray: "3 3" }), /* @__PURE__ */ React.createElement(
+      XAxis,
+      {
+        dataKey: "__epoch",
+        type: "category",
+        ticks,
+        tickFormatter: tickFormatterX
+      }
+    ), /* @__PURE__ */ React.createElement(
+      YAxis,
+      {
+        yAxisId: 1,
+        tickFormatter: tickFormatterY,
+        type: "number",
+        tickCount: 5,
+        name: "Duration",
+        domain: domainY
+      }
+    ), /* @__PURE__ */ React.createElement(
+      YAxis,
+      {
+        yAxisId: 2,
+        orientation: "right",
+        type: "number",
+        tickCount: 5,
+        name: "Count"
+      }
+    ), /* @__PURE__ */ React.createElement(
+      Tooltip,
+      {
+        formatter: tooltipValueFormatter,
+        labelFormatter
+      }
+    ), statuses.reverse().map((status) => /* @__PURE__ */ React.createElement(Fragment, { key: status }, !chartTypes[status].includes("duration") ? null : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      Area,
+      {
+        isAnimationActive: false,
+        yAxisId: 1,
+        type: "monotone",
+        dataKey: status,
+        stackId: status,
+        stroke: statuses.length > 1 ? statusColorMap[status] : colorStroke,
+        fillOpacity: statuses.length > 1 ? 0.5 : 1,
+        fill: statuses.length > 1 ? statusColorMap[status] : "url(#colorDur)",
+        connectNulls: true
+      }
+    ), /* @__PURE__ */ React.createElement(
+      Line,
+      {
+        isAnimationActive: false,
+        yAxisId: 1,
+        type: "monotone",
+        dataKey: `${status} avg`,
+        stroke: statuses.length > 1 ? statusColorMap[status] : colorStrokeAvg,
+        opacity: 0.8,
+        strokeWidth: 2,
+        dot: false,
+        connectNulls: true
+      }
+    )), !chartTypes[status].includes("count") ? null : /* @__PURE__ */ React.createElement(
+      Bar,
+      {
+        isAnimationActive: false,
+        yAxisId: 2,
+        type: "monotone",
+        dataKey: `${status} count`,
+        stackId: "1",
+        stroke: statusColorMap[status] ?? "",
+        fillOpacity: 0.5,
+        fill: statusColorMap[status] ?? ""
+      }
+    ))), getZoomArea({ yAxisId: 1 })))), subStages.size === 0 ? null : /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
+      Accordion,
+      {
+        defaultExpanded: false,
+        TransitionProps: transitionProps
+      },
+      /* @__PURE__ */ React.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React.createElement(Typography, null, "Sub stages (", subStages.size, ")")),
+      /* @__PURE__ */ React.createElement(AccordionDetails, null, /* @__PURE__ */ React.createElement("div", { style: fullWidth }, [...subStages.values()].map((subStage) => /* @__PURE__ */ React.createElement(
+        StageChart,
+        {
+          key: subStage.name,
+          ...chartOptions,
+          stage: subStage
+        }
+      ))))
+    ))))
+  );
+}
+
+export { StageChart };
+//# sourceMappingURL=stage-chart.esm.js.map

package/dist/charts/stage-chart.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stage-chart.esm.js","sources":["../../src/charts/stage-chart.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { CSSProperties, Fragment, useMemo } from 'react';\nimport {\n  Area,\n  Bar,\n  ComposedChart,\n  XAxis,\n  YAxis,\n  YAxisProps,\n  CartesianGrid,\n  Legend,\n  LegendProps,\n  Line,\n  Tooltip,\n  ResponsiveContainer,\n} from 'recharts';\nimport Alert from '@material-ui/lab/Alert';\nimport Accordion from '@material-ui/core/Accordion';\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\nimport AccordionDetails from '@material-ui/core/AccordionDetails';\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport { capitalize } from 'lodash';\n\nimport { useZoom, useZoomArea } from './zoom';\nimport { CicdDefaults, statusTypes } from '../apis/types';\nimport { ChartableStage } from './types';\nimport {\n  pickElements,\n  labelFormatter,\n  tickFormatterX,\n  tickFormatterY,\n  tooltipValueFormatter,\n  formatDuration,\n} from '../components/utils';\nimport {\n  statusColorMap,\n  fireColors,\n  colorStroke,\n  colorStrokeAvg,\n} from './colors';\n\nconst fullWidth: CSSProperties = { width: '100%' };\nconst noUserSelect: CSSProperties = { userSelect: 'none' };\n\nconst transitionProps = { unmountOnExit: true };\n\nexport interface StageChartProps {\n  stage: ChartableStage;\n\n  chartTypes: CicdDefaults['chartTypes'];\n  defaultCollapsed?: number;\n  defaultHidden?: number;\n  zeroYAxis?: boolean;\n}\n\nexport function StageChart(props: StageChartProps) {\n  const { stage, ...chartOptions } = props;\n  const {\n    chartTypes,\n    defaultCollapsed = 0,\n    defaultHidden = 0,\n    zeroYAxis = false,\n  } = chartOptions;\n\n  const { zoomFilterValues } = useZoom();\n  const { zoomProps, getZoomArea } = useZoomArea();\n\n  const ticks = useMemo(\n    () => pickElements(stage.values, 8).map(val => val.__epoch),\n    [stage.values],\n  );\n  const domainY = useMemo(\n    () => [zeroYAxis ? 0 : 'auto', 'auto'] as YAxisProps['domain'],\n    [zeroYAxis],\n  );\n  const statuses = useMemo(\n    () => statusTypes.filter(status => stage.statusSet.has(status)),\n    [stage.statusSet],\n  );\n  const legendPayload = useMemo(\n    (): LegendProps['payload'] =>\n      statuses.map(status => ({\n        value: capitalize(status),\n        type: 'line',\n        id: status,\n        color: statusColorMap[status],\n      })),\n    [statuses],\n  );\n\n  const subStages = useMemo(\n    () =>\n      new Map<string, ChartableStage>(\n        [...stage.stages.entries()].filter(\n          ([_name, subStage]) => subStage.combinedAnalysis.max > defaultHidden,\n        ),\n      ),\n    [stage.stages, defaultHidden],\n  );\n\n  const zoomFilteredValues = useMemo(\n    () => zoomFilterValues(stage.values),\n    [stage.values, zoomFilterValues],\n  );\n\n  return stage.combinedAnalysis.max < defaultHidden ? null : (\n    <Accordion\n      defaultExpanded={stage.combinedAnalysis.max > defaultCollapsed}\n      TransitionProps={transitionProps}\n    >\n      <AccordionSummary expandIcon={<ExpandMoreIcon />}>\n        <Typography>\n          {stage.name} (med {formatDuration(stage.combinedAnalysis.med)}, avg{' '}\n          {formatDuration(stage.combinedAnalysis.avg)})\n        </Typography>\n      </AccordionSummary>\n      <AccordionDetails>\n        {stage.values.length === 0 ? (\n          <Alert severity=\"info\">No data</Alert>\n        ) : (\n          <Grid container direction=\"column\">\n            <Grid item style={noUserSelect}>\n              <ResponsiveContainer width=\"100%\" height={140}>\n                <ComposedChart data={zoomFilteredValues} {...zoomProps}>\n                  <defs>\n                    <linearGradient id=\"colorDur\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                      {fireColors.map(([percent, color]) => (\n                        <stop\n                          key={percent}\n                          offset={percent}\n                          stopColor={color}\n                          stopOpacity={0.8}\n                        />\n                      ))}\n                    </linearGradient>\n                  </defs>\n                  {statuses.length > 1 && <Legend payload={legendPayload} />}\n                  <CartesianGrid strokeDasharray=\"3 3\" />\n                  <XAxis\n                    dataKey=\"__epoch\"\n                    type=\"category\"\n                    ticks={ticks}\n                    tickFormatter={tickFormatterX}\n                  />\n                  <YAxis\n                    yAxisId={1}\n                    tickFormatter={tickFormatterY}\n                    type=\"number\"\n                    tickCount={5}\n                    name=\"Duration\"\n                    domain={domainY}\n                  />\n                  <YAxis\n                    yAxisId={2}\n                    orientation=\"right\"\n                    type=\"number\"\n                    tickCount={5}\n                    name=\"Count\"\n                  />\n                  <Tooltip\n                    formatter={tooltipValueFormatter}\n                    labelFormatter={labelFormatter}\n                  />\n                  {statuses.reverse().map(status => (\n                    <Fragment key={status}>\n                      {!chartTypes[status].includes('duration') ? null : (\n                        <>\n                          <Area\n                            isAnimationActive={false}\n                            yAxisId={1}\n                            type=\"monotone\"\n                            dataKey={status}\n                            stackId={status}\n                            stroke={\n                              statuses.length > 1\n                                ? statusColorMap[status]\n                                : colorStroke\n                            }\n                            fillOpacity={statuses.length > 1 ? 0.5 : 1}\n                            fill={\n                              statuses.length > 1\n                                ? statusColorMap[status]\n                                : 'url(#colorDur)'\n                            }\n                            connectNulls\n                          />\n                          <Line\n                            isAnimationActive={false}\n                            yAxisId={1}\n                            type=\"monotone\"\n                            dataKey={`${status} avg`}\n                            stroke={\n                              statuses.length > 1\n                                ? statusColorMap[status]\n                                : colorStrokeAvg\n                            }\n                            opacity={0.8}\n                            strokeWidth={2}\n                            dot={false}\n                            connectNulls\n                          />\n                        </>\n                      )}\n                      {!chartTypes[status].includes('count') ? null : (\n                        <Bar\n                          isAnimationActive={false}\n                          yAxisId={2}\n                          type=\"monotone\"\n                          dataKey={`${status} count`}\n                          stackId=\"1\"\n                          stroke={statusColorMap[status] ?? ''}\n                          fillOpacity={0.5}\n                          fill={statusColorMap[status] ?? ''}\n                        />\n                      )}\n                    </Fragment>\n                  ))}\n                  {getZoomArea({ yAxisId: 1 })}\n                </ComposedChart>\n              </ResponsiveContainer>\n            </Grid>\n            {subStages.size === 0 ? null : (\n              <Grid item>\n                <Accordion\n                  defaultExpanded={false}\n                  TransitionProps={transitionProps}\n                >\n                  <AccordionSummary expandIcon={<ExpandMoreIcon />}>\n                    <Typography>Sub stages ({subStages.size})</Typography>\n                  </AccordionSummary>\n                  <AccordionDetails>\n                    <div style={fullWidth}>\n                      {[...subStages.values()].map(subStage => (\n                        <StageChart\n                          key={subStage.name}\n                          {...chartOptions}\n                          stage={subStage}\n                        />\n                      ))}\n                    </div>\n                  </AccordionDetails>\n                </Accordion>\n              </Grid>\n            )}\n          </Grid>\n        )}\n      </AccordionDetails>\n    </Accordion>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/charts/status-chart.esm.js

@@ -0,0 +1,142 @@
+import React, { useMemo, Fragment } from 'react';
+import { ResponsiveContainer, ComposedChart, Legend, CartesianGrid, XAxis, YAxis, Tooltip, Area, Bar } from 'recharts';
+import Alert from '@material-ui/lab/Alert';
+import Accordion from '@material-ui/core/Accordion';
+import AccordionSummary from '@material-ui/core/AccordionSummary';
+import AccordionDetails from '@material-ui/core/AccordionDetails';
+import Typography from '@material-ui/core/Typography';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { capitalize } from 'lodash';
+import { useZoom, useZoomArea } from './zoom.esm.js';
+import { tickFormatterX, labelFormatterWithoutTime } from '../components/utils.esm.js';
+import { triggerColorMap, statusColorMap } from './colors.esm.js';
+
+function StatusChart(props) {
+  const { analysis } = props;
+  const { zoomFilterValues } = useZoom();
+  const { zoomProps, getZoomArea } = useZoomArea();
+  const values = useMemo(() => {
+    return analysis.daily.values.map((value) => {
+      const totTriggers = analysis.daily.triggerReasons.reduce(
+        (prev, cur) => prev + (value[cur] ?? 0),
+        0
+      );
+      if (!totTriggers) {
+        return value;
+      }
+      return {
+        ...value,
+        ...Object.fromEntries(
+          analysis.daily.triggerReasons.map((reason) => [
+            reason,
+            (value[reason] ?? 0) / totTriggers
+          ])
+        )
+      };
+    });
+  }, [analysis.daily]);
+  const triggerReasonLegendPayload = useMemo(
+    () => analysis.daily.triggerReasons.map((reason) => ({
+      value: humanTriggerReason(reason),
+      type: "line",
+      id: reason,
+      color: triggerColorMap[reason] ?? ""
+    })),
+    [analysis.daily.triggerReasons]
+  );
+  const statusesLegendPayload = useMemo(
+    () => analysis.daily.statuses.map((status) => ({
+      value: capitalize(status),
+      type: "line",
+      id: status,
+      color: statusColorMap[status] ?? ""
+    })),
+    [analysis.daily.statuses]
+  );
+  const legendPayload = useMemo(
+    () => [
+      ...triggerReasonLegendPayload,
+      ...statusesLegendPayload
+    ],
+    [statusesLegendPayload, triggerReasonLegendPayload]
+  );
+  const tooltipFormatter = useMemo(() => {
+    const reasonSet = new Set(analysis.daily.triggerReasons);
+    return (percentOrCount, name) => {
+      const label = reasonSet.has(name) ? humanTriggerReason(name) : capitalize(name);
+      const valueText = reasonSet.has(name) ? `${(percentOrCount * 100).toFixed(0)}%` : percentOrCount;
+      return [
+        // TODO(Rugvip): Types don't allow returning elements, but it was here before so presumably works
+        /* @__PURE__ */ React.createElement(Typography, { component: "span" }, label, ": ", valueText),
+        null
+      ];
+    };
+  }, [analysis.daily.triggerReasons]);
+  const zoomFilteredValues = useMemo(
+    () => zoomFilterValues(values),
+    [values, zoomFilterValues]
+  );
+  const barSize = getBarSize(analysis.daily.values.length);
+  return /* @__PURE__ */ React.createElement(Accordion, { defaultExpanded: analysis.daily.statuses.length > 1 }, /* @__PURE__ */ React.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React.createElement(Typography, null, "Build count per status over build trigger reason")), /* @__PURE__ */ React.createElement(AccordionDetails, null, values.length === 0 ? /* @__PURE__ */ React.createElement(Alert, { severity: "info" }, "No data") : /* @__PURE__ */ React.createElement(ResponsiveContainer, { width: "100%", height: 140 }, /* @__PURE__ */ React.createElement(ComposedChart, { data: zoomFilteredValues, ...zoomProps }, /* @__PURE__ */ React.createElement(Legend, { payload: legendPayload }), /* @__PURE__ */ React.createElement(CartesianGrid, { strokeDasharray: "3 3" }), /* @__PURE__ */ React.createElement(
+    XAxis,
+    {
+      dataKey: "__epoch",
+      type: "category",
+      tickFormatter: tickFormatterX
+    }
+  ), /* @__PURE__ */ React.createElement(YAxis, { yAxisId: 1, type: "number", tickCount: 5, name: "Count" }), /* @__PURE__ */ React.createElement(YAxis, { yAxisId: 2, type: "number", name: "Triggers", hide: true }), /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      labelFormatter: labelFormatterWithoutTime,
+      formatter: tooltipFormatter
+    }
+  ), triggerReasonLegendPayload.map((reason) => /* @__PURE__ */ React.createElement(Fragment, { key: reason.id }, /* @__PURE__ */ React.createElement(
+    Area,
+    {
+      isAnimationActive: false,
+      type: "monotone",
+      dataKey: reason.id,
+      stackId: "triggers",
+      yAxisId: 2,
+      stroke: triggerColorMap[reason.id] ?? "",
+      fillOpacity: 0.5,
+      fill: triggerColorMap[reason.id] ?? ""
+    }
+  ))), [...analysis.daily.statuses].reverse().map((status) => /* @__PURE__ */ React.createElement(Fragment, { key: status }, /* @__PURE__ */ React.createElement(
+    Bar,
+    {
+      isAnimationActive: false,
+      type: "monotone",
+      barSize,
+      dataKey: status,
+      stackId: "statuses",
+      yAxisId: 1,
+      stroke: statusColorMap[status] ?? "",
+      fillOpacity: 0.8,
+      fill: statusColorMap[status] ?? ""
+    }
+  ))), getZoomArea({ yAxisId: 1 })))));
+}
+function humanTriggerReason(reason) {
+  if (reason === "manual") {
+    return "Triggered manually";
+  } else if (reason === "scm") {
+    return "Triggered by SCM";
+  } else if (reason === "internal") {
+    return "Triggered internally";
+  } else if (reason === "other") {
+    return "Triggered by another reason";
+  }
+  return `Triggered by ${reason}`;
+}
+function getBarSize(count) {
+  if (count < 20) {
+    return 10;
+  } else if (count < 40) {
+    return 8;
+  }
+  return 5;
+}
+
+export { StatusChart };
+//# sourceMappingURL=status-chart.esm.js.map

package/dist/charts/status-chart.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-chart.esm.js","sources":["../../src/charts/status-chart.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { Fragment, useMemo } from 'react';\nimport {\n  Area,\n  Bar,\n  ComposedChart,\n  XAxis,\n  YAxis,\n  CartesianGrid,\n  Legend,\n  LegendProps,\n  Tooltip,\n  ResponsiveContainer,\n} from 'recharts';\nimport Alert from '@material-ui/lab/Alert';\nimport Accordion from '@material-ui/core/Accordion';\nimport AccordionSummary from '@material-ui/core/AccordionSummary';\nimport AccordionDetails from '@material-ui/core/AccordionDetails';\nimport Typography from '@material-ui/core/Typography';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport { capitalize } from 'lodash';\n\nimport { useZoom, useZoomArea } from './zoom';\nimport { FilterStatusType, TriggerReason } from '../apis/types';\nimport { labelFormatterWithoutTime, tickFormatterX } from '../components/utils';\nimport { statusColorMap, triggerColorMap } from './colors';\nimport { ChartableStagesAnalysis } from './types';\n\nexport interface StatusChartProps {\n  analysis: ChartableStagesAnalysis;\n}\n\nexport function StatusChart(props: StatusChartProps) {\n  const { analysis } = props;\n\n  const { zoomFilterValues } = useZoom();\n  const { zoomProps, getZoomArea } = useZoomArea();\n\n  const values = useMemo(() => {\n    return analysis.daily.values.map(value => {\n      const totTriggers = analysis.daily.triggerReasons.reduce(\n        (prev, cur) => prev + (value[cur as TriggerReason] ?? 0),\n        0,\n      );\n\n      if (!totTriggers) {\n        return value;\n      }\n\n      return {\n        ...value,\n        ...Object.fromEntries(\n          analysis.daily.triggerReasons.map(reason => [\n            reason,\n            (value[reason as TriggerReason] ?? 0) / totTriggers,\n          ]),\n        ),\n      };\n    });\n  }, [analysis.daily]);\n\n  const triggerReasonLegendPayload = useMemo(\n    (): NonNullable<LegendProps['payload']> =>\n      analysis.daily.triggerReasons.map(reason => ({\n        value: humanTriggerReason(reason),\n        type: 'line',\n        id: reason,\n        color: triggerColorMap[reason as TriggerReason] ?? '',\n      })),\n    [analysis.daily.triggerReasons],\n  );\n\n  const statusesLegendPayload = useMemo(\n    (): NonNullable<LegendProps['payload']> =>\n      analysis.daily.statuses.map(status => ({\n        value: capitalize(status),\n        type: 'line',\n        id: status,\n        color: statusColorMap[status as FilterStatusType] ?? '',\n      })),\n    [analysis.daily.statuses],\n  );\n\n  const legendPayload = useMemo(\n    (): NonNullable<LegendProps['payload']> => [\n      ...triggerReasonLegendPayload,\n      ...statusesLegendPayload,\n    ],\n    [statusesLegendPayload, triggerReasonLegendPayload],\n  );\n\n  const tooltipFormatter = useMemo(() => {\n    const reasonSet = new Set(analysis.daily.triggerReasons);\n\n    return (percentOrCount: number, name: string): [any, any] => {\n      const label = reasonSet.has(name)\n        ? humanTriggerReason(name)\n        : capitalize(name);\n      const valueText = reasonSet.has(name)\n        ? `${(percentOrCount * 100).toFixed(0)}%`\n        : percentOrCount;\n\n      return [\n        // TODO(Rugvip): Types don't allow returning elements, but it was here before so presumably works\n        <Typography component=\"span\">\n          {label}: {valueText}\n        </Typography>,\n        null,\n      ];\n    };\n  }, [analysis.daily.triggerReasons]);\n\n  const zoomFilteredValues = useMemo(\n    () => zoomFilterValues(values),\n    [values, zoomFilterValues],\n  );\n\n  const barSize = getBarSize(analysis.daily.values.length);\n\n  return (\n    <Accordion defaultExpanded={analysis.daily.statuses.length > 1}>\n      <AccordionSummary expandIcon={<ExpandMoreIcon />}>\n        <Typography>\n          Build count per status over build trigger reason\n        </Typography>\n      </AccordionSummary>\n      <AccordionDetails>\n        {values.length === 0 ? (\n          <Alert severity=\"info\">No data</Alert>\n        ) : (\n          <ResponsiveContainer width=\"100%\" height={140}>\n            <ComposedChart data={zoomFilteredValues} {...zoomProps}>\n              <Legend payload={legendPayload} />\n              <CartesianGrid strokeDasharray=\"3 3\" />\n              <XAxis\n                dataKey=\"__epoch\"\n                type=\"category\"\n                tickFormatter={tickFormatterX}\n              />\n              <YAxis yAxisId={1} type=\"number\" tickCount={5} name=\"Count\" />\n              <YAxis yAxisId={2} type=\"number\" name=\"Triggers\" hide />\n              <Tooltip\n                labelFormatter={labelFormatterWithoutTime}\n                formatter={tooltipFormatter}\n              />\n              {triggerReasonLegendPayload.map(reason => (\n                <Fragment key={reason.id}>\n                  <Area\n                    isAnimationActive={false}\n                    type=\"monotone\"\n                    dataKey={reason.id!}\n                    stackId=\"triggers\"\n                    yAxisId={2}\n                    stroke={triggerColorMap[reason.id as TriggerReason] ?? ''}\n                    fillOpacity={0.5}\n                    fill={triggerColorMap[reason.id as TriggerReason] ?? ''}\n                  />\n                </Fragment>\n              ))}\n              {[...analysis.daily.statuses].reverse().map(status => (\n                <Fragment key={status}>\n                  <Bar\n                    isAnimationActive={false}\n                    type=\"monotone\"\n                    barSize={barSize}\n                    dataKey={status}\n                    stackId=\"statuses\"\n                    yAxisId={1}\n                    stroke={statusColorMap[status as FilterStatusType] ?? ''}\n                    fillOpacity={0.8}\n                    fill={statusColorMap[status as FilterStatusType] ?? ''}\n                  />\n                </Fragment>\n              ))}\n              {getZoomArea({ yAxisId: 1 })}\n            </ComposedChart>\n          </ResponsiveContainer>\n        )}\n      </AccordionDetails>\n    </Accordion>\n  );\n}\n\nfunction humanTriggerReason(reason: string): string {\n  if ((reason as TriggerReason) === 'manual') {\n    return 'Triggered manually';\n  } else if ((reason as TriggerReason) === 'scm') {\n    return 'Triggered by SCM';\n  } else if ((reason as TriggerReason) === 'internal') {\n    return 'Triggered internally';\n  } else if ((reason as TriggerReason) === 'other') {\n    return 'Triggered by another reason';\n  }\n  return `Triggered by ${reason}`;\n}\n\nfunction getBarSize(count: number): number {\n  if (count < 20) {\n    return 10;\n  } else if (count < 40) {\n    return 8;\n  }\n  return 5;\n}\n"],"names":[],"mappings":"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"}

package/dist/charts/zoom.esm.js

@@ -0,0 +1,142 @@
+import { throttle } from 'lodash';
+import React, { useState, useCallback, useMemo, useEffect, useContext, Fragment } from 'react';
+import { ReferenceArea } from 'recharts';
+
+const context = React.createContext(void 0);
+function ZoomProvider({ children }) {
+  const [registeredSelectors, setRegisteredSelectors] = useState([]);
+  const [selectState, setSelectState] = useState({});
+  const [zoomState, setZoomState] = useState({});
+  const registerSelection = useCallback(
+    (selector) => {
+      setRegisteredSelectors((old) => [...old, selector]);
+      return () => {
+        setRegisteredSelectors((old) => old.filter((sel) => sel === selector));
+      };
+    },
+    [setRegisteredSelectors]
+  );
+  const callSelectors = useCallback(
+    (state) => {
+      registeredSelectors.forEach((selector) => {
+        selector(state);
+      });
+    },
+    [registeredSelectors]
+  );
+  const throttledCallSelectors = useMemo(
+    () => throttle(callSelectors, 200),
+    [callSelectors]
+  );
+  useEffect(() => {
+    throttledCallSelectors({
+      left: selectState.left,
+      right: selectState.right
+    });
+  }, [selectState.left, selectState.right, throttledCallSelectors]);
+  const resetZoom = useCallback(() => {
+    setSelectState({});
+    setZoomState({});
+  }, [setSelectState, setZoomState]);
+  const value = useMemo(
+    () => ({
+      registerSelection,
+      setSelectState,
+      zoomState,
+      setZoomState,
+      resetZoom
+    }),
+    [registerSelection, setSelectState, zoomState, setZoomState, resetZoom]
+  );
+  return /* @__PURE__ */ React.createElement(context.Provider, { value, children });
+}
+function useZoom() {
+  const { zoomState, resetZoom } = useContext(context);
+  const zoomFilterValues = useCallback(
+    (values) => {
+      const { left, right } = zoomState;
+      return left === void 0 || right === void 0 ? values : values.filter(({ __epoch }) => __epoch > left && __epoch < right);
+    },
+    [zoomState]
+  );
+  return useMemo(
+    () => ({
+      resetZoom,
+      zoomState,
+      zoomFilterValues
+    }),
+    [resetZoom, zoomState, zoomFilterValues]
+  );
+}
+function useZoomArea() {
+  const [showSelection, setShowSelection] = useState(false);
+  const [state, setState] = useState({});
+  const { setSelectState, setZoomState, registerSelection } = useContext(context);
+  const onMouseDown = useCallback(
+    (e) => {
+      if (!e?.activeLabel) return;
+      setSelectState({ left: e.activeLabel });
+      setShowSelection(true);
+    },
+    [setSelectState, setShowSelection]
+  );
+  const onMouseMove = useCallback(
+    (e) => {
+      if (!e?.activeLabel) return;
+      setSelectState((area) => {
+        if (!area.left) {
+          return area;
+        }
+        return { ...area, right: e.activeLabel };
+      });
+    },
+    [setSelectState]
+  );
+  const doZoom = useCallback(() => {
+    setSelectState((old) => {
+      const { left, right } = old;
+      if (left === void 0 || right === void 0 || left === right) {
+        setZoomState({});
+      } else if (left < right) {
+        setZoomState({ left, right });
+      } else if (left > right) {
+        setZoomState({ left: right, right: left });
+      }
+      return {};
+    });
+    setShowSelection(false);
+  }, [setSelectState, setZoomState, setShowSelection]);
+  const zoomProps = useMemo(
+    () => ({
+      onMouseDown,
+      onMouseMove,
+      onMouseUp: doZoom
+    }),
+    [onMouseDown, onMouseMove, doZoom]
+  );
+  useEffect(() => {
+    if (!showSelection) {
+      return void 0;
+    }
+    return registerSelection(setState);
+  }, [registerSelection, setState, showSelection]);
+  const getZoomArea = useCallback(
+    (props) => /* @__PURE__ */ React.createElement(Fragment, { key: "zoom-area" }, showSelection && state.left && state.right ? /* @__PURE__ */ React.createElement(
+      ReferenceArea,
+      {
+        x1: state.left,
+        x2: state.right,
+        strokeOpacity: 0.5,
+        ...props
+      }
+    ) : null),
+    [showSelection, state.left, state.right]
+  );
+  return {
+    zoomProps,
+    getZoomArea
+  };
+}
+
+export { ZoomProvider, useZoom, useZoomArea };
+//# sourceMappingURL=zoom.esm.js.map

package/dist/charts/zoom.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zoom.esm.js","sources":["../../src/charts/zoom.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { throttle } from 'lodash';\nimport React, {\n  PropsWithChildren,\n  Dispatch,\n  SetStateAction,\n  Fragment,\n  useContext,\n  useState,\n  useCallback,\n  useMemo,\n  useEffect,\n} from 'react';\nimport { ReferenceArea } from 'recharts';\n\nimport type { Epoch } from './types';\n\ninterface ZoomState {\n  left?: number;\n  right?: number;\n}\n\ninterface ZoomContext {\n  registerSelection(setter: Dispatch<ZoomState>): void;\n  setSelectState: Dispatch<SetStateAction<ZoomState>>;\n\n  zoomState: ZoomState;\n  setZoomState: Dispatch<SetStateAction<ZoomState>>;\n\n  resetZoom: () => void;\n}\n\nconst context = React.createContext<ZoomContext>(undefined as any);\n\nexport function ZoomProvider({ children }: PropsWithChildren<{}>) {\n  const [registeredSelectors, setRegisteredSelectors] = useState<\n    Array<Dispatch<ZoomState>>\n  >([]);\n  const [selectState, setSelectState] = useState<ZoomState>({});\n  const [zoomState, setZoomState] = useState<ZoomState>({});\n\n  const registerSelection = useCallback(\n    (selector: Dispatch<ZoomState>) => {\n      setRegisteredSelectors(old => [...old, selector]);\n\n      return () => {\n        setRegisteredSelectors(old => old.filter(sel => sel === selector));\n      };\n    },\n    [setRegisteredSelectors],\n  );\n\n  const callSelectors = useCallback(\n    (state: ZoomState) => {\n      registeredSelectors.forEach(selector => {\n        selector(state);\n      });\n    },\n    [registeredSelectors],\n  );\n\n  const throttledCallSelectors = useMemo(\n    () => throttle(callSelectors, 200),\n    [callSelectors],\n  );\n\n  useEffect(() => {\n    throttledCallSelectors({\n      left: selectState.left,\n      right: selectState.right,\n    });\n  }, [selectState.left, selectState.right, throttledCallSelectors]);\n\n  const resetZoom = useCallback(() => {\n    setSelectState({});\n    setZoomState({});\n  }, [setSelectState, setZoomState]);\n\n  const value = useMemo(\n    (): ZoomContext => ({\n      registerSelection,\n      setSelectState,\n\n      zoomState,\n      setZoomState,\n\n      resetZoom,\n    }),\n    [registerSelection, setSelectState, zoomState, setZoomState, resetZoom],\n  );\n\n  return <context.Provider value={value} children={children} />;\n}\n\nexport function useZoom() {\n  const { zoomState, resetZoom } = useContext(context);\n\n  const zoomFilterValues = useCallback(\n    <T extends Epoch>(values: Array<T>): Array<T> => {\n      const { left, right } = zoomState;\n      return left === undefined || right === undefined\n        ? values\n        : values.filter(({ __epoch }) => __epoch > left && __epoch < right);\n    },\n    [zoomState],\n  );\n\n  return useMemo(\n    () => ({\n      resetZoom,\n      zoomState,\n      zoomFilterValues,\n    }),\n    [resetZoom, zoomState, zoomFilterValues],\n  );\n}\n\nexport interface ZoomAreaProps {\n  yAxisId?: number | string | undefined;\n}\n\nexport function useZoomArea() {\n  const [showSelection, setShowSelection] = useState(false);\n  const [state, setState] = useState<ZoomState>({});\n  const { setSelectState, setZoomState, registerSelection } =\n    useContext(context);\n\n  const onMouseDown = useCallback(\n    (e: any) => {\n      if (!e?.activeLabel) return;\n\n      setSelectState({ left: e.activeLabel });\n      setShowSelection(true);\n    },\n    [setSelectState, setShowSelection],\n  );\n\n  const onMouseMove = useCallback(\n    (e: any) => {\n      if (!e?.activeLabel) return;\n\n      setSelectState(area => {\n        if (!area.left) {\n          return area;\n        }\n        return { ...area, right: e.activeLabel };\n      });\n    },\n    [setSelectState],\n  );\n\n  const doZoom = useCallback(() => {\n    setSelectState(old => {\n      const { left, right } = old;\n\n      if (left === undefined || right === undefined || left === right) {\n        // Either is undefined or both are same - zoom out\n        setZoomState({});\n      } else if (left < right) {\n        setZoomState({ left, right });\n      } else if (left > right) {\n        setZoomState({ left: right, right: left });\n      }\n\n      return {};\n    });\n    setShowSelection(false);\n  }, [setSelectState, setZoomState, setShowSelection]);\n\n  const zoomProps = useMemo(\n    () => ({\n      onMouseDown,\n      onMouseMove,\n      onMouseUp: doZoom,\n    }),\n    [onMouseDown, onMouseMove, doZoom],\n  );\n\n  useEffect(() => {\n    if (!showSelection) {\n      return undefined;\n    }\n    return registerSelection(setState);\n  }, [registerSelection, setState, showSelection]);\n\n  const getZoomArea = useCallback(\n    (props?: ZoomAreaProps) => (\n      <Fragment key=\"zoom-area\">\n        {showSelection && state.left && state.right ? (\n          <ReferenceArea\n            x1={state.left}\n            x2={state.right}\n            strokeOpacity={0.5}\n            {...props}\n          />\n        ) : null}\n      </Fragment>\n    ),\n    [showSelection, state.left, state.right],\n  );\n\n  return {\n    zoomProps,\n    getZoomArea,\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/components/button-switch.esm.js

@@ -0,0 +1,86 @@
+import React, { useCallback } from 'react';
+import ButtonGroup from '@material-ui/core/ButtonGroup';
+import Button from '@material-ui/core/Button';
+import Tooltip from '@material-ui/core/Tooltip';
+import Zoom from '@material-ui/core/Zoom';
+
+function switchValue(value) {
+  return typeof value === "object" ? value.value : value;
+}
+function switchText(value) {
+  return typeof value === "object" ? value.text ?? value.value : value;
+}
+function findParent(tagName, elem) {
+  let node = elem;
+  while (node.tagName !== tagName) {
+    node = node.parentElement;
+    if (!node) {
+      throw new Error(`Couldn't find ${tagName} parent`);
+    }
+  }
+  return node;
+}
+function ButtonSwitch(props) {
+  const { values, vertical = false } = props;
+  const onClick = useCallback(
+    (ev) => {
+      const btn = findParent("BUTTON", ev.target);
+      const index = [...btn.parentElement.children].findIndex(
+        (child) => child === btn
+      );
+      const value = switchValue(values[index]);
+      if (props.multi) {
+        props.onChange(
+          props.selection.includes(value) ? props.selection.filter((val) => val !== value) : [...props.selection, value]
+        );
+      } else {
+        props.onChange(value);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [values, props.selection, props.multi, props.onChange]
+  );
+  const hasSelection = (value) => {
+    if (props.multi) {
+      return props.selection.includes(value);
+    }
+    return props.selection === value;
+  };
+  const tooltipify = (value, elem) => typeof value === "object" && value.tooltip ? /* @__PURE__ */ React.createElement(
+    Tooltip,
+    {
+      key: value.value,
+      TransitionComponent: Zoom,
+      title: value.tooltip,
+      arrow: true
+    },
+    elem
+  ) : elem;
+  return /* @__PURE__ */ React.createElement(
+    ButtonGroup,
+    {
+      disableElevation: true,
+      orientation: vertical ? "vertical" : "horizontal",
+      variant: "outlined",
+      size: "small"
+    },
+    values.map(
+      (value) => tooltipify(
+        value,
+        /* @__PURE__ */ React.createElement(
+          Button,
+          {
+            key: switchValue(value),
+            color: hasSelection(switchValue(value)) ? "primary" : "default",
+            variant: hasSelection(switchValue(value)) ? "contained" : "outlined",
+            onClick
+          },
+          switchText(value)
+        )
+      )
+    )
+  );
+}
+
+export { ButtonSwitch };
+//# sourceMappingURL=button-switch.esm.js.map

package/dist/components/button-switch.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-switch.esm.js","sources":["../../src/components/button-switch.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useCallback, MouseEvent } from 'react';\nimport ButtonGroup from '@material-ui/core/ButtonGroup';\nimport Button from '@material-ui/core/Button';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Zoom from '@material-ui/core/Zoom';\n\nexport interface SwitchValueDetails<T extends string> {\n  value: T;\n  tooltip?: string;\n  text?: string | JSX.Element;\n}\n\nexport type SwitchValue<T extends string> = T | SwitchValueDetails<T>;\n\nexport interface ButtonSwitchPropsBase<T extends string> {\n  values: ReadonlyArray<SwitchValue<T>>;\n  vertical?: boolean;\n}\nexport interface ButtonSwitchPropsSingle<T extends string>\n  extends ButtonSwitchPropsBase<T> {\n  multi?: false;\n  selection: T;\n  onChange: (selected: T) => void;\n}\nexport interface ButtonSwitchPropsMulti<T extends string>\n  extends ButtonSwitchPropsBase<T> {\n  multi: true;\n  selection: ReadonlyArray<T>;\n  onChange: (selected: Array<T>) => void;\n}\n\nexport type ButtonSwitchProps<T extends string> =\n  | ButtonSwitchPropsSingle<T>\n  | ButtonSwitchPropsMulti<T>;\n\nfunction switchValue<T extends string>(value: SwitchValue<T>): T {\n  return typeof value === 'object' ? value.value : value;\n}\n\nfunction switchText<T extends string>(\n  value: SwitchValue<T>,\n): string | JSX.Element {\n  return typeof value === 'object' ? value.text ?? value.value : value;\n}\n\nfunction findParent(tagName: string, elem: HTMLElement): HTMLElement {\n  let node: HTMLElement | null = elem;\n  while (node.tagName !== tagName) {\n    node = node.parentElement;\n    if (!node) {\n      throw new Error(`Couldn't find ${tagName} parent`);\n    }\n  }\n  return node;\n}\n\nexport function ButtonSwitch<T extends string>(props: ButtonSwitchProps<T>) {\n  const { values, vertical = false } = props;\n\n  const onClick = useCallback(\n    (ev: MouseEvent<HTMLSpanElement>) => {\n      const btn = findParent('BUTTON', ev.target as HTMLElement);\n      const index = [...btn.parentElement!.children].findIndex(\n        child => child === btn,\n      );\n      const value = switchValue(values[index]);\n\n      if (props.multi) {\n        props.onChange(\n          props.selection.includes(value as T)\n            ? props.selection.filter(val => val !== value)\n            : [...props.selection, value as T],\n        );\n      } else {\n        props.onChange(value as T);\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [values, props.selection, props.multi, props.onChange],\n  );\n\n  const hasSelection = (value: T) => {\n    if (props.multi) {\n      return props.selection.includes(value);\n    }\n    return props.selection === value;\n  };\n\n  const tooltipify = (value: SwitchValue<T>, elem: JSX.Element) =>\n    typeof value === 'object' && value.tooltip ? (\n      <Tooltip\n        key={value.value}\n        TransitionComponent={Zoom}\n        title={value.tooltip}\n        arrow\n      >\n        {elem}\n      </Tooltip>\n    ) : (\n      elem\n    );\n\n  return (\n    <ButtonGroup\n      disableElevation\n      orientation={vertical ? 'vertical' : 'horizontal'}\n      variant=\"outlined\"\n      size=\"small\"\n    >\n      {values.map(value =>\n        tooltipify(\n          value,\n          <Button\n            key={switchValue(value)}\n            color={hasSelection(switchValue(value)) ? 'primary' : 'default'}\n            variant={\n              hasSelection(switchValue(value)) ? 'contained' : 'outlined'\n            }\n            onClick={onClick}\n          >\n            {switchText(value)}\n          </Button>,\n        ),\n      )}\n    </ButtonGroup>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAmDA,SAAS,YAA8B,KAA0B,EAAA;AAC/D,EAAA,OAAO,OAAO,KAAA,KAAU,QAAW,GAAA,KAAA,CAAM,KAAQ,GAAA,KAAA,CAAA;AACnD,CAAA;AAEA,SAAS,WACP,KACsB,EAAA;AACtB,EAAA,OAAO,OAAO,KAAU,KAAA,QAAA,GAAW,KAAM,CAAA,IAAA,IAAQ,MAAM,KAAQ,GAAA,KAAA,CAAA;AACjE,CAAA;AAEA,SAAS,UAAA,CAAW,SAAiB,IAAgC,EAAA;AACnE,EAAA,IAAI,IAA2B,GAAA,IAAA,CAAA;AAC/B,EAAO,OAAA,IAAA,CAAK,YAAY,OAAS,EAAA;AAC/B,IAAA,IAAA,GAAO,IAAK,CAAA,aAAA,CAAA;AACZ,IAAA,IAAI,CAAC,IAAM,EAAA;AACT,MAAA,MAAM,IAAI,KAAA,CAAM,CAAiB,cAAA,EAAA,OAAO,CAAS,OAAA,CAAA,CAAA,CAAA;AAAA,KACnD;AAAA,GACF;AACA,EAAO,OAAA,IAAA,CAAA;AACT,CAAA;AAEO,SAAS,aAA+B,KAA6B,EAAA;AAC1E,EAAA,MAAM,EAAE,MAAA,EAAQ,QAAW,GAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AAErC,EAAA,MAAM,OAAU,GAAA,WAAA;AAAA,IACd,CAAC,EAAoC,KAAA;AACnC,MAAA,MAAM,GAAM,GAAA,UAAA,CAAW,QAAU,EAAA,EAAA,CAAG,MAAqB,CAAA,CAAA;AACzD,MAAA,MAAM,QAAQ,CAAC,GAAG,GAAI,CAAA,aAAA,CAAe,QAAQ,CAAE,CAAA,SAAA;AAAA,QAC7C,WAAS,KAAU,KAAA,GAAA;AAAA,OACrB,CAAA;AACA,MAAA,MAAM,KAAQ,GAAA,WAAA,CAAY,MAAO,CAAA,KAAK,CAAC,CAAA,CAAA;AAEvC,MAAA,IAAI,MAAM,KAAO,EAAA;AACf,QAAM,KAAA,CAAA,QAAA;AAAA,UACJ,MAAM,SAAU,CAAA,QAAA,CAAS,KAAU,CAAA,GAC/B,MAAM,SAAU,CAAA,MAAA,CAAO,CAAO,GAAA,KAAA,GAAA,KAAQ,KAAK,CAC3C,GAAA,CAAC,GAAG,KAAA,CAAM,WAAW,KAAU,CAAA;AAAA,SACrC,CAAA;AAAA,OACK,MAAA;AACL,QAAA,KAAA,CAAM,SAAS,KAAU,CAAA,CAAA;AAAA,OAC3B;AAAA,KACF;AAAA;AAAA,IAEA,CAAC,MAAQ,EAAA,KAAA,CAAM,WAAW,KAAM,CAAA,KAAA,EAAO,MAAM,QAAQ,CAAA;AAAA,GACvD,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,KAAa,KAAA;AACjC,IAAA,IAAI,MAAM,KAAO,EAAA;AACf,MAAO,OAAA,KAAA,CAAM,SAAU,CAAA,QAAA,CAAS,KAAK,CAAA,CAAA;AAAA,KACvC;AACA,IAAA,OAAO,MAAM,SAAc,KAAA,KAAA,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAM,MAAA,UAAA,GAAa,CAAC,KAAuB,EAAA,IAAA,KACzC,OAAO,KAAU,KAAA,QAAA,IAAY,MAAM,OACjC,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,KAAK,KAAM,CAAA,KAAA;AAAA,MACX,mBAAqB,EAAA,IAAA;AAAA,MACrB,OAAO,KAAM,CAAA,OAAA;AAAA,MACb,KAAK,EAAA,IAAA;AAAA,KAAA;AAAA,IAEJ,IAAA;AAAA,GAGH,GAAA,IAAA,CAAA;AAGJ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,gBAAgB,EAAA,IAAA;AAAA,MAChB,WAAA,EAAa,WAAW,UAAa,GAAA,YAAA;AAAA,MACrC,OAAQ,EAAA,UAAA;AAAA,MACR,IAAK,EAAA,OAAA;AAAA,KAAA;AAAA,IAEJ,MAAO,CAAA,GAAA;AAAA,MAAI,CACV,KAAA,KAAA,UAAA;AAAA,QACE,KAAA;AAAA,wBACA,KAAA,CAAA,aAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,GAAA,EAAK,YAAY,KAAK,CAAA;AAAA,YACtB,OAAO,YAAa,CAAA,WAAA,CAAY,KAAK,CAAC,IAAI,SAAY,GAAA,SAAA;AAAA,YACtD,SACE,YAAa,CAAA,WAAA,CAAY,KAAK,CAAC,IAAI,WAAc,GAAA,UAAA;AAAA,YAEnD,OAAA;AAAA,WAAA;AAAA,UAEC,WAAW,KAAK,CAAA;AAAA,SACnB;AAAA,OACF;AAAA,KACF;AAAA,GACF,CAAA;AAEJ;;;;"}