@perses-dev/trace-table-plugin 0.8.2 → 0.9.1

package/lib/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DataTable.tsx"],"sourcesContent":["// Copyright 2024 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 { Avatar, Box, Chip, Link, Tooltip, Typography, useTheme } from '@mui/material';\nimport {\n  QueryDefinition,\n  ServiceStats,\n  TraceData,\n  TraceSearchResult,\n  formatDuration,\n  msToPrometheusDuration,\n} from '@perses-dev/core';\nimport { PanelData, replaceVariablesInString, useAllVariableValues, useRouterContext } from '@perses-dev/plugin-system';\nimport InformationIcon from 'mdi-material-ui/Information';\nimport { useChartsTheme } from '@perses-dev/components';\nimport { DataGrid, GridColDef } from '@mui/x-data-grid';\nimport { ReactElement, useCallback, useMemo } from 'react';\nimport { getServiceColor } from './utils/utils';\nimport { TraceTableOptions } from './trace-table-model';\n\nconst DATE_FORMATTER = new Intl.DateTimeFormat(undefined, {\n  dateStyle: 'long',\n  timeStyle: 'medium',\n}).format;\nconst UTC_DATE_FORMATTER = new Intl.DateTimeFormat(undefined, {\n  dateStyle: 'long',\n  timeStyle: 'long',\n  timeZone: 'UTC',\n}).format;\n\nexport type TraceLink = (params: { query: QueryDefinition; traceId: string }) => string;\n\nexport interface DataTableProps {\n  options: TraceTableOptions;\n  result: Array<PanelData<TraceData>>;\n}\n\ninterface Row extends TraceSearchResult {\n  traceLink?: string;\n}\n\nexport function DataTable(props: DataTableProps): ReactElement {\n  const { options, result } = props;\n  const muiTheme = useTheme();\n  const chartsTheme = useChartsTheme();\n  const variableValues = useAllVariableValues();\n\n  const paletteMode = options.visual?.palette?.mode;\n  const serviceColorGenerator = useCallback(\n    (serviceName: string) => getServiceColor(muiTheme, chartsTheme, paletteMode, serviceName),\n    [muiTheme, chartsTheme, paletteMode]\n  );\n\n  const rows: Row[] = [];\n  for (const query of result) {\n    const pluginSpec = query.definition.spec.plugin.spec as { datasource?: { name?: string } } | undefined;\n    const datasourceName = pluginSpec?.datasource?.name;\n\n    for (const trace of query.data?.searchResult || []) {\n      const traceLink = options.links?.trace\n        ? replaceVariablesInString(options.links.trace, variableValues, {\n            datasourceName: datasourceName ?? '',\n            traceId: trace.traceId,\n          })\n        : undefined;\n      rows.push({\n        ...trace,\n        traceLink,\n      });\n    }\n  }\n\n  const columns = useMemo<Array<GridColDef<Row>>>(\n    () => [\n      {\n        field: 'name',\n        headerName: 'Trace name',\n        type: 'string',\n        flex: 4,\n        display: 'flex',\n        valueGetter: (_, trace): string => `${trace.rootServiceName}: ${trace.rootTraceName}`,\n        renderCell: ({ row }): ReactElement => (\n          <Box sx={{ my: 1 }}>\n            <TraceName row={row} />\n            <br />\n            {Object.entries(row.serviceStats).map(([serviceName, stats]) => (\n              <ServiceChip\n                key={serviceName}\n                serviceName={serviceName}\n                stats={stats}\n                serviceColor={serviceColorGenerator(serviceName)}\n              />\n            ))}\n          </Box>\n        ),\n      },\n      {\n        field: 'spanCount',\n        headerName: 'Spans',\n        type: 'number',\n        headerAlign: 'left',\n        align: 'left',\n        flex: 2,\n        minWidth: 145,\n        display: 'flex',\n        valueGetter: (_, trace) => Object.values(trace.serviceStats).reduce((acc, val) => acc + val.spanCount, 0),\n        renderCell: ({ row }): ReactElement => {\n          let totalSpanCount = 0;\n          let totalErrorCount = 0;\n          for (const stats of Object.values(row.serviceStats)) {\n            totalSpanCount += stats.spanCount;\n            totalErrorCount += stats.errorCount ?? 0;\n          }\n          return (\n            <>\n              <Typography display=\"inline\">{totalSpanCount} spans</Typography>\n              {totalErrorCount > 0 && (\n                <Chip\n                  label={`${totalErrorCount} error${totalErrorCount === 1 ? '' : 's'}`}\n                  sx={{ marginLeft: '5px' }}\n                  icon={<InformationIcon />}\n                  variant=\"outlined\"\n                  size=\"small\"\n                  color=\"error\"\n                />\n              )}\n            </>\n          );\n        },\n      },\n      {\n        field: 'durationMs',\n        headerName: 'Duration',\n        type: 'number',\n        headerAlign: 'left',\n        align: 'left',\n        flex: 1,\n        minWidth: 70,\n        display: 'flex',\n        renderCell: ({ row }) => (\n          <Typography display=\"inline\">\n            {row.durationMs < 1 ? '<1ms' : formatDuration(msToPrometheusDuration(row.durationMs))}\n          </Typography>\n        ),\n      },\n      {\n        field: 'startTimeUnixMs',\n        headerName: 'Start time',\n        type: 'number',\n        headerAlign: 'left',\n        align: 'left',\n        flex: 3,\n        minWidth: 240,\n        display: 'flex',\n        renderCell: ({ row }) => (\n          <Tooltip title={UTC_DATE_FORMATTER(new Date(row.startTimeUnixMs))} placement=\"top\" arrow>\n            <Typography display=\"inline\" key={`st-${row.traceId}`}>\n              {DATE_FORMATTER(new Date(row.startTimeUnixMs))}\n            </Typography>\n          </Tooltip>\n        ),\n      },\n    ],\n    [serviceColorGenerator]\n  );\n\n  return (\n    <DataGrid\n      sx={{ borderWidth: 0 }}\n      columns={columns}\n      rows={rows}\n      getRowId={(row) => row.traceId}\n      getRowHeight={() => 'auto'}\n      getEstimatedRowHeight={() => 66}\n      disableRowSelectionOnClick={true}\n      pageSizeOptions={[10, 20, 50, 100]}\n      initialState={{\n        pagination: { paginationModel: { pageSize: 20 } },\n        sorting: {\n          sortModel: [{ field: 'startTimeUnixMs', sort: 'desc' }],\n        },\n      }}\n    />\n  );\n}\n\ninterface TraceNameProps {\n  row: Row;\n}\n\nfunction TraceName({ row: trace }: TraceNameProps): ReactElement {\n  const { RouterComponent } = useRouterContext();\n\n  if (RouterComponent && trace.traceLink) {\n    return (\n      <Link variant=\"body1\" color=\"inherit\" underline=\"hover\" component={RouterComponent} to={trace.traceLink}>\n        <strong>{trace.rootServiceName}:</strong> {trace.rootTraceName}\n      </Link>\n    );\n  }\n\n  return (\n    <Typography display=\"inline\">\n      <strong>{trace.rootServiceName}:</strong> {trace.rootTraceName}\n    </Typography>\n  );\n}\n\ninterface ServiceChipProps {\n  serviceName: string;\n  stats: ServiceStats;\n  serviceColor: string;\n}\n\nfunction ServiceChip({ serviceName, stats, serviceColor }: ServiceChipProps): ReactElement {\n  return (\n    <Chip\n      label={serviceName}\n      variant=\"outlined\"\n      size=\"small\"\n      style={{ ['--service-color' as string]: serviceColor }}\n      sx={{ marginTop: '5px', marginRight: '5px', borderColor: 'var(--service-color)' }}\n      avatar={\n        <Avatar\n          sx={{\n            minWidth: 'fit-content', // by default width is fixed to 18px, which is not enough for multi-digit span counts\n            padding: '6px',\n            backgroundColor: 'var(--service-color)',\n            fontSize: '0.65rem',\n            fontWeight: 'bold',\n            textShadow: '0 0 5px #fff',\n          }}\n        >\n          {stats.spanCount}\n        </Avatar>\n      }\n    />\n  );\n}\n"],"names":["Avatar","Box","Chip","Link","Tooltip","Typography","useTheme","formatDuration","msToPrometheusDuration","replaceVariablesInString","useAllVariableValues","useRouterContext","InformationIcon","useChartsTheme","DataGrid","useCallback","useMemo","getServiceColor","DATE_FORMATTER","Intl","DateTimeFormat","undefined","dateStyle","timeStyle","format","UTC_DATE_FORMATTER","timeZone","DataTable","props","options","result","muiTheme","chartsTheme","variableValues","paletteMode","visual","palette","mode","serviceColorGenerator","serviceName","rows","query","pluginSpec","definition","spec","plugin","datasourceName","datasource","name","trace","data","searchResult","traceLink","links","traceId","push","columns","field","headerName","type","flex","display","valueGetter","_","rootServiceName","rootTraceName","renderCell","row","sx","my","TraceName","br","Object","entries","serviceStats","map","stats","ServiceChip","serviceColor","headerAlign","align","minWidth","values","reduce","acc","val","spanCount","totalSpanCount","totalErrorCount","errorCount","label","marginLeft","icon","variant","size","color","durationMs","title","Date","startTimeUnixMs","placement","arrow","borderWidth","getRowId","getRowHeight","getEstimatedRowHeight","disableRowSelectionOnClick","pageSizeOptions","initialState","pagination","paginationModel","pageSize","sorting","sortModel","sort","RouterComponent","underline","component","to","strong","style","marginTop","marginRight","borderColor","avatar","padding","backgroundColor","fontSize","fontWeight","textShadow"],"mappings":"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"}
+{"version":3,"sources":["../../src/DataTable.tsx"],"sourcesContent":["// Copyright 2024 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 { Avatar, Box, Chip, Link, Tooltip, Typography, useTheme } from '@mui/material';\nimport {\n  QueryDefinition,\n  ServiceStats,\n  TraceData,\n  TraceSearchResult,\n  formatDuration,\n  msToPrometheusDuration,\n} from '@perses-dev/core';\nimport { PanelData, replaceVariablesInString, useAllVariableValues, useRouterContext } from '@perses-dev/plugin-system';\nimport InformationIcon from 'mdi-material-ui/Information';\nimport { useChartsTheme } from '@perses-dev/components';\nimport { DataGrid, GridColDef } from '@mui/x-data-grid';\nimport { ReactElement, useCallback, useMemo } from 'react';\nimport { getServiceColor } from './utils/utils';\nimport { TraceTableOptions } from './trace-table-model';\n\nconst DATE_FORMATTER = new Intl.DateTimeFormat(undefined, {\n  dateStyle: 'long',\n  timeStyle: 'medium',\n}).format;\nconst UTC_DATE_FORMATTER = new Intl.DateTimeFormat(undefined, {\n  dateStyle: 'long',\n  timeStyle: 'long',\n  timeZone: 'UTC',\n}).format;\n\nexport type TraceLink = (params: { query: QueryDefinition; traceId: string }) => string;\n\nexport interface DataTableProps {\n  options: TraceTableOptions;\n  result: Array<PanelData<TraceData>>;\n}\n\ninterface Row extends TraceSearchResult {\n  traceLink?: string;\n}\n\nexport function DataTable(props: DataTableProps): ReactElement {\n  const { options, result } = props;\n  const muiTheme = useTheme();\n  const chartsTheme = useChartsTheme();\n  const variableValues = useAllVariableValues();\n\n  const paletteMode = options.visual?.palette?.mode;\n  const serviceColorGenerator = useCallback(\n    (serviceName: string) => getServiceColor(muiTheme, chartsTheme, paletteMode, serviceName),\n    [muiTheme, chartsTheme, paletteMode]\n  );\n\n  const rows: Row[] = [];\n  for (const query of result) {\n    const pluginSpec = query.definition.spec.plugin.spec as { datasource?: { name?: string } } | undefined;\n    const datasourceName = pluginSpec?.datasource?.name;\n\n    for (const trace of query.data?.searchResult || []) {\n      const traceLink = options.links?.trace\n        ? replaceVariablesInString(options.links.trace, variableValues, {\n            datasourceName: datasourceName ?? '',\n            traceId: trace.traceId,\n          })\n        : undefined;\n      rows.push({\n        ...trace,\n        traceLink,\n      });\n    }\n  }\n\n  const columns = useMemo<Array<GridColDef<Row>>>(\n    () => [\n      {\n        field: 'name',\n        headerName: 'Trace name',\n        type: 'string',\n        flex: 4,\n        display: 'flex',\n        valueGetter: (_, trace): string => `${trace.rootServiceName}: ${trace.rootTraceName}`,\n        renderCell: ({ row }): ReactElement => (\n          <Box sx={{ my: 1 }}>\n            <TraceName row={row} />\n            <br />\n            {Object.entries(row.serviceStats).map(([serviceName, stats]) => (\n              <ServiceChip\n                key={serviceName}\n                serviceName={serviceName}\n                stats={stats}\n                serviceColor={serviceColorGenerator(serviceName)}\n              />\n            ))}\n          </Box>\n        ),\n      },\n      {\n        field: 'spanCount',\n        headerName: 'Spans',\n        type: 'number',\n        headerAlign: 'left',\n        align: 'left',\n        flex: 2,\n        minWidth: 145,\n        display: 'flex',\n        valueGetter: (_, trace) => Object.values(trace.serviceStats).reduce((acc, val) => acc + val.spanCount, 0),\n        renderCell: ({ row }): ReactElement => {\n          let totalSpanCount = 0;\n          let totalErrorCount = 0;\n          for (const stats of Object.values(row.serviceStats)) {\n            totalSpanCount += stats.spanCount;\n            totalErrorCount += stats.errorCount ?? 0;\n          }\n          return (\n            <>\n              <Typography display=\"inline\">{totalSpanCount} spans</Typography>\n              {totalErrorCount > 0 && (\n                <Chip\n                  label={`${totalErrorCount} error${totalErrorCount === 1 ? '' : 's'}`}\n                  sx={{ marginLeft: '5px' }}\n                  icon={<InformationIcon />}\n                  variant=\"outlined\"\n                  size=\"small\"\n                  color=\"error\"\n                />\n              )}\n            </>\n          );\n        },\n      },\n      {\n        field: 'durationMs',\n        headerName: 'Duration',\n        type: 'number',\n        headerAlign: 'left',\n        align: 'left',\n        flex: 1,\n        minWidth: 70,\n        display: 'flex',\n        renderCell: ({ row }) => (\n          <Typography display=\"inline\">\n            {row.durationMs < 1 ? '<1ms' : formatDuration(msToPrometheusDuration(row.durationMs))}\n          </Typography>\n        ),\n      },\n      {\n        field: 'startTimeUnixMs',\n        headerName: 'Start time',\n        type: 'number',\n        headerAlign: 'left',\n        align: 'left',\n        flex: 3,\n        minWidth: 240,\n        display: 'flex',\n        renderCell: ({ row }) => (\n          <Tooltip title={UTC_DATE_FORMATTER(new Date(row.startTimeUnixMs))} placement=\"top\" arrow>\n            <Typography display=\"inline\" key={`st-${row.traceId}`}>\n              {DATE_FORMATTER(new Date(row.startTimeUnixMs))}\n            </Typography>\n          </Tooltip>\n        ),\n      },\n    ],\n    [serviceColorGenerator]\n  );\n\n  return (\n    <DataGrid\n      sx={{ borderWidth: 0 }}\n      columns={columns}\n      rows={rows}\n      getRowId={(row) => row.traceId}\n      getRowHeight={() => 'auto'}\n      getEstimatedRowHeight={() => 66}\n      disableRowSelectionOnClick={true}\n      pageSizeOptions={[10, 20, 50, 100]}\n      initialState={{\n        pagination: { paginationModel: { pageSize: 20 } },\n        sorting: {\n          sortModel: [{ field: 'startTimeUnixMs', sort: 'desc' }],\n        },\n      }}\n    />\n  );\n}\n\ninterface TraceNameProps {\n  row: Row;\n}\n\nfunction TraceName({ row: trace }: TraceNameProps): ReactElement {\n  const { RouterComponent } = useRouterContext();\n\n  if (RouterComponent && trace.traceLink) {\n    return (\n      <Link variant=\"body1\" color=\"inherit\" underline=\"hover\" component={RouterComponent} to={trace.traceLink}>\n        <strong>{trace.rootServiceName}:</strong> {trace.rootTraceName}\n      </Link>\n    );\n  }\n\n  return (\n    <Typography display=\"inline\">\n      <strong>{trace.rootServiceName}:</strong> {trace.rootTraceName}\n    </Typography>\n  );\n}\n\ninterface ServiceChipProps {\n  serviceName: string;\n  stats: ServiceStats;\n  serviceColor: string;\n}\n\nfunction ServiceChip({ serviceName, stats, serviceColor }: ServiceChipProps): ReactElement {\n  return (\n    <Chip\n      label={serviceName}\n      variant=\"outlined\"\n      size=\"small\"\n      style={{ ['--service-color' as string]: serviceColor }}\n      sx={{ marginTop: '5px', marginRight: '5px', borderColor: 'var(--service-color)' }}\n      avatar={\n        <Avatar\n          sx={{\n            minWidth: 'fit-content', // by default width is fixed to 18px, which is not enough for multi-digit span counts\n            padding: '6px',\n            backgroundColor: 'var(--service-color)',\n            fontSize: '0.65rem',\n            fontWeight: 'bold',\n            textShadow: '0 0 5px #fff',\n          }}\n        >\n          {stats.spanCount}\n        </Avatar>\n      }\n    />\n  );\n}\n"],"names":["Avatar","Box","Chip","Link","Tooltip","Typography","useTheme","formatDuration","msToPrometheusDuration","replaceVariablesInString","useAllVariableValues","useRouterContext","InformationIcon","useChartsTheme","DataGrid","useCallback","useMemo","getServiceColor","DATE_FORMATTER","Intl","DateTimeFormat","undefined","dateStyle","timeStyle","format","UTC_DATE_FORMATTER","timeZone","DataTable","props","options","result","muiTheme","chartsTheme","variableValues","paletteMode","visual","palette","mode","serviceColorGenerator","serviceName","rows","query","pluginSpec","definition","spec","plugin","datasourceName","datasource","name","trace","data","searchResult","traceLink","links","traceId","push","columns","field","headerName","type","flex","display","valueGetter","_","rootServiceName","rootTraceName","renderCell","row","sx","my","TraceName","br","Object","entries","serviceStats","map","stats","ServiceChip","serviceColor","headerAlign","align","minWidth","values","reduce","acc","val","spanCount","totalSpanCount","totalErrorCount","errorCount","label","marginLeft","icon","variant","size","color","durationMs","title","Date","startTimeUnixMs","placement","arrow","borderWidth","getRowId","getRowHeight","getEstimatedRowHeight","disableRowSelectionOnClick","pageSizeOptions","initialState","pagination","paginationModel","pageSize","sorting","sortModel","sort","RouterComponent","underline","component","to","strong","style","marginTop","marginRight","borderColor","avatar","padding","backgroundColor","fontSize","fontWeight","textShadow"],"mappings":"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"}

