Line data    Source code

       1              : import * as React from 'react';
       2              : import * as styles from '../query_result/query_result_header.module.css';
       3              : 
       4              : import type { QueryExecutionState } from '../../query/query_execution_state.js';
       5              : import type { ResolvedVisualizeQuery } from '../../session/scripts/script_types.js';
       6              : import { TabHeader, formatRowCountDetail, useResultRowCount } from '../../session/tab_header.js';
       7              : import { QueryResultPanel } from '../query_result/query_result_header.js';
       8              : import { ChartDownloadButton } from './chart_download_button.js';
       9              : import { VisualizationDispatch } from './visualization_dispatch.js';
      10              : import { classNames } from '../../utils/classnames.js';
      11              : 
      12              : /// The height of the header bar over the visualization, see `tab_header.module.css`
      13            1 : const HEADER_HEIGHT = 32;
      14              : 
      15              : interface Props {
      16              :     query: QueryExecutionState | null;
      17              :     visualizeQuery: ResolvedVisualizeQuery;
      18              :     /// The width and height of the whole panel in px, the visualization gets the height below the header
      19              :     width?: number;
      20              :     height?: number;
      21              :     hideLegend?: boolean;
      22              :     preview?: boolean;
      23              :     /// The background of the cells of a result table
      24              :     cellBackground?: string;
      25              : }
      26              : 
      27              : /// The visualization of a script with the header bar of the feed above it: a table gets the header of a
      28              : /// query result, a chart the visualization header with the row count and the chart download.
      29              : /// The dataflow boxes show their visualizations in it.
      30            0 : export function VisualizationPanel(props: Props): React.ReactElement {
      31            0 :     const { hasResult, totalRows } = useResultRowCount(props.query);
      32            0 :     const vq = props.visualizeQuery;
      33            0 :     if (vq.renderer === 'table') {
      34            0 :         return <QueryResultPanel query={props.query} cellBackground={props.cellBackground} />;
      35              :     }
      36            0 :     const showHeader = hasResult && props.query != null;
      37            0 :     return (
      38            0 :         <div className={classNames(styles.panel, styles.chart_panel)}>
      39            0 :             {showHeader && (
      40            0 :                 <TabHeader
      41            0 :                     title="Visualization"
      42            0 :                     detail={formatRowCountDetail(totalRows)}
      43            0 :                     actions={vq.renderer === 'vegalite' ? <ChartDownloadButton query={props.query!} spec={vq.vegaLiteSpec} /> : undefined}
      44            0 :                 />
      45              :             )}
      46            0 :             <div className={styles.panel_body}>
      47            0 :                 <VisualizationDispatch
      48            0 :                     query={props.query}
      49            0 :                     visualizeQuery={vq}
      50            0 :                     width={props.width}
      51            0 :                     height={props.height == null ? undefined : Math.max(0, props.height - (showHeader ? HEADER_HEIGHT : 0))}
      52            0 :                     hideLegend={props.hideLegend}
      53            0 :                     preview={props.preview}
      54            0 :                 />
      55            0 :             </div>
      56            0 :         </div>
      57              :     );
      58            0 : }