Merge "ui: Data Visualizer bugfixes." into main

google · Feb 21, 2025 · 750d2f2 · 750d2f2
2 parents 7f37dbd + 44a120f
commit 750d2f2
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 49 deletions.
diff --git a/ui/src/components/widgets/charts/bar_chart.ts b/ui/src/components/widgets/charts/bar_chart.ts
@@ -13,20 +13,22 @@
 // limitations under the License.
 
 import m from 'mithril';
-import {ChartAttrs, VegaLiteChartSpec} from './chart';
+import {ChartAttrs} from './chart';
 import {VegaLiteSelectionTypes, VegaView} from '../vega_view';
 import {Spinner} from '../../../widgets/spinner';
 import {stringifyJsonWithBigints} from '../../../base/json_utils';
 import {Row} from '../../../trace_processor/query_result';
+import {TopLevelSpec} from 'vega-lite';
+import {assertExists} from '../../../base/logging';
 
 export class BarChart implements m.ClassComponent<ChartAttrs> {
-  getVegaSpec(attrs: ChartAttrs): VegaLiteChartSpec {
+  getVegaSpec(attrs: ChartAttrs): TopLevelSpec {
     return {
       $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
       width: 'container',
       mark: 'bar',
       data: {
-        values: attrs.data,
+        values: assertExists(attrs.data),
       },
       params: [
         {
@@ -60,6 +62,15 @@ export class BarChart implements m.ClassComponent<ChartAttrs> {
           title: 'Count',
         },
       },
+      config: {
+        axisY: {
+          titleLineHeight: 15,
+          titleBaseline: 'line-bottom',
+          titleAngle: 0,
+          titleAnchor: 'start',
+          titleAlign: 'left',
+        },
+      },
     };
   }
 

diff --git a/ui/src/components/widgets/charts/chart.ts b/ui/src/components/widgets/charts/chart.ts
@@ -15,50 +15,9 @@ import m from 'mithril';
 import {Row} from '../../../trace_processor/query_result';
 import {Histogram} from './histogram';
 import {Item, SignalValue} from 'vega';
-import {
-  VegaEventType,
-  VegaLiteAggregationOps,
-  VegaLiteFieldType,
-  VegaLiteSelectionTypes,
-} from '../vega_view';
+import {VegaLiteAggregationOps, VegaLiteFieldType} from '../vega_view';
 import {BarChart} from './bar_chart';
 
-export interface VegaLiteChartSpec {
-  $schema: string;
-  width: string | number;
-  mark:
-    | 'area'
-    | 'bar'
-    | 'circle'
-    | 'line'
-    | 'point'
-    | 'rect'
-    | 'rule'
-    | 'square'
-    | 'text'
-    | 'tick'
-    | 'geoshape'
-    | 'boxplot'
-    | 'errorband'
-    | 'errorbar';
-  data: {values?: string | Row[]};
-  encoding: {
-    x: {[key: string]: unknown};
-    y: {[key: string]: unknown};
-  };
-  params?: {
-    name: VegaLiteSelectionTypes;
-    select: {
-      type: VegaLiteSelectionTypes;
-      encodings?: [string];
-      fields?: [string];
-      on?: VegaEventType;
-      clear?: VegaEventType | boolean;
-      resolve?: string;
-    };
-  }[];
-}
-
 export interface ChartAttrs {
   readonly chartType: ChartType;
   readonly description?: string;

diff --git a/ui/src/components/widgets/charts/histogram.ts b/ui/src/components/widgets/charts/histogram.ts
@@ -16,19 +16,21 @@ import m from 'mithril';
 import {stringifyJsonWithBigints} from '../../../base/json_utils';
 import {VegaLiteSelectionTypes, VegaView} from '../vega_view';
 import {Spinner} from '../../../widgets/spinner';
-import {ChartAttrs, VegaLiteChartSpec} from './chart';
+import {ChartAttrs} from './chart';
 import {Row} from '../../../trace_processor/query_result';
+import {TopLevelSpec} from 'vega-lite';
+import {assertExists} from '../../../base/logging';
 
 type HistogramAttrs = ChartAttrs;
 
 export class Histogram implements m.ClassComponent<HistogramAttrs> {
-  getVegaSpec(attrs: ChartAttrs): VegaLiteChartSpec {
+  getVegaSpec(attrs: ChartAttrs): TopLevelSpec {
     return {
       $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
       width: 'container',
       mark: 'bar',
       data: {
-        values: attrs.data,
+        values: assertExists(attrs.data),
       },
       params: [
         {

diff --git a/ui/src/plugins/dev.perfetto.ExplorePage/data_visualiser/data_visualiser.ts b/ui/src/plugins/dev.perfetto.ExplorePage/data_visualiser/data_visualiser.ts
@@ -90,7 +90,7 @@ export class DataVisualiser implements m.ClassComponent<DataVisualiserAttrs> {
         state: sqlTableViewState,
         addColumnMenuItems: (_, columnAlias) => {
           const chartAttrs = {
-            data: sqlTableViewState.nonPaginatedData?.rows,
+            data: this.viewSource?.data,
             columns: [columnAlias],
           };