package/lib/bootstrap.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 const root = ReactDOM.createRoot(document.getElementById('root'));

package/lib/bootstrap.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/bootstrap.tsx"],"sourcesContent":["// Copyright 2024 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 React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst root = ReactDOM.createRoot(document.getElementById('root')!);\nroot.render(<React.StrictMode></React.StrictMode>);\n"],"names":["React","ReactDOM","root","createRoot","document","getElementById","render","StrictMode"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,WAAW,QAAQ;AAC1B,OAAOC,cAAc,mBAAmB;AAExC,MAAMC,OAAOD,SAASE,UAAU,CAACC,SAASC,cAAc,CAAC;AACzDH,KAAKI,MAAM,eAAC,KAACN,MAAMO,UAAU"}
+{"version":3,"sources":["../../src/bootstrap.tsx"],"sourcesContent":["// Copyright 2024 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 React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst root = ReactDOM.createRoot(document.getElementById('root')!);\nroot.render(<React.StrictMode></React.StrictMode>);\n"],"names":["React","ReactDOM","root","createRoot","document","getElementById","render","StrictMode"],"mappings":";AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,OAAOA,WAAW,QAAQ;AAC1B,OAAOC,cAAc,mBAAmB;AAExC,MAAMC,OAAOD,SAASE,UAAU,CAACC,SAASC,cAAc,CAAC;AACzDH,KAAKI,MAAM,eAAC,KAACN,MAAMO,UAAU"}

