ui/src/frontend/pivot_table.ts - third_party/perfetto - Git at Google

 // Copyright (C) 2021 The Android Open Source Project
 //
 // 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.

 import * as m from 'mithril';

 import {Actions} from '../common/actions';
 import {
   ColumnAttrs,
   PivotTableQueryResponse,
   RowAttrs,
 } from '../common/pivot_table_common';

 import {globals} from './globals';
 import {Panel} from './panel';
 import {
   PivotTableHelper,
 } from './pivot_table_helper';

 interface ExpandableCellAttrs {
   pivotTableId: string;
   row: RowAttrs;
   column: ColumnAttrs;
   rowIndices: number[];
   expandedRowColumns: string[];
 }

 interface PivotTableRowAttrs {
   pivotTableId: string;
   row: RowAttrs;
   columns: ColumnAttrs[];
   rowIndices: number[];
   expandedRowColumns: string[];
 }

 interface PivotTableBodyAttrs {
   pivotTableId: string;
   rows: RowAttrs[];
   columns: ColumnAttrs[];
   rowIndices: number[];
   expandedRowColumns: string[];
 }

 interface PivotTableHeaderAttrs {
   helper: PivotTableHelper;
 }

 interface PivotTableAttrs {
   pivotTableId: string;
   helper?: PivotTableHelper;
 }

 class PivotTableHeader implements m.ClassComponent<PivotTableHeaderAttrs> {
   view(vnode: m.Vnode<PivotTableHeaderAttrs>) {
     const {helper} = vnode.attrs;
     const pivotTableId = helper.pivotTableId;
     const pivotTable = globals.state.pivotTable[pivotTableId];
     const resp =
         globals.queryResults.get(pivotTableId) as PivotTableQueryResponse;

     const cols = [];
     for (const column of resp.columns) {
       const isPivot = column.aggregation === undefined;
       let sortIcon;
       if (!isPivot) {
         sortIcon =
             column.order === 'DESC' ? 'arrow_drop_down' : 'arrow_drop_up';
       }
       cols.push(m(
           'td',
           {
             class: pivotTable.isLoadingQuery ? 'disabled' : '',
             draggable: !pivotTable.isLoadingQuery,
             ondragstart: (e: DragEvent) => {
               helper.selectedColumnOnDrag(e, isPivot, column.index);
             },
             ondrop: (e: DragEvent) => {
               helper.removeHighlightFromDropLocation(e);
               helper.selectedColumnOnDrop(e, isPivot, column.index);
               helper.queryPivotTableChanges();
             },
             ondragenter: (e: DragEvent) => {
               helper.highlightDropLocation(e, isPivot);
             },
             ondragleave: (e: DragEvent) => {
               helper.removeHighlightFromDropLocation(e);
             }
           },
           column.name,
           (!isPivot && sortIcon !== undefined ?
                m('i.material-icons',
                  {
                    onclick: () => {
                      if (!pivotTable.isLoadingQuery) {
                        helper.togglePivotTableAggregationSorting(column.index);
                        helper.queryPivotTableChanges();
                      }
                    }
                  },
                  sortIcon) :
                null),
           (!isPivot && resp.totalAggregations !== undefined ?
                m('.total-aggregation',
                  `(${resp.totalAggregations[column.name]})`) :
                null)));
     }
     return m('tr', cols);
   }
 }

 class ExpandableCell implements m.ClassComponent<ExpandableCellAttrs> {
   view(vnode: m.Vnode<ExpandableCellAttrs>) {
     const {pivotTableId, row, column, rowIndices, expandedRowColumns} =
         vnode.attrs;
     const pivotTable = globals.state.pivotTable[pivotTableId];
     let expandIcon = 'expand_more';
     if (row.expandedRows.has(column.name)) {
       expandIcon = row.expandedRows.get(column.name)!.isExpanded ?
           'expand_less' :
           'expand_more';
     }
     let spinnerVisibility = 'hidden';
     let animationState = 'paused';
     if (row.loadingColumn === column.name) {
       spinnerVisibility = 'visible';
       animationState = 'running';
     }
     const padValue = new Array(row.depth * 2).join(' ');

     return m(
         'td.allow-white-space',
         padValue,
         m('i.material-icons',
           {
             class: pivotTable.isLoadingQuery ? 'disabled' : '',
             onclick: () => {
               if (pivotTable.isLoadingQuery) {
                 return;
               }
               const value = row.row[column.name]?.toString();
               if (value === undefined) {
                 throw Error('Expanded row has undefined value.');
               }
               if (row.expandedRows.has(column.name) &&
                   row.expandedRows.get(column.name)!.isExpanded) {
                 globals.dispatch(Actions.setPivotTableRequest({
                   pivotTableId,
                   action: 'UNEXPAND',
                   attrs: {
                     rowIndices,
                     columnIdx: column.index,
                     value,
                     expandedRowColumns
                   }
                 }));
               } else {
                 globals.dispatch(Actions.setPivotTableRequest({
                   pivotTableId,
                   action: column.isStackColumn ? 'DESCENDANTS' : 'EXPAND',
                   attrs: {
                     rowIndices,
                     columnIdx: column.index,
                     value,
                     expandedRowColumns
                   }
                 }));
               }
             },
           },
           expandIcon),
         ' ',
         row.row[column.name],
         ' ',
         // Adds a loading spinner while querying the expanded column.
         m('.pivot-table-spinner', {
           style: {
             visibility: spinnerVisibility,
             animationPlayState: animationState
           }
         }));
   }
 }

 class PivotTableRow implements m.ClassComponent<PivotTableRowAttrs> {
   view(vnode: m.Vnode<PivotTableRowAttrs>) {
     const cells = [];
     const {pivotTableId, row, columns, rowIndices, expandedRowColumns} =
         vnode.attrs;

     for (const column of columns) {
       if (row.row[column.name] === undefined &&
           row.expandableColumns.has(column.name)) {
         throw Error(
             `Row data at expandable column "${column.name}" is undefined.`);
       }
       if (row.row[column.name] === undefined || row.row[column.name] === null) {
         cells.push(m('td', ''));
         continue;
       }
       if (row.expandableColumns.has(column.name)) {
         cells.push(
             m(ExpandableCell,
               {pivotTableId, row, column, rowIndices, expandedRowColumns}));
         continue;
       }
       let indentationLevel = 0;
       let expandIconSpace = 0;
       if (column.aggregation !== undefined) {
         indentationLevel = rowIndices.length - 1;
       } else {
         indentationLevel = row.depth;
         if (row.depth > 0 && column.isStackColumn) {
           expandIconSpace = 3;
         }
       }
       // For each indentation level add 2 spaces, if we have an expansion button
       // add 3 spaces to cover the icon size.
       let value = row.row[column.name]!.toString();
       value = value.padStart(
           (indentationLevel * 2) + expandIconSpace + value.length, ' ');
       cells.push(m('td.allow-white-space', value));
     }
     return m('tr', cells);
   }
 }

 class PivotTableBody implements m.ClassComponent<PivotTableBodyAttrs> {
   view(vnode: m.Vnode<PivotTableBodyAttrs>): m.Children {
     const pivotTableRows = [];
     const {pivotTableId, rows, columns, rowIndices, expandedRowColumns} =
         vnode.attrs;
     for (let i = 0; i < rows.length; ++i) {
       pivotTableRows.push(m(PivotTableRow, {
         pivotTableId,
         row: rows[i],
         columns,
         rowIndices: rowIndices.concat(i),
         expandedRowColumns
       }));
       for (const column of columns.slice().reverse()) {
         const expandedRows = rows[i].expandedRows.get(column.name);
         if (expandedRows !== undefined && expandedRows.isExpanded) {
           pivotTableRows.push(m(PivotTableBody, {
             pivotTableId,
             rows: expandedRows.rows,
             columns,
             rowIndices: rowIndices.concat(i),
             expandedRowColumns: expandedRowColumns.concat(column.name)
           }));
         }
       }
     }
     return pivotTableRows;
   }
 }

 export class PivotTable extends Panel<PivotTableAttrs> {
   view(vnode: m.CVnode<PivotTableAttrs>) {
     const {pivotTableId, helper} = vnode.attrs;
     const pivotTable = globals.state.pivotTable[pivotTableId];
     const resp =
         globals.queryResults.get(pivotTableId) as PivotTableQueryResponse;

     let body;
     let header;
     if (helper !== undefined && resp !== undefined) {
       header = m(PivotTableHeader, {helper});
       body = m(PivotTableBody, {
         pivotTableId,
         rows: resp.rows,
         columns: resp.columns,
         rowIndices: [],
         expandedRowColumns: []
       });
     }

     const startSec = pivotTable.traceTime ? pivotTable.traceTime.startSec :
                                             globals.state.traceTime.startSec;
     const endSec = pivotTable.traceTime ? pivotTable.traceTime.endSec :
                                           globals.state.traceTime.endSec;

     return m(
         'div.pivot-table-tab',
         m(
             'header.overview',
             m('span',
               m('button',
                 {
                   disabled: helper === undefined || pivotTable.isLoadingQuery,
                   onclick: () => {
                     if (helper !== undefined) {
                       helper.toggleEditPivotTableModal();
                       globals.rafScheduler.scheduleFullRedraw();
                     }
                   }
                 },
                 'Edit'),
               ' ',
               (pivotTable.isLoadingQuery ? m('.pivot-table-spinner') : null),
               (resp !== undefined && !pivotTable.isLoadingQuery ?
                    m('span.code',
                      `Query took ${Math.round(resp.durationMs)} ms -`) :
                    null),
               m('span.code', `Selected range: ${endSec - startSec} s`)),
             m('button',
               {
                 disabled: helper === undefined || pivotTable.isLoadingQuery,
                 onclick: () => {
                   globals.frontendLocalState.togglePivotTable();
                   globals.queryResults.delete(pivotTableId);
                   globals.pivotTableHelper.delete(pivotTableId);
                   globals.dispatch(Actions.deletePivotTable({pivotTableId}));
                 }
               },
               'Close'),
             ),
         m('.query-table-container',
           m('table.query-table.pivot-table',
             m('thead', header),
             m('tbody', body))));
   }

   renderCanvas() {}
 }
	// Copyright (C) 2021 The Android Open Source Project
	//
	// 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.

	import * as m from 'mithril';

	import {Actions} from '../common/actions';
	import {
	ColumnAttrs,
	PivotTableQueryResponse,
	RowAttrs,
	} from '../common/pivot_table_common';

	import {globals} from './globals';
	import {Panel} from './panel';
	import {
	PivotTableHelper,
	} from './pivot_table_helper';

	interface ExpandableCellAttrs {
	pivotTableId: string;
	row: RowAttrs;
	column: ColumnAttrs;
	rowIndices: number[];
	expandedRowColumns: string[];
	}

	interface PivotTableRowAttrs {
	pivotTableId: string;
	row: RowAttrs;
	columns: ColumnAttrs[];
	rowIndices: number[];
	expandedRowColumns: string[];
	}

	interface PivotTableBodyAttrs {
	pivotTableId: string;
	rows: RowAttrs[];
	columns: ColumnAttrs[];
	rowIndices: number[];
	expandedRowColumns: string[];
	}

	interface PivotTableHeaderAttrs {
	helper: PivotTableHelper;
	}

	interface PivotTableAttrs {
	pivotTableId: string;
	helper?: PivotTableHelper;
	}

	class PivotTableHeader implements m.ClassComponent<PivotTableHeaderAttrs> {
	view(vnode: m.Vnode<PivotTableHeaderAttrs>) {
	const {helper} = vnode.attrs;
	const pivotTableId = helper.pivotTableId;
	const pivotTable = globals.state.pivotTable[pivotTableId];
	const resp =
	globals.queryResults.get(pivotTableId) as PivotTableQueryResponse;

	const cols = [];
	for (const column of resp.columns) {
	const isPivot = column.aggregation === undefined;
	let sortIcon;
	if (!isPivot) {
	sortIcon =
	column.order === 'DESC' ? 'arrow_drop_down' : 'arrow_drop_up';
	}
	cols.push(m(
	'td',
	{
	class: pivotTable.isLoadingQuery ? 'disabled' : '',
	draggable: !pivotTable.isLoadingQuery,
	ondragstart: (e: DragEvent) => {
	helper.selectedColumnOnDrag(e, isPivot, column.index);
	},
	ondrop: (e: DragEvent) => {
	helper.removeHighlightFromDropLocation(e);
	helper.selectedColumnOnDrop(e, isPivot, column.index);
	helper.queryPivotTableChanges();
	},
	ondragenter: (e: DragEvent) => {
	helper.highlightDropLocation(e, isPivot);
	},
	ondragleave: (e: DragEvent) => {
	helper.removeHighlightFromDropLocation(e);
	}
	},
	column.name,
	(!isPivot && sortIcon !== undefined ?
	m('i.material-icons',
	{
	onclick: () => {
	if (!pivotTable.isLoadingQuery) {
	helper.togglePivotTableAggregationSorting(column.index);
	helper.queryPivotTableChanges();
	}
	}
	},
	sortIcon) :
	null),
	(!isPivot && resp.totalAggregations !== undefined ?
	m('.total-aggregation',
	`(${resp.totalAggregations[column.name]})`) :
	null)));
	}
	return m('tr', cols);
	}
	}

	class ExpandableCell implements m.ClassComponent<ExpandableCellAttrs> {
	view(vnode: m.Vnode<ExpandableCellAttrs>) {
	const {pivotTableId, row, column, rowIndices, expandedRowColumns} =
	vnode.attrs;
	const pivotTable = globals.state.pivotTable[pivotTableId];
	let expandIcon = 'expand_more';
	if (row.expandedRows.has(column.name)) {
	expandIcon = row.expandedRows.get(column.name)!.isExpanded ?
	'expand_less' :
	'expand_more';
	}
	let spinnerVisibility = 'hidden';
	let animationState = 'paused';
	if (row.loadingColumn === column.name) {
	spinnerVisibility = 'visible';
	animationState = 'running';
	}
	const padValue = new Array(row.depth * 2).join(' ');

	return m(
	'td.allow-white-space',
	padValue,
	m('i.material-icons',
	{
	class: pivotTable.isLoadingQuery ? 'disabled' : '',
	onclick: () => {
	if (pivotTable.isLoadingQuery) {
	return;
	}
	const value = row.row[column.name]?.toString();
	if (value === undefined) {
	throw Error('Expanded row has undefined value.');
	}
	if (row.expandedRows.has(column.name) &&
	row.expandedRows.get(column.name)!.isExpanded) {
	globals.dispatch(Actions.setPivotTableRequest({
	pivotTableId,
	action: 'UNEXPAND',
	attrs: {
	rowIndices,
	columnIdx: column.index,
	value,
	expandedRowColumns
	}
	}));
	} else {
	globals.dispatch(Actions.setPivotTableRequest({
	pivotTableId,
	action: column.isStackColumn ? 'DESCENDANTS' : 'EXPAND',
	attrs: {
	rowIndices,
	columnIdx: column.index,
	value,
	expandedRowColumns
	}
	}));
	}
	},
	},
	expandIcon),
	' ',
	row.row[column.name],
	' ',
	// Adds a loading spinner while querying the expanded column.
	m('.pivot-table-spinner', {
	style: {
	visibility: spinnerVisibility,
	animationPlayState: animationState
	}
	}));
	}
	}

	class PivotTableRow implements m.ClassComponent<PivotTableRowAttrs> {
	view(vnode: m.Vnode<PivotTableRowAttrs>) {
	const cells = [];
	const {pivotTableId, row, columns, rowIndices, expandedRowColumns} =
	vnode.attrs;

	for (const column of columns) {
	if (row.row[column.name] === undefined &&
	row.expandableColumns.has(column.name)) {
	throw Error(
	`Row data at expandable column "${column.name}" is undefined.`);
	}
	if (row.row[column.name] === undefined \|\| row.row[column.name] === null) {
	cells.push(m('td', ''));
	continue;
	}
	if (row.expandableColumns.has(column.name)) {
	cells.push(
	m(ExpandableCell,
	{pivotTableId, row, column, rowIndices, expandedRowColumns}));
	continue;
	}
	let indentationLevel = 0;
	let expandIconSpace = 0;
	if (column.aggregation !== undefined) {
	indentationLevel = rowIndices.length - 1;
	} else {
	indentationLevel = row.depth;
	if (row.depth > 0 && column.isStackColumn) {
	expandIconSpace = 3;
	}
	}
	// For each indentation level add 2 spaces, if we have an expansion button
	// add 3 spaces to cover the icon size.
	let value = row.row[column.name]!.toString();
	value = value.padStart(
	(indentationLevel * 2) + expandIconSpace + value.length, ' ');
	cells.push(m('td.allow-white-space', value));
	}
	return m('tr', cells);
	}
	}

	class PivotTableBody implements m.ClassComponent<PivotTableBodyAttrs> {
	view(vnode: m.Vnode<PivotTableBodyAttrs>): m.Children {
	const pivotTableRows = [];
	const {pivotTableId, rows, columns, rowIndices, expandedRowColumns} =
	vnode.attrs;
	for (let i = 0; i < rows.length; ++i) {
	pivotTableRows.push(m(PivotTableRow, {
	pivotTableId,
	row: rows[i],
	columns,
	rowIndices: rowIndices.concat(i),
	expandedRowColumns
	}));
	for (const column of columns.slice().reverse()) {
	const expandedRows = rows[i].expandedRows.get(column.name);
	if (expandedRows !== undefined && expandedRows.isExpanded) {
	pivotTableRows.push(m(PivotTableBody, {
	pivotTableId,
	rows: expandedRows.rows,
	columns,
	rowIndices: rowIndices.concat(i),
	expandedRowColumns: expandedRowColumns.concat(column.name)
	}));
	}
	}
	}
	return pivotTableRows;
	}
	}

	export class PivotTable extends Panel<PivotTableAttrs> {
	view(vnode: m.CVnode<PivotTableAttrs>) {
	const {pivotTableId, helper} = vnode.attrs;
	const pivotTable = globals.state.pivotTable[pivotTableId];
	const resp =
	globals.queryResults.get(pivotTableId) as PivotTableQueryResponse;

	let body;
	let header;
	if (helper !== undefined && resp !== undefined) {
	header = m(PivotTableHeader, {helper});
	body = m(PivotTableBody, {
	pivotTableId,
	rows: resp.rows,
	columns: resp.columns,
	rowIndices: [],
	expandedRowColumns: []
	});
	}

	const startSec = pivotTable.traceTime ? pivotTable.traceTime.startSec :
	globals.state.traceTime.startSec;
	const endSec = pivotTable.traceTime ? pivotTable.traceTime.endSec :
	globals.state.traceTime.endSec;

	return m(
	'div.pivot-table-tab',
	m(
	'header.overview',
	m('span',
	m('button',
	{
	disabled: helper === undefined \|\| pivotTable.isLoadingQuery,
	onclick: () => {
	if (helper !== undefined) {
	helper.toggleEditPivotTableModal();
	globals.rafScheduler.scheduleFullRedraw();
	}
	}
	},
	'Edit'),
	' ',
	(pivotTable.isLoadingQuery ? m('.pivot-table-spinner') : null),
	(resp !== undefined && !pivotTable.isLoadingQuery ?
	m('span.code',
	`Query took ${Math.round(resp.durationMs)} ms -`) :
	null),
	m('span.code', `Selected range: ${endSec - startSec} s`)),
	m('button',
	{
	disabled: helper === undefined \|\| pivotTable.isLoadingQuery,
	onclick: () => {
	globals.frontendLocalState.togglePivotTable();
	globals.queryResults.delete(pivotTableId);
	globals.pivotTableHelper.delete(pivotTableId);
	globals.dispatch(Actions.deletePivotTable({pivotTableId}));
	}
	},
	'Close'),
	),
	m('.query-table-container',
	m('table.query-table.pivot-table',
	m('thead', header),
	m('tbody', body))));
	}

	renderCanvas() {}
	}