<commit_before>import React from 'react';
import _ from 'lodash';
import {Button, Card, Dropdown, Grid, Icon, Segment} from 'semantic-ui-react';
import {panelClasses} from '../util/registry.js';
import QueryEditor from '../components/QueryEditor';
import {filterRuns, sortRuns} from '../util/runhelpers.js';
import withRunsDataLoader from '../containers/RunsDataLoader';
import ContentLoader from 'react-content-loader';

import './PanelRunsLinePlot';
import './PanelLinePlot';
import './PanelImages';
import './PanelScatterPlot';
import './PanelParallelCoord';

class Panel extends React.Component {
  state = {configMode: false, showQuery: false};
  static loading = (
    <Segment basic style={{minHeight: 260}}>
      <ContentLoader />
    </Segment>
  );

  renderPanelType(PanelType, configMode, config, data, sizeKey, panelQuery) {
    if (!data) {
      return Panel.loading;
    }
    return (
      <div style={{clear: 'both'}}>
        <PanelType
          configMode={configMode}
          config={config}
          updateConfig={this.props.updateConfig}
          sizeKey={sizeKey}
          panelQuery={panelQuery}
          data={data}
        />
      </div>
    );
  }

  render() {
    let {type, size, config, data} = this.props;
    let panel, PanelType, configMode, options, sizeKey;
    if (!data) {
      panel = Panel.loading;
    } else {
      options = _.keys(panelClasses)<commit_msg>Fix ContentLoader height on Run page<commit_after>import React from 'react';
import _ from 'lodash';
import {Button, Card, Dropdown, Grid, Icon, Segment} from 'semantic-ui-react';
import {panelClasses} from '../util/registry.js';
import QueryEditor from '../components/QueryEditor';
import {filterRuns, sortRuns} from '../util/runhelpers.js';
import withRunsDataLoader from '../containers/RunsDataLoader';
import ContentLoader from 'react-content-loader';

import './PanelRunsLinePlot';
import './PanelLinePlot';
import './PanelImages';
import './PanelScatterPlot';
import './PanelParallelCoord';

class Panel extends React.Component {
  state = {configMode: false, showQuery: false};
  static loading = (
    <Segment basic style={{minHeight: 260}}>
      <ContentLoader height={85} />
    </Segment>
  );

  renderPanelType(PanelType, configMode, config, data, sizeKey, panelQuery) {
    if (!data) {
      return Panel.loading;
    }
    return (
      <div style={{clear: 'both'}}>
        <PanelType
          configMode={configMode}
          config={config}
          updateConfig={this.props.updateConfig}
          sizeKey={sizeKey}
          panelQuery={panelQuery}
          data={data}
        />
      </div>
    );
  }

  render() {
    let {type, size, config, data} = this.props;
    let panel, PanelType, configMode, options, sizeKey;
    if (!data) {
      panel = Panel.loading;
    } else {
      options = _.keys(panelClasses)
{'fraction_non_alphanumeric': 0.13885974116824065, 'fraction_numerical': 0.0027981811822315496, 'mean_word_length': 3.1997063142437594, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 15, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '808154', 'n_tokens_mistral': 848, 'n_tokens_neox': 835, 'n_words': 217}