package/lib/cjs/index-federation.js

@@ -1,15 +1,3 @@
-// Copyright 2024 The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
 "use strict";
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -52,4 +40,16 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
 Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./bootstrap")));

package/lib/cjs/test/mock-trace-data.js

@@ -17,20 +17,20 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    MOCK_TRACE_SEARCH_RESULT: function() {
+    get MOCK_TRACE_SEARCH_RESULT () {
         return MOCK_TRACE_SEARCH_RESULT;
     },
-    MOCK_TRACE_SEARCH_RESULT_EMPTY: function() {
+    get MOCK_TRACE_SEARCH_RESULT_EMPTY () {
         return MOCK_TRACE_SEARCH_RESULT_EMPTY;
     },
-    MOCK_TRACE_SEARCH_RESULT_QUERY_RESULT: function() {
+    get MOCK_TRACE_SEARCH_RESULT_QUERY_RESULT () {
         return MOCK_TRACE_SEARCH_RESULT_QUERY_RESULT;
     },
-    MOCK_TRACE_SEARCH_RESULT_QUERY_RESULT_EMPTY: function() {
+    get MOCK_TRACE_SEARCH_RESULT_QUERY_RESULT_EMPTY () {
         return MOCK_TRACE_SEARCH_RESULT_QUERY_RESULT_EMPTY;
     }
 });

package/lib/cjs/utils/palette.js

@@ -17,14 +17,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    getConsistentCategoricalColor: function() {
+    get getConsistentCategoricalColor () {
         return getConsistentCategoricalColor;
     },
-    getConsistentColor: function() {
+    get getConsistentColor () {
         return getConsistentColor;
     }
 });

package/mf-manifest.json

@@ -5,11 +5,11 @@
     "name": "TraceTable",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.8.2",
+      "buildVersion": "0.9.1",
       "buildName": "@perses-dev/trace-table-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/TraceTable.8a611d50.js",
+      "name": "__mf/js/TraceTable.e7502696.js",
       "path": "",
       "type": "global"
     },
@@ -20,9 +20,9 @@
       "api": ""
     },
     "globalName": "TraceTable",
