services/workbench2/src/components/code-snippet/virtual-code-snippet.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { CustomStyleRulesCallback } from 'common/custom-theme';
   7 import { Typography } from '@mui/material';
   8 import { WithStyles } from '@mui/styles';
   9 import withStyles from '@mui/styles/withStyles';
  10 import { ArvadosTheme } from 'common/custom-theme';
  11 import classNames from 'classnames';
  12 import { connect, DispatchProp } from 'react-redux';
  13 import { RootState } from 'store/store';
  14 import { FederationConfig } from 'routes/routes';
  15 import { renderLinks } from './code-snippet';
  16 import { FixedSizeList } from 'react-window';
  17 import AutoSizer from "react-virtualized-auto-sizer";
  18
  19 type CssRules = 'root' | 'space' | 'content' ;
  20
  21 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  22     root: {
  23         boxSizing: 'border-box',
  24         height: '100%',
  25         padding: theme.spacing(1),
  26     },
  27     space: {
  28         marginLeft: '15px',
  29     },
  30     content: {
  31         maxHeight: '100%',
  32         height: '100vh',
  33     },
  34 });
  35
  36 export interface CodeSnippetDataProps {
  37     lines: string[];
  38     lineFormatter?: (lines: string[], index: number) => string;
  39     className?: string;
  40     apiResponse?: boolean;
  41     linked?: boolean;
  42 }
  43
  44 interface CodeSnippetAuthProps {
  45     auth: FederationConfig;
  46 }
  47
  48 type CodeSnippetProps = CodeSnippetDataProps & WithStyles<CssRules>;
  49
  50 const mapStateToProps = (state: RootState): CodeSnippetAuthProps => ({
  51     auth: state.auth,
  52 });
  53
  54 export const VirtualCodeSnippet = withStyles(styles)(connect(mapStateToProps)(
  55     ({ classes, lines, lineFormatter, linked, className, apiResponse, dispatch, auth }: CodeSnippetProps & CodeSnippetAuthProps & DispatchProp) => {
  56         const RenderRow = ({index, style}) => {
  57             const lineContents = lineFormatter ? lineFormatter(lines, index) : lines[index];
  58             return <span style={style}>{linked ? renderLinks(auth, dispatch)(lineContents) : lineContents}</span>
  59         };
  60
  61         return <Typography
  62             component="div"
  63             data-cy="virtual-code-snippet"
  64             className={classNames([classes.root, className])}>
  65             <Typography className={classNames(classes.content, apiResponse ? classes.space : className)} component="pre">
  66                 <AutoSizer>
  67                     {({ height, width }) =>
  68                         <FixedSizeList
  69                             height={height}
  70                             width={width}
  71                             itemSize={21}
  72                             itemCount={lines.length}
  73                         >
  74                             {RenderRow}
  75                         </FixedSizeList>
  76                     }
  77                 </AutoSizer>
  78             </Typography>
  79         </Typography>;
  80 }));