<commit_before>/* @flow */

import React from 'react'
import ReactTable from 'sb-react-table'
import { severityNames, sortMessages, visitMessage, getFileOfMessage, getLineOfMessage } from '../helpers'
import type Delegate from './delegate'
import type { LinterMessage } from '../types'

export default class PanelElement extends React.Component {
  props: {
    delegate: Delegate,
  };
  state: {
    messages: Array<LinterMessage>,
    visibility: boolean,
  } = { messages: [], visibility: false };
  componentDidMount() {
    this.props.delegate.onDidChangeMessages((messages) => {
      this.setState({ messages })
    })
    this.props.delegate.onDidChangeVisibility((visibility) => {
      this.setState({ visibility })
    })
    this.setState({ messages: this.props.delegate.filteredMessages, visibility: this.props.delegate.visibility })
  }
  render() {
    const columns = [
      { key: 'severity', label: 'Severity', sortable: true },
      { key: 'linterName', label: 'Provider', sortable: true },
      { key: 'excerpt', label: 'Description' },
      { key: 'file', label: 'File', sortable: true, onClick: (e, row) => visitMessage(row) },
      { key: 'line', label: 'Line', sortable: true },
    ]
    const showPanel = this.state.visibility && this.state.messages.length

    return (
      <div id="linter-panel" style={{ display: showPanel ? 'block' : 'none' }}>
        <ReactTable
          rows={this.state.messages}
          columns={columns}

          initialSort={[{ column: 'severity', type: 'desc' }, { column: 'file', type: 'asc' }]}
          sort={sortMessages}
          rowKey={i => i.key}

          renderHeaderColumn={i => i.label}
          renderBodyColumn={PanelElement.renderRowColumn}

          style={{ width: '100%' }}
          className='linter'
        />
      </div>
    )
  }
  static renderRowColumn(row: LinterMessage, column: string): string | Object {
    switch (column) {
      case 'file':
        return getFileOfMessage(row)
      case 'line':
        return getLineOfMessage(row).toString()
      case 'excerpt':
        if (row.version === 1) {
          if (row.html) {
            return <span dangerouslySetInnerHTML={{ __html: row.html }} />
          }
          return row.text || ''
        }
        return row.excerpt
      case 'severity':
        return severityNames[row.severity]
      default:
        return row[column]
    }
  }
}
<commit_msg>:new: Add a max height to panel<commit_after>/* @flow */

import React from 'react'
import ReactTable from 'sb-react-table'
import { severityNames, sortMessages, visitMessage, getFileOfMessage, getLineOfMessage } from '../helpers'
import type Delegate from './delegate'
import type { LinterMessage } from '../types'

export default class PanelElement extends React.Component {
  props: {
    delegate: Delegate,
  };
  state: {
    messages: Array<LinterMessage>,
    visibility: boolean,
  } = { messages: [], visibility: false };
  componentDidMount() {
    this.props.delegate.onDidChangeMessages((messages) => {
      this.setState({ messages })
    })
    this.props.delegate.onDidChangeVisibility((visibility) => {
      this.setState({ visibility })
    })
    this.setState({ messages: this.props.delegate.filteredMessages, visibility: this.props.delegate.visibility })
  }
  render() {
    const columns = [
      { key: 'severity', label: 'Severity', sortable: true },
      { key: 'linterName', label: 'Provider', sortable: true },
      { key: 'excerpt', label: 'Description' },
      { key: 'file', label: 'File', sortable: true, onClick: (e, row) => visitMessage(row) },
      { key: 'line', label: 'Line', sortable: true },
    ]
    const showPanel = this.state.visibility && this.state.messages.length

    return (
      <div id="linter-panel" style={{ display: showPanel ? 'block' : 'none', maxHeight: 150 }}>
        <ReactTable
          rows={this.state.messages}
          columns={columns}

          initialSort={[{ column: 'severity', type: 'desc' }, { column: 'file', type: 'asc' }]}
          sort={sortMessages}
          rowKey={i => i.key}

          renderHeaderColumn={i => i.label}
          renderBodyColumn={PanelElement.renderRowColumn}

          style={{ width: '100%' }}
          className='linter'
        />
      </div>
    )
  }
  static renderRowColumn(row: LinterMessage, column: string): string | Object {
    switch (column) {
      case 'file':
        return getFileOfMessage(row)
      case 'line':
        return getLineOfMessage(row).toString()
      case 'excerpt':
        if (row.version === 1) {
          if (row.html) {
            return <span dangerouslySetInnerHTML={{ __html: row.html }} />
          }
          return row.text || ''
        }
        return row.excerpt
      case 'severity':
        return severityNames[row.severity]
      default:
        return row[column]
    }
  }
}

{'fraction_non_alphanumeric': 0.14473144731447316, 'fraction_numerical': 0.002255022550225502, 'mean_word_length': 2.6711813393528967, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 23, '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': '5590711', 'n_tokens_mistral': 1453, 'n_tokens_neox': 1419, 'n_words': 342}