-    "pluginVersion": "0.19.1",
+    "pluginVersion": "0.21.6",
     "prefetchInterface": false,
-    "publicPath": "/plugins/TraceTable/"
+    "getPublicPath": "function() { const prefix = window.PERSES_PLUGIN_ASSETS_PATH || window.PERSES_APP_CONFIG?.api_prefix || \"\"; return prefix + \"/plugins/TraceTable/\"; }"
   },
   "shared": [
     {
@@ -35,7 +35,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/960.3373bed4.js"
+            "__mf/js/async/274.23857c48.js"
           ]
         },
         "css": {
@@ -54,8 +54,8 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/694.5d60f324.js",
-            "__mf/js/async/770.06030c80.js"
+            "__mf/js/async/235.d017b2f3.js",
+            "__mf/js/async/616.07b86461.js"
           ]
         },
         "css": {
@@ -74,8 +74,8 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/214.0bac5b59.js",
-            "__mf/js/async/738.4eaf0328.js"
+            "__mf/js/async/587.6b047404.js",
+            "__mf/js/async/968.0959d664.js"
           ]
         },
         "css": {
@@ -87,14 +87,14 @@
     {
       "id": "TraceTable:@perses-dev/components",
       "name": "@perses-dev/components",
-      "version": "0.52.0",
+      "version": "0.53.0-beta.2",
       "singleton": true,
-      "requiredVersion": "^0.52.0",
+      "requiredVersion": "^0.53.0-beta.2",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/445.8804dd58.js"
+            "__mf/js/async/195.caa80edf.js"
           ]
         },
         "css": {
@@ -106,14 +106,14 @@
     {
       "id": "TraceTable:@perses-dev/plugin-system",
       "name": "@perses-dev/plugin-system",
-      "version": "0.52.0",
+      "version": "0.53.0-beta.2",
       "singleton": true,
-      "requiredVersion": "^0.52.0",
+      "requiredVersion": "^0.53.0-beta.2",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/109.92d5db6e.js"
+            "__mf/js/async/252.7de4457b.js"
           ]
         },
         "css": {
@@ -132,7 +132,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/75.8f589ac7.js"
+            "__mf/js/async/192.50983042.js"
           ]
         },
         "css": {
@@ -151,7 +151,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/409.d01a441f.js"
+            "__mf/js/async/873.d4f6eb80.js"
           ]
         },
         "css": {
@@ -170,7 +170,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/981.92685962.js"
+            "__mf/js/async/392.ba8c2c55.js"
           ]
         },
         "css": {
@@ -189,7 +189,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/173.085e8c1f.js"
+            "__mf/js/async/470.59b55de8.js"
           ]
         },
         "css": {
@@ -208,7 +208,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/964.1165a855.js"
+            "__mf/js/async/121.c61bbf00.js"
           ]
         },
         "css": {
@@ -227,7 +227,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/740.3195ce93.js"
+            "__mf/js/async/978.230c12cb.js"
           ]
         },
         "css": {
@@ -245,27 +245,26 @@
       "assets": {
         "js": {
           "sync": [
-            "__mf/js/async/175.ba9a4640.js",
-            "__mf/js/async/83.16406283.js",
-            "__mf/js/async/812.f87960e5.js",
-            "__mf/js/async/235.be067e8a.js",
-            "__mf/js/async/__federation_expose_TraceTable.09ba5ecf.js"
+            "__mf/js/async/289.c722d41d.js",
+            "__mf/js/async/54.ec6d9b92.js",
+            "__mf/js/async/670.41f6b1c0.js",
+            "__mf/js/async/__federation_expose_TraceTable.9ca82930.js"
           ],
           "async": [
-            "__mf/js/async/238.ccd6c3b2.js",
-            "__mf/js/async/224.51c57ceb.js",
-            "__mf/js/async/292.d26d57c4.js",
-            "__mf/js/async/69.0b1487b7.js",
-            "__mf/js/async/974.4058b9ce.js",
-            "__mf/js/async/lib-router.5b98a3da.js",
-            "__mf/js/async/488.1ae7b913.js"
+            "__mf/js/async/588.81784db9.js",
+            "__mf/js/async/71.c2e1eaf6.js",
+            "__mf/js/async/356.1520b4b9.js",
+            "__mf/js/async/43.15aacd55.js",
+            "__mf/js/async/48.0daa445f.js",
+            "__mf/js/async/lib-router.d2b2e61c.js",
+            "__mf/js/async/177.72614532.js"
           ]
         },
         "css": {
           "sync": [],
           "async": [
-            "__mf/css/async/341.3d4493d2.css",
-            "__mf/css/async/263.3d4493d2.css"
+            "__mf/css/async/61.d3010b86.css",
+            "__mf/css/async/823.d3010b86.css"
           ]
         }
       },

package/mf-stats.json

@@ -5,11 +5,11 @@
     "name": "TraceTable",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.8.2",
+      "buildVersion": "0.9.1",
       "buildName": "@perses-dev/trace-table-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/TraceTable.8a611d50.js",
+      "name": "__mf/js/TraceTable.e7502696.js",
       "path": "",
       "type": "global"
     },
