@perses-dev/scatter-chart-plugin 0.10.1 → 0.11.0-beta.1

package/lib/ScatterChartPanel.d.ts

@@ -1,6 +1,6 @@
 import { PanelProps } from '@perses-dev/plugin-system';
 import { ReactElement } from 'react';
-import { TraceData, TraceSearchResult } from '@perses-dev/core';
+import { TraceData, TraceSearchResult } from '@perses-dev/spec';
 import { ScatterChartOptions } from './scatter-chart-model';
 export interface EChartTraceValue extends Omit<TraceSearchResult, 'startTimeUnixMs' | 'serviceStats'> {
     name: string;

package/lib/ScatterChartPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScatterChartPanel.d.ts","sourceRoot":"","sources":["../../src/ScatterChartPanel.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAIhE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,iBAAiB,GAAG,cAAc,CAAC;IACnG,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,SAAS,EAAE,IAAI,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,sBAAsB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;AAKhF;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,GAAG,IAAI,CA+GpF;AAGD,wBAAgB,aAAa,CAC3B,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAChC,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAC1B,MAAM,CAYR"}
+{"version":3,"file":"ScatterChartPanel.d.ts","sourceRoot":"","sources":["../../src/ScatterChartPanel.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAEhE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,iBAAiB,GAAG,cAAc,CAAC;IACnG,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,SAAS,EAAE,IAAI,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,sBAAsB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;AAKhF;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,GAAG,IAAI,CA+GpF;AAGD,wBAAgB,aAAa,CAC3B,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAChC,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAC1B,MAAM,CAYR"}

package/lib/ScatterChartPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ScatterChartPanel.tsx"],"sourcesContent":["// Copyright The Perses Authors\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\nimport { PanelProps } from '@perses-dev/plugin-system';\nimport { ReactElement, useMemo } from 'react';\nimport { TraceData, TraceSearchResult } from '@perses-dev/core';\nimport { EChartsOption, SeriesOption } from 'echarts';\nimport { NoDataOverlay, useChartsTheme } from '@perses-dev/components';\nimport { Scatterplot } from './Scatterplot';\nimport { ScatterChartOptions } from './scatter-chart-model';\n\nexport interface EChartTraceValue extends Omit<TraceSearchResult, 'startTimeUnixMs' | 'serviceStats'> {\n  name: string;\n  linkVariables: Record<string, string>;\n  startTime: Date;\n  spanCount: number;\n  errorCount: number;\n}\n\nexport type ScatterChartPanelProps = PanelProps<ScatterChartOptions, TraceData>;\n\n/** default size range of the circles diameter */\nconst DEFAULT_SIZE_RANGE: [number, number] = [6, 20];\n\n/**\n * ScatterChartPanel receives data from the DataQueriesProvider and transforms it\n * into a `dataset` object that Apache ECharts can consume. Additionally,\n * data formatting is also dictated in this component. Formatting includes\n * datapoint size and color.\n *\n * Documentation for data structures accepted by Apache ECharts:\n *  https://echarts.apache.org/handbook/en/concepts/dataset\n *\n * Examples for scatter chart formatting in Apache ECharts:\n *  https://echarts.apache.org/examples/en/index.html#chart-type-scatter\n *\n * @returns a `ScatterPlot` component that contains an EChart which will handle\n * visualization of the data.\n */\nexport function ScatterChartPanel(props: ScatterChartPanelProps): ReactElement | null {\n  const { spec, contentDimensions, queryResults: traceResults } = props;\n  const chartsTheme = useChartsTheme();\n  const defaultColor = chartsTheme.thresholds.defaultColor || 'blue';\n  const sizeRange = spec.sizeRange || DEFAULT_SIZE_RANGE;\n\n  // Generate dataset\n  // Transform Tempo API response to fit 'dataset' structure from Apache ECharts\n  // https://echarts.apache.org/handbook/en/concepts/dataset\n  const { dataset, minSpanCount, maxSpanCount } = useMemo(() => {\n    const dataset = [];\n    let minSpanCount: number | undefined;\n    let maxSpanCount: number | undefined;\n    for (const result of traceResults) {\n      if (result.data.searchResult === undefined) continue;\n      const dataSeries = result.data.searchResult.map((trace) => {\n        let spanCount = 0;\n        let errorCount = 0;\n        for (const stats of Object.values(trace.serviceStats)) {\n          spanCount += stats.spanCount;\n          errorCount += stats.errorCount ?? 0;\n        }\n\n        if (minSpanCount === undefined || spanCount < minSpanCount) {\n          minSpanCount = spanCount;\n        }\n        if (maxSpanCount === undefined || spanCount > maxSpanCount) {\n          maxSpanCount = spanCount;\n        }\n\n        const pluginSpec = result.definition.spec.plugin.spec as { datasource?: { name?: string } } | undefined;\n        const newTraceValue: EChartTraceValue = {\n          ...trace,\n          linkVariables: {\n            datasourceName: pluginSpec?.datasource?.name ?? '',\n            traceId: trace.traceId,\n          },\n          name: `${trace.rootServiceName}: ${trace.rootTraceName}`,\n          startTime: new Date(trace.startTimeUnixMs), // convert unix epoch time to Date\n          spanCount,\n          errorCount,\n        };\n        return newTraceValue;\n      });\n      dataset.push({\n        source: dataSeries,\n      });\n    }\n    return { dataset, minSpanCount: minSpanCount ?? 0, maxSpanCount: maxSpanCount ?? 0 };\n  }, [traceResults]);\n\n  // Formatting for the dataset\n  // 1. Map x,y coordinates\n  // 2. Datapoint size corresponds to the number of spans in a trace\n  // 3. Color datapoint red if the trace contains an error\n  const series = useMemo(() => {\n    const seriesTemplate2: SeriesOption = {\n      type: 'scatter',\n      encode: {\n        // Map to x-axis.\n        x: 'startTime',\n        // Map to y-axis.\n        y: 'durationMs',\n      },\n      symbolSize: function (data) {\n        // returns the diameter of the circles\n        return getSymbolSize(data.spanCount, [minSpanCount, maxSpanCount], sizeRange);\n      },\n      itemStyle: {\n        color: function (params) {\n          const traceData: EChartTraceValue = params.data as EChartTraceValue;\n          // If the trace contains an error, color the datapoint in red\n          if (traceData.errorCount > 0) {\n            return 'red';\n          }\n          // Else return default color\n          return defaultColor;\n        },\n      },\n    };\n\n    // Each data set needs to have a corresponding series formatting object\n    const series = [];\n    for (let i = 0; i < dataset.length; i++) {\n      series.push({ ...seriesTemplate2, datasetIndex: i });\n    }\n    return series;\n  }, [dataset, defaultColor, minSpanCount, maxSpanCount, sizeRange]);\n\n  const tracesFound = traceResults.some((traceData) => (traceData.data?.searchResult ?? []).length > 0);\n  if (!tracesFound) {\n    return <NoDataOverlay resource=\"traces\" />;\n  }\n\n  const options: EChartsOption = {\n    dataset: dataset,\n    series: series,\n  };\n\n  if (contentDimensions === undefined) return null;\n\n  return (\n    <div data-testid=\"ScatterChartPanel_ScatterPlot\">\n      <Scatterplot\n        width={contentDimensions.width}\n        height={contentDimensions.height}\n        options={options}\n        link={spec.link}\n      />\n    </div>\n  );\n}\n\n// exported for tests\nexport function getSymbolSize(\n  spanCount: number,\n  spanCountRange: [number, number],\n  sizeRange: [number, number]\n): number {\n  const [minSize, maxSize] = sizeRange;\n  const [minSpanCount, maxSpanCount] = spanCountRange;\n\n  // catch divison by zero\n  if (maxSpanCount - minSpanCount === 0) {\n    return maxSize;\n  }\n\n  // apply linear scale of spanCount from range [minSpanCount,maxSpanCount] to a value from range [minSize,maxSize]\n  const rel = (spanCount - minSpanCount) / (maxSpanCount - minSpanCount);\n  return minSize + (maxSize - minSize) * rel;\n}\n"],"names":["useMemo","NoDataOverlay","useChartsTheme","Scatterplot","DEFAULT_SIZE_RANGE","ScatterChartPanel","props","spec","contentDimensions","queryResults","traceResults","chartsTheme","defaultColor","thresholds","sizeRange","dataset","minSpanCount","maxSpanCount","result","data","searchResult","undefined","dataSeries","map","trace","spanCount","errorCount","stats","Object","values","serviceStats","pluginSpec","definition","plugin","newTraceValue","linkVariables","datasourceName","datasource","name","traceId","rootServiceName","rootTraceName","startTime","Date","startTimeUnixMs","push","source","series","seriesTemplate2","type","encode","x","y","symbolSize","getSymbolSize","itemStyle","color","params","traceData","i","length","datasetIndex","tracesFound","some","resource","options","div","data-testid","width","height","link","spanCountRange","minSize","maxSize","rel"],"mappings":"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"}
+{"version":3,"sources":["../../src/ScatterChartPanel.tsx"],"sourcesContent":["// Copyright The Perses Authors\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\nimport { PanelProps } from '@perses-dev/plugin-system';\nimport { ReactElement, useMemo } from 'react';\nimport { EChartsOption, SeriesOption } from 'echarts';\nimport { NoDataOverlay, useChartsTheme } from '@perses-dev/components';\nimport { TraceData, TraceSearchResult } from '@perses-dev/spec';\nimport { Scatterplot } from './Scatterplot';\nimport { ScatterChartOptions } from './scatter-chart-model';\n\nexport interface EChartTraceValue extends Omit<TraceSearchResult, 'startTimeUnixMs' | 'serviceStats'> {\n  name: string;\n  linkVariables: Record<string, string>;\n  startTime: Date;\n  spanCount: number;\n  errorCount: number;\n}\n\nexport type ScatterChartPanelProps = PanelProps<ScatterChartOptions, TraceData>;\n\n/** default size range of the circles diameter */\nconst DEFAULT_SIZE_RANGE: [number, number] = [6, 20];\n\n/**\n * ScatterChartPanel receives data from the DataQueriesProvider and transforms it\n * into a `dataset` object that Apache ECharts can consume. Additionally,\n * data formatting is also dictated in this component. Formatting includes\n * datapoint size and color.\n *\n * Documentation for data structures accepted by Apache ECharts:\n *  https://echarts.apache.org/handbook/en/concepts/dataset\n *\n * Examples for scatter chart formatting in Apache ECharts:\n *  https://echarts.apache.org/examples/en/index.html#chart-type-scatter\n *\n * @returns a `ScatterPlot` component that contains an EChart which will handle\n * visualization of the data.\n */\nexport function ScatterChartPanel(props: ScatterChartPanelProps): ReactElement | null {\n  const { spec, contentDimensions, queryResults: traceResults } = props;\n  const chartsTheme = useChartsTheme();\n  const defaultColor = chartsTheme.thresholds.defaultColor || 'blue';\n  const sizeRange = spec.sizeRange || DEFAULT_SIZE_RANGE;\n\n  // Generate dataset\n  // Transform Tempo API response to fit 'dataset' structure from Apache ECharts\n  // https://echarts.apache.org/handbook/en/concepts/dataset\n  const { dataset, minSpanCount, maxSpanCount } = useMemo(() => {\n    const dataset = [];\n    let minSpanCount: number | undefined;\n    let maxSpanCount: number | undefined;\n    for (const result of traceResults) {\n      if (result.data.searchResult === undefined) continue;\n      const dataSeries = result.data.searchResult.map((trace) => {\n        let spanCount = 0;\n        let errorCount = 0;\n        for (const stats of Object.values(trace.serviceStats)) {\n          spanCount += stats.spanCount;\n          errorCount += stats.errorCount ?? 0;\n        }\n\n        if (minSpanCount === undefined || spanCount < minSpanCount) {\n          minSpanCount = spanCount;\n        }\n        if (maxSpanCount === undefined || spanCount > maxSpanCount) {\n          maxSpanCount = spanCount;\n        }\n\n        const pluginSpec = result.definition.spec.plugin.spec as { datasource?: { name?: string } } | undefined;\n        const newTraceValue: EChartTraceValue = {\n          ...trace,\n          linkVariables: {\n            datasourceName: pluginSpec?.datasource?.name ?? '',\n            traceId: trace.traceId,\n          },\n          name: `${trace.rootServiceName}: ${trace.rootTraceName}`,\n          startTime: new Date(trace.startTimeUnixMs), // convert unix epoch time to Date\n          spanCount,\n          errorCount,\n        };\n        return newTraceValue;\n      });\n      dataset.push({\n        source: dataSeries,\n      });\n    }\n    return { dataset, minSpanCount: minSpanCount ?? 0, maxSpanCount: maxSpanCount ?? 0 };\n  }, [traceResults]);\n\n  // Formatting for the dataset\n  // 1. Map x,y coordinates\n  // 2. Datapoint size corresponds to the number of spans in a trace\n  // 3. Color datapoint red if the trace contains an error\n  const series = useMemo(() => {\n    const seriesTemplate2: SeriesOption = {\n      type: 'scatter',\n      encode: {\n        // Map to x-axis.\n        x: 'startTime',\n        // Map to y-axis.\n        y: 'durationMs',\n      },\n      symbolSize: function (data) {\n        // returns the diameter of the circles\n        return getSymbolSize(data.spanCount, [minSpanCount, maxSpanCount], sizeRange);\n      },\n      itemStyle: {\n        color: function (params) {\n          const traceData: EChartTraceValue = params.data as EChartTraceValue;\n          // If the trace contains an error, color the datapoint in red\n          if (traceData.errorCount > 0) {\n            return 'red';\n          }\n          // Else return default color\n          return defaultColor;\n        },\n      },\n    };\n\n    // Each data set needs to have a corresponding series formatting object\n    const series = [];\n    for (let i = 0; i < dataset.length; i++) {\n      series.push({ ...seriesTemplate2, datasetIndex: i });\n    }\n    return series;\n  }, [dataset, defaultColor, minSpanCount, maxSpanCount, sizeRange]);\n\n  const tracesFound = traceResults.some((traceData) => (traceData.data?.searchResult ?? []).length > 0);\n  if (!tracesFound) {\n    return <NoDataOverlay resource=\"traces\" />;\n  }\n\n  const options: EChartsOption = {\n    dataset: dataset,\n    series: series,\n  };\n\n  if (contentDimensions === undefined) return null;\n\n  return (\n    <div data-testid=\"ScatterChartPanel_ScatterPlot\">\n      <Scatterplot\n        width={contentDimensions.width}\n        height={contentDimensions.height}\n        options={options}\n        link={spec.link}\n      />\n    </div>\n  );\n}\n\n// exported for tests\nexport function getSymbolSize(\n  spanCount: number,\n  spanCountRange: [number, number],\n  sizeRange: [number, number]\n): number {\n  const [minSize, maxSize] = sizeRange;\n  const [minSpanCount, maxSpanCount] = spanCountRange;\n\n  // catch divison by zero\n  if (maxSpanCount - minSpanCount === 0) {\n    return maxSize;\n  }\n\n  // apply linear scale of spanCount from range [minSpanCount,maxSpanCount] to a value from range [minSize,maxSize]\n  const rel = (spanCount - minSpanCount) / (maxSpanCount - minSpanCount);\n  return minSize + (maxSize - minSize) * rel;\n}\n"],"names":["useMemo","NoDataOverlay","useChartsTheme","Scatterplot","DEFAULT_SIZE_RANGE","ScatterChartPanel","props","spec","contentDimensions","queryResults","traceResults","chartsTheme","defaultColor","thresholds","sizeRange","dataset","minSpanCount","maxSpanCount","result","data","searchResult","undefined","dataSeries","map","trace","spanCount","errorCount","stats","Object","values","serviceStats","pluginSpec","definition","plugin","newTraceValue","linkVariables","datasourceName","datasource","name","traceId","rootServiceName","rootTraceName","startTime","Date","startTimeUnixMs","push","source","series","seriesTemplate2","type","encode","x","y","symbolSize","getSymbolSize","itemStyle","color","params","traceData","i","length","datasetIndex","tracesFound","some","resource","options","div","data-testid","width","height","link","spanCountRange","minSize","maxSize","rel"],"mappings":"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"}

package/lib/Scatterplot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Scatterplot.d.ts","sourceRoot":"","sources":["../../src/Scatterplot.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAa9C,OAAO,EAAE,aAAa,EAAuB,MAAM,SAAS,CAAC;AAqB7D,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,aAAa,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAOD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAoFjE"}
+{"version":3,"file":"Scatterplot.d.ts","sourceRoot":"","sources":["../../src/Scatterplot.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAa9C,OAAO,EAAE,aAAa,EAAuB,MAAM,SAAS,CAAC;AAoB7D,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,aAAa,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAOD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAoFjE"}

package/lib/Scatterplot.js

@@ -12,12 +12,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useMemo } from 'react';
-import { EChart, useChartsTheme } from '@perses-dev/components';
+import { EChart, formatValue, useChartsTheme } from '@perses-dev/components';
 import { use } from 'echarts/core';
 import { ScatterChart as EChartsScatterChart } from 'echarts/charts';
 import { DatasetComponent, DataZoomComponent, LegendComponent, GridComponent, TitleComponent, TooltipComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
-import { formatValue } from '@perses-dev/core';
 import { replaceVariablesInString, useAllVariableValues, useRouterContext, useTimeRange } from '@perses-dev/plugin-system';
 use([
     DatasetComponent,

package/lib/Scatterplot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Scatterplot.tsx"],"sourcesContent":["// Copyright The Perses Authors\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\nimport { ReactElement, useMemo } from 'react';\nimport { EChart, OnEventsType, useChartsTheme } from '@perses-dev/components';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { ScatterChart as EChartsScatterChart } from 'echarts/charts';\nimport {\n  DatasetComponent,\n  DataZoomComponent,\n  LegendComponent,\n  GridComponent,\n  TitleComponent,\n  TooltipComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChartsOption, ScatterSeriesOption } from 'echarts';\nimport { formatValue } from '@perses-dev/core';\nimport {\n  replaceVariablesInString,\n  useAllVariableValues,\n  useRouterContext,\n  useTimeRange,\n} from '@perses-dev/plugin-system';\nimport { EChartTraceValue } from './ScatterChartPanel';\n\nuse([\n  DatasetComponent,\n  DataZoomComponent,\n  LegendComponent,\n  EChartsScatterChart,\n  GridComponent,\n  TitleComponent,\n  TooltipComponent,\n  CanvasRenderer,\n]);\n\nexport interface ScatterplotProps {\n  width: number;\n  height: number;\n  options: EChartsOption;\n  link?: string;\n}\n\nconst DATE_FORMATTER = new Intl.DateTimeFormat(undefined, {\n  dateStyle: 'long',\n  timeStyle: 'medium',\n}).format;\n\nexport function Scatterplot(props: ScatterplotProps): ReactElement {\n  const { width, height, options, link: linkTemplate } = props;\n  const chartsTheme = useChartsTheme();\n  const { absoluteTimeRange } = useTimeRange();\n  const variableValues = useAllVariableValues();\n  const { navigate } = useRouterContext();\n\n  // Apache EChart Options Docs: https://echarts.apache.org/en/option.html\n  const eChartOptions: EChartsCoreOption = {\n    dataset: options.dataset,\n    series: options.series,\n    dataZoom: options.dataZoom,\n    grid: {\n      top: 45,\n      bottom: 20,\n      left: 30,\n      right: 20,\n    },\n    xAxis: {\n      type: 'time',\n      min: absoluteTimeRange.start,\n      max: absoluteTimeRange.end,\n    },\n    yAxis: {\n      scale: true,\n      type: 'value',\n      name: 'Duration',\n      splitNumber: 4,\n      axisLabel: {\n        formatter: (durationMs: number) => formatValue(durationMs, { unit: 'milliseconds' }),\n      },\n    },\n    animation: false,\n    tooltip: {\n      padding: 5,\n      borderWidth: 1,\n      trigger: 'axis',\n      axisPointer: {\n        type: 'cross',\n      },\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      formatter: function (params: any) {\n        // TODO: import type from ECharts instead of using any\n        const data = params[0].data as EChartTraceValue;\n        return [\n          `<b>Service name</b>: ${data.rootServiceName}<br/>`,\n          `<b>Span name</b>: ${data.rootTraceName}<br/>`,\n          `<b>Time</b>: ${DATE_FORMATTER(data.startTime)}<br/>`,\n          `<b>Duration</b>: ${formatValue(data.durationMs, { unit: 'milliseconds' })}<br/>`,\n          `<b>Span count</b>: ${data.spanCount} (${data.errorCount} errors)<br/>`,\n        ].join('');\n      },\n    },\n    legend: {\n      show: true,\n      type: 'scroll',\n      orient: 'horizontal',\n      bottom: 0,\n    },\n  };\n\n  const handleEvents: OnEventsType<ScatterSeriesOption['data'] | unknown> = useMemo(() => {\n    const handlers: OnEventsType<ScatterSeriesOption['data'] | unknown> = {};\n    if (navigate && linkTemplate) {\n      handlers.click = (params): void => {\n        const linkVariables = params.data.linkVariables as Record<string, string> | undefined;\n        const link = replaceVariablesInString(linkTemplate, variableValues, linkVariables);\n        navigate(link);\n      };\n    }\n    return handlers;\n  }, [linkTemplate, navigate, variableValues]);\n\n  return (\n    <EChart\n      style={{\n        width: width,\n        height: height,\n      }}\n      option={eChartOptions}\n      theme={chartsTheme.echartsTheme}\n      onEvents={handleEvents}\n    />\n  );\n}\n"],"names":["useMemo","EChart","useChartsTheme","use","ScatterChart","EChartsScatterChart","DatasetComponent","DataZoomComponent","LegendComponent","GridComponent","TitleComponent","TooltipComponent","CanvasRenderer","formatValue","replaceVariablesInString","useAllVariableValues","useRouterContext","useTimeRange","DATE_FORMATTER","Intl","DateTimeFormat","undefined","dateStyle","timeStyle","format","Scatterplot","props","width","height","options","link","linkTemplate","chartsTheme","absoluteTimeRange","variableValues","navigate","eChartOptions","dataset","series","dataZoom","grid","top","bottom","left","right","xAxis","type","min","start","max","end","yAxis","scale","name","splitNumber","axisLabel","formatter","durationMs","unit","animation","tooltip","padding","borderWidth","trigger","axisPointer","params","data","rootServiceName","rootTraceName","startTime","spanCount","errorCount","join","legend","show","orient","handleEvents","handlers","click","linkVariables","style","option","theme","echartsTheme","onEvents"],"mappings":"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"}
+{"version":3,"sources":["../../src/Scatterplot.tsx"],"sourcesContent":["// Copyright The Perses Authors\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\nimport { ReactElement, useMemo } from 'react';\nimport { EChart, formatValue, OnEventsType, useChartsTheme } from '@perses-dev/components';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { ScatterChart as EChartsScatterChart } from 'echarts/charts';\nimport {\n  DatasetComponent,\n  DataZoomComponent,\n  LegendComponent,\n  GridComponent,\n  TitleComponent,\n  TooltipComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChartsOption, ScatterSeriesOption } from 'echarts';\nimport {\n  replaceVariablesInString,\n  useAllVariableValues,\n  useRouterContext,\n  useTimeRange,\n} from '@perses-dev/plugin-system';\nimport { EChartTraceValue } from './ScatterChartPanel';\n\nuse([\n  DatasetComponent,\n  DataZoomComponent,\n  LegendComponent,\n  EChartsScatterChart,\n  GridComponent,\n  TitleComponent,\n  TooltipComponent,\n  CanvasRenderer,\n]);\n\nexport interface ScatterplotProps {\n  width: number;\n  height: number;\n  options: EChartsOption;\n  link?: string;\n}\n\nconst DATE_FORMATTER = new Intl.DateTimeFormat(undefined, {\n  dateStyle: 'long',\n  timeStyle: 'medium',\n}).format;\n\nexport function Scatterplot(props: ScatterplotProps): ReactElement {\n  const { width, height, options, link: linkTemplate } = props;\n  const chartsTheme = useChartsTheme();\n  const { absoluteTimeRange } = useTimeRange();\n  const variableValues = useAllVariableValues();\n  const { navigate } = useRouterContext();\n\n  // Apache EChart Options Docs: https://echarts.apache.org/en/option.html\n  const eChartOptions: EChartsCoreOption = {\n    dataset: options.dataset,\n    series: options.series,\n    dataZoom: options.dataZoom,\n    grid: {\n      top: 45,\n      bottom: 20,\n      left: 30,\n      right: 20,\n    },\n    xAxis: {\n      type: 'time',\n      min: absoluteTimeRange.start,\n      max: absoluteTimeRange.end,\n    },\n    yAxis: {\n      scale: true,\n      type: 'value',\n      name: 'Duration',\n      splitNumber: 4,\n      axisLabel: {\n        formatter: (durationMs: number) => formatValue(durationMs, { unit: 'milliseconds' }),\n      },\n    },\n    animation: false,\n    tooltip: {\n      padding: 5,\n      borderWidth: 1,\n      trigger: 'axis',\n      axisPointer: {\n        type: 'cross',\n      },\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      formatter: function (params: any) {\n        // TODO: import type from ECharts instead of using any\n        const data = params[0].data as EChartTraceValue;\n        return [\n          `<b>Service name</b>: ${data.rootServiceName}<br/>`,\n          `<b>Span name</b>: ${data.rootTraceName}<br/>`,\n          `<b>Time</b>: ${DATE_FORMATTER(data.startTime)}<br/>`,\n          `<b>Duration</b>: ${formatValue(data.durationMs, { unit: 'milliseconds' })}<br/>`,\n          `<b>Span count</b>: ${data.spanCount} (${data.errorCount} errors)<br/>`,\n        ].join('');\n      },\n    },\n    legend: {\n      show: true,\n      type: 'scroll',\n      orient: 'horizontal',\n      bottom: 0,\n    },\n  };\n\n  const handleEvents: OnEventsType<ScatterSeriesOption['data'] | unknown> = useMemo(() => {\n    const handlers: OnEventsType<ScatterSeriesOption['data'] | unknown> = {};\n    if (navigate && linkTemplate) {\n      handlers.click = (params): void => {\n        const linkVariables = params.data.linkVariables as Record<string, string> | undefined;\n        const link = replaceVariablesInString(linkTemplate, variableValues, linkVariables);\n        navigate(link);\n      };\n    }\n    return handlers;\n  }, [linkTemplate, navigate, variableValues]);\n\n  return (\n    <EChart\n      style={{\n        width: width,\n        height: height,\n      }}\n      option={eChartOptions}\n      theme={chartsTheme.echartsTheme}\n      onEvents={handleEvents}\n    />\n  );\n}\n"],"names":["useMemo","EChart","formatValue","useChartsTheme","use","ScatterChart","EChartsScatterChart","DatasetComponent","DataZoomComponent","LegendComponent","GridComponent","TitleComponent","TooltipComponent","CanvasRenderer","replaceVariablesInString","useAllVariableValues","useRouterContext","useTimeRange","DATE_FORMATTER","Intl","DateTimeFormat","undefined","dateStyle","timeStyle","format","Scatterplot","props","width","height","options","link","linkTemplate","chartsTheme","absoluteTimeRange","variableValues","navigate","eChartOptions","dataset","series","dataZoom","grid","top","bottom","left","right","xAxis","type","min","start","max","end","yAxis","scale","name","splitNumber","axisLabel","formatter","durationMs","unit","animation","tooltip","padding","borderWidth","trigger","axisPointer","params","data","rootServiceName","rootTraceName","startTime","spanCount","errorCount","join","legend","show","orient","handleEvents","handlers","click","linkVariables","style","option","theme","echartsTheme","onEvents"],"mappings":"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"}

package/lib/cjs/Scatterplot.js

@@ -27,7 +27,6 @@ const _core = require("echarts/core");
 const _charts = require("echarts/charts");
 const _components1 = require("echarts/components");
 const _renderers = require("echarts/renderers");
-const _core1 = require("@perses-dev/core");
 const _pluginsystem = require("@perses-dev/plugin-system");
 (0, _core.use)([
     _components1.DatasetComponent,
@@ -71,7 +70,7 @@ function Scatterplot(props) {
             name: 'Duration',
             splitNumber: 4,
             axisLabel: {
-                formatter: (durationMs)=>(0, _core1.formatValue)(durationMs, {
+                formatter: (durationMs)=>(0, _components.formatValue)(durationMs, {
                         unit: 'milliseconds'
                     })
             }
@@ -92,7 +91,7 @@ function Scatterplot(props) {
                     `<b>Service name</b>: ${data.rootServiceName}<br/>`,
                     `<b>Span name</b>: ${data.rootTraceName}<br/>`,
                     `<b>Time</b>: ${DATE_FORMATTER(data.startTime)}<br/>`,
-                    `<b>Duration</b>: ${(0, _core1.formatValue)(data.durationMs, {
+                    `<b>Duration</b>: ${(0, _components.formatValue)(data.durationMs, {
                         unit: 'milliseconds'
                     })}<br/>`,
                     `<b>Span count</b>: ${data.spanCount} (${data.errorCount} errors)<br/>`

package/lib/mock-trace-data.d.ts

@@ -1,4 +1,4 @@
-import { TraceData } from '@perses-dev/core';
+import { TraceData } from '@perses-dev/spec';
 /**
  * Mock data we get from getTraceData() in @perses/tempo-plugin.
  */

package/lib/mock-trace-data.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/mock-trace-data.ts"],"sourcesContent":["// Copyright The Perses Authors\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\nimport { TraceData } from '@perses-dev/core';\n\n/**\n * Mock data we get from getTraceData() in @perses/tempo-plugin.\n */\nexport const MOCK_TRACE_SEARCH_RESULT: TraceData = {\n  searchResult: [\n    {\n      startTimeUnixMs: 1702915645000, // unix epoch time in milliseconds\n      durationMs: 100,\n      serviceStats: {\n        'service-name': {\n          spanCount: 10,\n        },\n        'second-service-name': {\n          spanCount: 3,\n          errorCount: 2,\n        },\n      },\n      traceId: '123',\n      rootServiceName: 'service-name',\n      rootTraceName: 'span-name',\n    },\n  ],\n  metadata: {\n    executedQueryString: '{duration > 500ms}',\n  },\n};\n\nexport const MOCK_TRACE_SEARCH_RESULT_EMPTY: TraceData = {\n  searchResult: [],\n  metadata: {\n    executedQueryString: '{duration > 500ms}',\n  },\n};\n\n/**\n * Mocks results obtained from useTraceQueries() in @perses/plugin-system/runtime.\n * This function uses then React TanStack function useQueries(fooQuery) to\n * handle fetching.\n */\nexport const MOCK_TRACE_SEARCH_RESULT_QUERY_RESULT = [\n  {\n    status: 'success',\n    fetchStatus: 'idle',\n    isLoading: false,\n    isSuccess: true,\n    isError: false,\n    data: MOCK_TRACE_SEARCH_RESULT,\n    dataUpdatedAt: 1666500979895,\n    definition: {\n      kind: 'TraceQuery',\n      spec: {\n        plugin: {\n          kind: 'TempoTraceQuery',\n          spec: {\n            query: '{}',\n            datasource: {\n              kind: 'TempoDatasource',\n              name: 'tempolocal',\n            },\n          },\n        },\n      },\n    },\n    error: null,\n    errorUpdatedAt: 0,\n    failureCount: 0,\n    errorUpdateCount: 0,\n    isFetched: true,\n    isFetchedAfterMount: true,\n    isFetching: false,\n    isRefetching: false,\n    isLoadingError: false,\n    isPaused: false,\n    isPlaceholderData: false,\n    isPreviousData: false,\n    isRefetchError: false,\n    isStale: true,\n  },\n];\n\nexport const MOCK_TRACE_SEARCH_RESULT_QUERY_RESULT_EMPTY = [\n  {\n    status: 'success',\n    fetchStatus: 'idle',\n    isLoading: false,\n    isSuccess: true,\n    isError: false,\n    data: MOCK_TRACE_SEARCH_RESULT_EMPTY,\n    dataUpdatedAt: 1666500979895,\n    definition: {\n      kind: 'TraceQuery',\n      spec: {\n        plugin: {\n          kind: 'TempoTraceQuery',\n          spec: {\n            query: '{}',\n            datasource: {\n              kind: 'TempoDatasource',\n              name: 'tempolocal',\n            },\n          },\n        },\n      },\n    },\n    error: null,\n    errorUpdatedAt: 0,\n    failureCount: 0,\n    errorUpdateCount: 0,\n    isFetched: true,\n    isFetchedAfterMount: true,\n    isFetching: false,\n    isRefetching: false,\n    isLoadingError: false,\n    isPaused: false,\n    isPlaceholderData: false,\n    isPreviousData: false,\n    isRefetchError: false,\n    isStale: true,\n  },\n];\n"],"names":["MOCK_TRACE_SEARCH_RESULT","searchResult","startTimeUnixMs","durationMs","serviceStats","spanCount","errorCount","traceId","rootServiceName","rootTraceName","metadata","executedQueryString","MOCK_TRACE_SEARCH_RESULT_EMPTY","MOCK_TRACE_SEARCH_RESULT_QUERY_RESULT","status","fetchStatus","isLoading","isSuccess","isError","data","dataUpdatedAt","definition","kind","spec","plugin","query","datasource","name","error","errorUpdatedAt","failureCount","errorUpdateCount","isFetched","isFetchedAfterMount","isFetching","isRefetching","isLoadingError","isPaused","isPlaceholderData","isPreviousData","isRefetchError","isStale","MOCK_TRACE_SEARCH_RESULT_QUERY_RESULT_EMPTY"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAIjC;;CAEC,GACD,OAAO,MAAMA,2BAAsC;IACjDC,cAAc;QACZ;YACEC,iBAAiB;YACjBC,YAAY;YACZC,cAAc;gBACZ,gBAAgB;oBACdC,WAAW;gBACb;gBACA,uBAAuB;oBACrBA,WAAW;oBACXC,YAAY;gBACd;YACF;YACAC,SAAS;YACTC,iBAAiB;YACjBC,eAAe;QACjB;KACD;IACDC,UAAU;QACRC,qBAAqB;IACvB;AACF,EAAE;AAEF,OAAO,MAAMC,iCAA4C;IACvDX,cAAc,EAAE;IAChBS,UAAU;QACRC,qBAAqB;IACvB;AACF,EAAE;AAEF;;;;CAIC,GACD,OAAO,MAAME,wCAAwC;IACnD;QACEC,QAAQ;QACRC,aAAa;QACbC,WAAW;QACXC,WAAW;QACXC,SAAS;QACTC,MAAMnB;QACNoB,eAAe;QACfC,YAAY;YACVC,MAAM;YACNC,MAAM;gBACJC,QAAQ;oBACNF,MAAM;oBACNC,MAAM;wBACJE,OAAO;wBACPC,YAAY;4BACVJ,MAAM;4BACNK,MAAM;wBACR;oBACF;gBACF;YACF;QACF;QACAC,OAAO;QACPC,gBAAgB;QAChBC,cAAc;QACdC,kBAAkB;QAClBC,WAAW;QACXC,qBAAqB;QACrBC,YAAY;QACZC,cAAc;QACdC,gBAAgB;QAChBC,UAAU;QACVC,mBAAmB;QACnBC,gBAAgB;QAChBC,gBAAgB;QAChBC,SAAS;IACX;CACD,CAAC;AAEF,OAAO,MAAMC,8CAA8C;IACzD;QACE5B,QAAQ;QACRC,aAAa;QACbC,WAAW;QACXC,WAAW;QACXC,SAAS;QACTC,MAAMP;QACNQ,eAAe;QACfC,YAAY;YACVC,MAAM;YACNC,MAAM;gBACJC,QAAQ;oBACNF,MAAM;oBACNC,MAAM;wBACJE,OAAO;wBACPC,YAAY;4BACVJ,MAAM;4BACNK,MAAM;wBACR;oBACF;gBACF;YACF;QACF;QACAC,OAAO;QACPC,gBAAgB;QAChBC,cAAc;QACdC,kBAAkB;QAClBC,WAAW;QACXC,qBAAqB;QACrBC,YAAY;QACZC,cAAc;QACdC,gBAAgB;QAChBC,UAAU;QACVC,mBAAmB;QACnBC,gBAAgB;QAChBC,gBAAgB;QAChBC,SAAS;IACX;CACD,CAAC"}
+{"version":3,"sources":["../../src/mock-trace-data.ts"],"sourcesContent":["// Copyright The Perses Authors\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\nimport { TraceData } from '@perses-dev/spec';\n\n/**\n * Mock data we get from getTraceData() in @perses/tempo-plugin.\n */\nexport const MOCK_TRACE_SEARCH_RESULT: TraceData = {\n  searchResult: [\n    {\n      startTimeUnixMs: 1702915645000, // unix epoch time in milliseconds\n      durationMs: 100,\n      serviceStats: {\n        'service-name': {\n          spanCount: 10,\n        },\n        'second-service-name': {\n          spanCount: 3,\n          errorCount: 2,\n        },\n      },\n      traceId: '123',\n      rootServiceName: 'service-name',\n      rootTraceName: 'span-name',\n    },\n  ],\n  metadata: {\n    executedQueryString: '{duration > 500ms}',\n  },\n};\n\nexport const MOCK_TRACE_SEARCH_RESULT_EMPTY: TraceData = {\n  searchResult: [],\n  metadata: {\n    executedQueryString: '{duration > 500ms}',\n  },\n};\n\n/**\n * Mocks results obtained from useTraceQueries() in @perses/plugin-system/runtime.\n * This function uses then React TanStack function useQueries(fooQuery) to\n * handle fetching.\n */\nexport const MOCK_TRACE_SEARCH_RESULT_QUERY_RESULT = [\n  {\n    status: 'success',\n    fetchStatus: 'idle',\n    isLoading: false,\n    isSuccess: true,\n    isError: false,\n    data: MOCK_TRACE_SEARCH_RESULT,\n    dataUpdatedAt: 1666500979895,\n    definition: {\n      kind: 'TraceQuery',\n      spec: {\n        plugin: {\n          kind: 'TempoTraceQuery',\n          spec: {\n            query: '{}',\n            datasource: {\n              kind: 'TempoDatasource',\n              name: 'tempolocal',\n            },\n          },\n        },\n      },\n    },\n    error: null,\n    errorUpdatedAt: 0,\n    failureCount: 0,\n    errorUpdateCount: 0,\n    isFetched: true,\n    isFetchedAfterMount: true,\n    isFetching: false,\n    isRefetching: false,\n    isLoadingError: false,\n    isPaused: false,\n    isPlaceholderData: false,\n    isPreviousData: false,\n    isRefetchError: false,\n    isStale: true,\n  },\n];\n\nexport const MOCK_TRACE_SEARCH_RESULT_QUERY_RESULT_EMPTY = [\n  {\n    status: 'success',\n    fetchStatus: 'idle',\n    isLoading: false,\n    isSuccess: true,\n    isError: false,\n    data: MOCK_TRACE_SEARCH_RESULT_EMPTY,\n    dataUpdatedAt: 1666500979895,\n    definition: {\n      kind: 'TraceQuery',\n      spec: {\n        plugin: {\n          kind: 'TempoTraceQuery',\n          spec: {\n            query: '{}',\n            datasource: {\n              kind: 'TempoDatasource',\n              name: 'tempolocal',\n            },\n          },\n        },\n      },\n    },\n    error: null,\n    errorUpdatedAt: 0,\n    failureCount: 0,\n    errorUpdateCount: 0,\n    isFetched: true,\n    isFetchedAfterMount: true,\n    isFetching: false,\n    isRefetching: false,\n    isLoadingError: false,\n    isPaused: false,\n    isPlaceholderData: false,\n    isPreviousData: false,\n    isRefetchError: false,\n    isStale: true,\n  },\n];\n"],"names":["MOCK_TRACE_SEARCH_RESULT","searchResult","startTimeUnixMs","durationMs","serviceStats","spanCount","errorCount","traceId","rootServiceName","rootTraceName","metadata","executedQueryString","MOCK_TRACE_SEARCH_RESULT_EMPTY","MOCK_TRACE_SEARCH_RESULT_QUERY_RESULT","status","fetchStatus","isLoading","isSuccess","isError","data","dataUpdatedAt","definition","kind","spec","plugin","query","datasource","name","error","errorUpdatedAt","failureCount","errorUpdateCount","isFetched","isFetchedAfterMount","isFetching","isRefetching","isLoadingError","isPaused","isPlaceholderData","isPreviousData","isRefetchError","isStale","MOCK_TRACE_SEARCH_RESULT_QUERY_RESULT_EMPTY"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAIjC;;CAEC,GACD,OAAO,MAAMA,2BAAsC;IACjDC,cAAc;QACZ;YACEC,iBAAiB;YACjBC,YAAY;YACZC,cAAc;gBACZ,gBAAgB;oBACdC,WAAW;gBACb;gBACA,uBAAuB;oBACrBA,WAAW;oBACXC,YAAY;gBACd;YACF;YACAC,SAAS;YACTC,iBAAiB;YACjBC,eAAe;QACjB;KACD;IACDC,UAAU;QACRC,qBAAqB;IACvB;AACF,EAAE;AAEF,OAAO,MAAMC,iCAA4C;IACvDX,cAAc,EAAE;IAChBS,UAAU;QACRC,qBAAqB;IACvB;AACF,EAAE;AAEF;;;;CAIC,GACD,OAAO,MAAME,wCAAwC;IACnD;QACEC,QAAQ;QACRC,aAAa;QACbC,WAAW;QACXC,WAAW;QACXC,SAAS;QACTC,MAAMnB;QACNoB,eAAe;QACfC,YAAY;YACVC,MAAM;YACNC,MAAM;gBACJC,QAAQ;oBACNF,MAAM;oBACNC,MAAM;wBACJE,OAAO;wBACPC,YAAY;4BACVJ,MAAM;4BACNK,MAAM;wBACR;oBACF;gBACF;YACF;QACF;QACAC,OAAO;QACPC,gBAAgB;QAChBC,cAAc;QACdC,kBAAkB;QAClBC,WAAW;QACXC,qBAAqB;QACrBC,YAAY;QACZC,cAAc;QACdC,gBAAgB;QAChBC,UAAU;QACVC,mBAAmB;QACnBC,gBAAgB;QAChBC,gBAAgB;QAChBC,SAAS;IACX;CACD,CAAC;AAEF,OAAO,MAAMC,8CAA8C;IACzD;QACE5B,QAAQ;QACRC,aAAa;QACbC,WAAW;QACXC,WAAW;QACXC,SAAS;QACTC,MAAMP;QACNQ,eAAe;QACfC,YAAY;YACVC,MAAM;YACNC,MAAM;gBACJC,QAAQ;oBACNF,MAAM;oBACNC,MAAM;wBACJE,OAAO;wBACPC,YAAY;4BACVJ,MAAM;4BACNK,MAAM;wBACR;oBACF;gBACF;YACF;QACF;QACAC,OAAO;QACPC,gBAAgB;QAChBC,cAAc;QACdC,kBAAkB;QAClBC,WAAW;QACXC,qBAAqB;QACrBC,YAAY;QACZC,cAAc;QACdC,gBAAgB;QAChBC,UAAU;QACVC,mBAAmB;QACnBC,gBAAgB;QAChBC,gBAAgB;QAChBC,SAAS;IACX;CACD,CAAC"}

package/lib/scatter-chart-model.d.ts

@@ -1,4 +1,4 @@
-import { UnknownSpec, QueryDefinition } from '@perses-dev/core';
+import { QueryDefinition, UnknownSpec } from '@perses-dev/spec';
 export type TraceQueryDefinition<PluginSpec = UnknownSpec> = QueryDefinition<'TraceQuery', PluginSpec>;
 /**
  * The Options object type supported by the ScatterChart panel plugin.

package/lib/scatter-chart-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scatter-chart-model.d.ts","sourceRoot":"","sources":["../../src/scatter-chart-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEhE,MAAM,MAAM,oBAAoB,CAAC,UAAU,GAAG,WAAW,IAAI,eAAe,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;AAEvG;;GAEG;AAKH,MAAM,WAAW,mBAAmB;IAClC,oCAAoC;IACpC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAE7B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,wBAAgB,gCAAgC,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAE1E"}
+{"version":3,"file":"scatter-chart-model.d.ts","sourceRoot":"","sources":["../../src/scatter-chart-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEhE,MAAM,MAAM,oBAAoB,CAAC,UAAU,GAAG,WAAW,IAAI,eAAe,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;AAEvG;;GAEG;AAKH,MAAM,WAAW,mBAAmB;IAClC,oCAAoC;IACpC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAE7B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,wBAAgB,gCAAgC,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAE1E"}

package/lib/scatter-chart-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/scatter-chart-model.ts"],"sourcesContent":["// Copyright The Perses Authors\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\nimport { UnknownSpec, QueryDefinition } from '@perses-dev/core';\n\nexport type TraceQueryDefinition<PluginSpec = UnknownSpec> = QueryDefinition<'TraceQuery', PluginSpec>;\n\n/**\n * The Options object type supported by the ScatterChart panel plugin.\n */\n// TODO: Add support for scatter chart formatting options.\n// Some scaffolding has been done to support formatting options.\n// This includes the interface below which still needs implementation.\n// Note: The interface attributes must match schemas/scatter.cue\nexport interface ScatterChartOptions {\n  /** range of the circles diameter */\n  sizeRange?: [number, number];\n\n  /**\n   * Where to navigate after clicking on a bubble.\n   * Supported variables: datasourceName, traceId\n   */\n  link?: string;\n}\n\n/**\n * Creates the initial/empty options for a ScatterChart panel.\n */\nexport function createInitialScatterChartOptions(): Record<string, unknown> {\n  return {};\n}\n"],"names":["createInitialScatterChartOptions"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAwBjC;;CAEC,GACD,OAAO,SAASA;IACd,OAAO,CAAC;AACV"}
+{"version":3,"sources":["../../src/scatter-chart-model.ts"],"sourcesContent":["// Copyright The Perses Authors\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\nimport { QueryDefinition, UnknownSpec } from '@perses-dev/spec';\n\nexport type TraceQueryDefinition<PluginSpec = UnknownSpec> = QueryDefinition<'TraceQuery', PluginSpec>;\n\n/**\n * The Options object type supported by the ScatterChart panel plugin.\n */\n// TODO: Add support for scatter chart formatting options.\n// Some scaffolding has been done to support formatting options.\n// This includes the interface below which still needs implementation.\n// Note: The interface attributes must match schemas/scatter.cue\nexport interface ScatterChartOptions {\n  /** range of the circles diameter */\n  sizeRange?: [number, number];\n\n  /**\n   * Where to navigate after clicking on a bubble.\n   * Supported variables: datasourceName, traceId\n   */\n  link?: string;\n}\n\n/**\n * Creates the initial/empty options for a ScatterChart panel.\n */\nexport function createInitialScatterChartOptions(): Record<string, unknown> {\n  return {};\n}\n"],"names":["createInitialScatterChartOptions"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAwBjC;;CAEC,GACD,OAAO,SAASA;IACd,OAAO,CAAC;AACV"}

package/mf-manifest.json

@@ -5,11 +5,11 @@
     "name": "ScatterChart",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.10.1",
+      "buildVersion": "0.11.0-beta.1",
       "buildName": "@perses-dev/scatter-chart-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/ScatterChart.0bee6e96.js",
+      "name": "__mf/js/ScatterChart.fe45b695.js",
       "path": "",
       "type": "global"
     },
@@ -20,8 +20,7 @@
       "api": ""
     },
     "globalName": "ScatterChart",
-    "pluginVersion": "0.21.6",
-    "prefetchInterface": false,
+    "pluginVersion": "2.4.0",
     "getPublicPath": "function() { const prefix = window.PERSES_PLUGIN_ASSETS_PATH || window.PERSES_APP_CONFIG?.api_prefix || \"\"; return prefix + \"/plugins/ScatterChart/\"; }"
   },
   "shared": [
@@ -35,34 +34,36 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/274.a99c9e5e.js"
+            "__mf/js/async/274.c3bd8521.js"
           ]
         },
         "css": {
           "async": [],
           "sync": []
         }
-      }
+      },
+      "fallback": ""
     },
     {
       "id": "ScatterChart:@emotion/styled",
       "name": "@emotion/styled",
-      "version": "11.14.0",
+      "version": "11.14.1",
       "singleton": true,
-      "requiredVersion": "^11.14.0",
+      "requiredVersion": "^11.14.1",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/235.65b39c0b.js",
-            "__mf/js/async/616.f69792d9.js"
+            "__mf/js/async/235.0073450e.js",
+            "__mf/js/async/616.ca779190.js"
           ]
         },
         "css": {
           "async": [],
           "sync": []
         }
-      }
+      },
+      "fallback": ""
     },
     {
       "id": "ScatterChart:@hookform/resolvers",
@@ -74,53 +75,58 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/587.7d986455.js",
-            "__mf/js/async/968.fe693cc9.js"
+            "__mf/js/async/587.ccc8bcd4.js",
+            "__mf/js/async/968.9c716b09.js"
           ]
         },
         "css": {
           "async": [],
           "sync": []
         }
-      }
+      },
+      "fallback": ""
     },
     {
       "id": "ScatterChart:@perses-dev/components",
       "name": "@perses-dev/components",
-      "version": "0.53.1",
+      "version": "0.54.0-beta.3",
       "singleton": true,
-      "requiredVersion": "^0.53.1",
+      "requiredVersion": "^0.54.0-beta.3",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/901.23991dc9.js"
+            "__mf/js/async/236.56a42fac.js"
           ]
         },
         "css": {
           "async": [],
-          "sync": []
+          "sync": [
+            "__mf/css/async/236.85c2cbf6.css"
+          ]
         }
-      }
+      },
+      "fallback": ""
     },
     {
       "id": "ScatterChart:@perses-dev/plugin-system",
       "name": "@perses-dev/plugin-system",
-      "version": "0.53.1",
+      "version": "0.54.0-beta.3",
       "singleton": true,
-      "requiredVersion": "^0.53.1",
+      "requiredVersion": "^0.54.0-beta.3",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/634.0be66d7c.js"
+            "__mf/js/async/568.3fc50d63.js"
           ]
         },
         "css": {
           "async": [],
           "sync": []
         }
-      }
+      },
+      "fallback": ""
     },
     {
       "id": "ScatterChart:date-fns",
@@ -132,14 +138,15 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/192.bdbd0050.js"
+            "__mf/js/async/192.cab71340.js"
           ]
         },
         "css": {
           "async": [],
           "sync": []
         }
-      }
+      },
+      "fallback": ""
     },
     {
       "id": "ScatterChart:echarts",
@@ -151,33 +158,35 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/873.5e2131d5.js"
+            "__mf/js/async/873.4c238897.js"
           ]
         },
         "css": {
           "async": [],
           "sync": []
         }
-      }
+      },
+      "fallback": ""
     },
     {
       "id": "ScatterChart:lodash",
       "name": "lodash",
-      "version": "4.17.23",
+      "version": "4.18.1",
       "singleton": true,
-      "requiredVersion": "^4.17.23",
+      "requiredVersion": "^4.18.1",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/392.3493f5ea.js"
+            "__mf/js/async/392.2bf509f7.js"
           ]
         },
         "css": {
           "async": [],
           "sync": []
         }
-      }
+      },
+      "fallback": ""
     },
     {
       "id": "ScatterChart:react-dom",
@@ -189,14 +198,15 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/470.d8f8455f.js"
+            "__mf/js/async/470.7b99bd75.js"
           ]
         },
         "css": {
           "async": [],
           "sync": []
         }
-      }
+      },
+      "fallback": ""
     },
     {
       "id": "ScatterChart:react",
@@ -208,14 +218,15 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/121.3d737127.js"
+            "__mf/js/async/121.9aac62a4.js"
           ]
         },
         "css": {
           "async": [],
           "sync": []
         }
-      }
+      },
+      "fallback": ""
     },
     {
       "id": "ScatterChart:date-fns-tz",
@@ -227,14 +238,15 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/978.a16d507f.js"
+            "__mf/js/async/978.6ae2caad.js"
           ]
         },
         "css": {
           "async": [],
           "sync": []
         }
-      }
+      },
+      "fallback": ""
     }
   ],
   "remotes": [],
@@ -245,25 +257,23 @@
       "assets": {
         "js": {
           "sync": [
-            "__mf/js/async/110.81c0553c.js",
-            "__mf/js/async/414.63cec352.js",
-            "__mf/js/async/__federation_expose_ScatterChart.7325d09d.js"
+            "__mf/js/async/110.34eff628.js",
+            "__mf/js/async/__federation_expose_ScatterChart.0112e08c.js"
           ],
           "async": [
-            "__mf/js/async/588.ca097377.js",
-            "__mf/js/async/71.1f30dc06.js",
-            "__mf/js/async/356.b0eaf484.js",
-            "__mf/js/async/864.edd45634.js",
-            "__mf/js/async/659.1b8b8513.js",
-            "__mf/js/async/lib-router.67c25249.js",
-            "__mf/js/async/177.dcbc74ea.js"
+            "__mf/js/async/588.4db1394c.js",
+            "__mf/js/async/356.49c9bfe6.js",
+            "__mf/js/async/71.ae02ccc1.js",
+            "__mf/js/async/357.9293af22.js",
+            "__mf/js/async/659.9db1a9e6.js",
+            "__mf/js/async/lib-router.3e810b61.js",
+            "__mf/js/async/177.c9e9e666.js"
           ]
         },
         "css": {
           "sync": [],
           "async": [
-            "__mf/css/async/61.d3010b86.css",
-            "__mf/css/async/823.d3010b86.css"
+            "__mf/css/async/236.85c2cbf6.css"
           ]
         }
       },