@@ -20,9 +20,9 @@
       "api": ""
     },
     "globalName": "TraceTable",
-    "pluginVersion": "0.19.1",
+    "pluginVersion": "0.21.6",
     "prefetchInterface": false,
-    "publicPath": "/plugins/TraceTable/"
+    "getPublicPath": "function() { const prefix = window.PERSES_PLUGIN_ASSETS_PATH || window.PERSES_APP_CONFIG?.api_prefix || \"\"; return prefix + \"/plugins/TraceTable/\"; }"
   },
   "shared": [
     {
@@ -37,7 +37,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/960.3373bed4.js"
+            "__mf/js/async/274.23857c48.js"
           ]
         },
         "css": {
@@ -59,8 +59,8 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/694.5d60f324.js",
-            "__mf/js/async/770.06030c80.js"
+            "__mf/js/async/235.d017b2f3.js",
+            "__mf/js/async/616.07b86461.js"
           ]
         },
         "css": {
@@ -82,8 +82,8 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/214.0bac5b59.js",
-            "__mf/js/async/738.4eaf0328.js"
+            "__mf/js/async/587.6b047404.js",
+            "__mf/js/async/968.0959d664.js"
           ]
         },
         "css": {
@@ -95,17 +95,17 @@
     },
     {
       "singleton": true,
-      "requiredVersion": "^0.52.0",
+      "requiredVersion": "^0.53.0-beta.2",
       "shareScope": "default",
       "name": "@perses-dev/components",
-      "version": "0.52.0",
+      "version": "0.53.0-beta.2",
       "eager": false,
       "id": "TraceTable:@perses-dev/components",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/445.8804dd58.js"
+            "__mf/js/async/195.caa80edf.js"
           ]
         },
         "css": {
@@ -119,17 +119,17 @@
     },
     {
       "singleton": true,
-      "requiredVersion": "^0.52.0",
+      "requiredVersion": "^0.53.0-beta.2",
       "shareScope": "default",
       "name": "@perses-dev/plugin-system",
-      "version": "0.52.0",
+      "version": "0.53.0-beta.2",
       "eager": false,
       "id": "TraceTable:@perses-dev/plugin-system",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/109.92d5db6e.js"
+            "__mf/js/async/252.7de4457b.js"
           ]
         },
         "css": {
@@ -153,7 +153,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/75.8f589ac7.js"
+            "__mf/js/async/192.50983042.js"
           ]
         },
         "css": {
@@ -175,7 +175,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/409.d01a441f.js"
+            "__mf/js/async/873.d4f6eb80.js"
           ]
         },
         "css": {
@@ -197,7 +197,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/981.92685962.js"
+            "__mf/js/async/392.ba8c2c55.js"
           ]
         },
         "css": {
@@ -219,7 +219,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/173.085e8c1f.js"
+            "__mf/js/async/470.59b55de8.js"
           ]
         },
         "css": {
@@ -241,7 +241,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/964.1165a855.js"
+            "__mf/js/async/121.c61bbf00.js"
           ]
         },
         "css": {
@@ -265,7 +265,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/740.3195ce93.js"
+            "__mf/js/async/978.230c12cb.js"
           ]
         },
         "css": {
@@ -291,27 +291,26 @@
       "assets": {
         "js": {
           "sync": [
-            "__mf/js/async/175.ba9a4640.js",
-            "__mf/js/async/83.16406283.js",
-            "__mf/js/async/812.f87960e5.js",
-            "__mf/js/async/235.be067e8a.js",
-            "__mf/js/async/__federation_expose_TraceTable.09ba5ecf.js"
+            "__mf/js/async/289.c722d41d.js",
+            "__mf/js/async/54.ec6d9b92.js",
+            "__mf/js/async/670.41f6b1c0.js",
+            "__mf/js/async/__federation_expose_TraceTable.9ca82930.js"
           ],
           "async": [
-            "__mf/js/async/238.ccd6c3b2.js",
-            "__mf/js/async/224.51c57ceb.js",
-            "__mf/js/async/292.d26d57c4.js",
-            "__mf/js/async/69.0b1487b7.js",
-            "__mf/js/async/974.4058b9ce.js",
-            "__mf/js/async/lib-router.5b98a3da.js",
-            "__mf/js/async/488.1ae7b913.js"
+            "__mf/js/async/588.81784db9.js",
+            "__mf/js/async/71.c2e1eaf6.js",
+            "__mf/js/async/356.1520b4b9.js",
+            "__mf/js/async/43.15aacd55.js",
+            "__mf/js/async/48.0daa445f.js",
+            "__mf/js/async/lib-router.d2b2e61c.js",
+            "__mf/js/async/177.72614532.js"
           ]
         },
         "css": {
           "sync": [],
           "async": [
-            "__mf/css/async/341.3d4493d2.css",
-            "__mf/css/async/263.3d4493d2.css"
+            "__mf/css/async/61.d3010b86.css",
+            "__mf/css/async/823.d3010b86.css"
           ]
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/trace-table-plugin",
-  "version": "0.8.2",
+  "version": "0.9.1",
   "homepage": "https://github.com/perses/plugins/blob/main/README.md",
   "repository": {
     "type": "git",
@@ -30,9 +30,9 @@
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@hookform/resolvers": "^3.2.0",
-    "@perses-dev/components": "^0.52.0",
-    "@perses-dev/core": "^0.52.0",
-    "@perses-dev/plugin-system": "^0.52.0",
+    "@perses-dev/components": "^0.53.0-beta.2",
+    "@perses-dev/core": "^0.53.0-beta.2",
+    "@perses-dev/plugin-system": "^0.53.0-beta.2",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "echarts": "5.5.0",
@@ -63,4 +63,4 @@
       }
     ]
   }
-}
+}

package/__mf/css/async/263.3d4493d2.css

@@ -1 +0,0 @@
-@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:300;src:url(/plugins/TraceTable/__mf/font/lato-latin-ext-300-normal.abcc64a9.woff2)format("woff2"),url(/plugins/TraceTable/__mf/font/lato-all-300-normal.322bdf14.woff)format("woff");unicode-range:U+100-24F,U+259,U+1E??,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:300;src:url(/plugins/TraceTable/__mf/font/lato-latin-300-normal.c5195215.woff2)format("woff2"),url(/plugins/TraceTable/__mf/font/lato-all-300-normal.322bdf14.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:400;src:url(/plugins/TraceTable/__mf/font/lato-latin-ext-400-normal.6ebed106.woff2)format("woff2"),url(/plugins/TraceTable/__mf/font/lato-all-400-normal.63513b00.woff)format("woff");unicode-range:U+100-24F,U+259,U+1E??,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:400;src:url(/plugins/TraceTable/__mf/font/lato-latin-400-normal.b7ffde23.woff2)format("woff2"),url(/plugins/TraceTable/__mf/font/lato-all-400-normal.63513b00.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:700;src:url(/plugins/TraceTable/__mf/font/lato-latin-ext-700-normal.8697d1d5.woff2)format("woff2"),url(/plugins/TraceTable/__mf/font/lato-all-700-normal.bb27db94.woff)format("woff");unicode-range:U+100-24F,U+259,U+1E??,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:700;src:url(/plugins/TraceTable/__mf/font/lato-latin-700-normal.d5eb20bc.woff2)format("woff2"),url(/plugins/TraceTable/__mf/font/lato-all-700-normal.bb27db94.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:900;src:url(/plugins/TraceTable/__mf/font/lato-latin-ext-900-normal.20a2b415.woff2)format("woff2"),url(/plugins/TraceTable/__mf/font/lato-all-900-normal.a27049a3.woff)format("woff");unicode-range:U+100-24F,U+259,U+1E??,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:900;src:url(/plugins/TraceTable/__mf/font/lato-latin-900-normal.d884a71c.woff2)format("woff2"),url(/plugins/TraceTable/__mf/font/lato-all-900-normal.a27049a3.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

package/__mf/css/async/341.3d4493d2.css

@@ -1 +0,0 @@
-@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:300;src:url(/plugins/TraceTable/__mf/font/lato-latin-ext-300-normal.abcc64a9.woff2)format("woff2"),url(/plugins/TraceTable/__mf/font/lato-all-300-normal.322bdf14.woff)format("woff");unicode-range:U+100-24F,U+259,U+1E??,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:300;src:url(/plugins/TraceTable/__mf/font/lato-latin-300-normal.c5195215.woff2)format("woff2"),url(/plugins/TraceTable/__mf/font/lato-all-300-normal.322bdf14.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:400;src:url(/plugins/TraceTable/__mf/font/lato-latin-ext-400-normal.6ebed106.woff2)format("woff2"),url(/plugins/TraceTable/__mf/font/lato-all-400-normal.63513b00.woff)format("woff");unicode-range:U+100-24F,U+259,U+1E??,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:400;src:url(/plugins/TraceTable/__mf/font/lato-latin-400-normal.b7ffde23.woff2)format("woff2"),url(/plugins/TraceTable/__mf/font/lato-all-400-normal.63513b00.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:700;src:url(/plugins/TraceTable/__mf/font/lato-latin-ext-700-normal.8697d1d5.woff2)format("woff2"),url(/plugins/TraceTable/__mf/font/lato-all-700-normal.bb27db94.woff)format("woff");unicode-range:U+100-24F,U+259,U+1E??,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:700;src:url(/plugins/TraceTable/__mf/font/lato-latin-700-normal.d5eb20bc.woff2)format("woff2"),url(/plugins/TraceTable/__mf/font/lato-all-700-normal.bb27db94.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:900;src:url(/plugins/TraceTable/__mf/font/lato-latin-ext-900-normal.20a2b415.woff2)format("woff2"),url(/plugins/TraceTable/__mf/font/lato-all-900-normal.a27049a3.woff)format("woff");unicode-range:U+100-24F,U+259,U+1E??,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:900;src:url(/plugins/TraceTable/__mf/font/lato-latin-900-normal.d884a71c.woff2)format("woff2"),url(/plugins/TraceTable/__mf/font/lato-all-900-normal.a27049a3.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

package/__mf/css/async/759.3d4493d2.css

@@ -1 +0,0 @@
-@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:300;src:url(/plugins/TraceTable/__mf/font/lato-latin-ext-300-normal.abcc64a9.woff2)format("woff2"),url(/plugins/TraceTable/__mf/font/lato-all-300-normal.322bdf14.woff)format("woff");unicode-range:U+100-24F,U+259,U+1E??,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:300;src:url(/plugins/TraceTable/__mf/font/lato-latin-300-normal.c5195215.woff2)format("woff2"),url(/plugins/TraceTable/__mf/font/lato-all-300-normal.322bdf14.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:400;src:url(/plugins/TraceTable/__mf/font/lato-latin-ext-400-normal.6ebed106.woff2)format("woff2"),url(/plugins/TraceTable/__mf/font/lato-all-400-normal.63513b00.woff)format("woff");unicode-range:U+100-24F,U+259,U+1E??,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:400;src:url(/plugins/TraceTable/__mf/font/lato-latin-400-normal.b7ffde23.woff2)format("woff2"),url(/plugins/TraceTable/__mf/font/lato-all-400-normal.63513b00.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:700;src:url(/plugins/TraceTable/__mf/font/lato-latin-ext-700-normal.8697d1d5.woff2)format("woff2"),url(/plugins/TraceTable/__mf/font/lato-all-700-normal.bb27db94.woff)format("woff");unicode-range:U+100-24F,U+259,U+1E??,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:700;src:url(/plugins/TraceTable/__mf/font/lato-latin-700-normal.d5eb20bc.woff2)format("woff2"),url(/plugins/TraceTable/__mf/font/lato-all-700-normal.bb27db94.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:900;src:url(/plugins/TraceTable/__mf/font/lato-latin-ext-900-normal.20a2b415.woff2)format("woff2"),url(/plugins/TraceTable/__mf/font/lato-all-900-normal.a27049a3.woff)format("woff");unicode-range:U+100-24F,U+259,U+1E??,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:900;src:url(/plugins/TraceTable/__mf/font/lato-latin-900-normal.d884a71c.woff2)format("woff2"),url(/plugins/TraceTable/__mf/font/lato-all-900-normal.a27049a3.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}