<commit_before>import React, { Component } from 'react';
import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
// import _ from 'lodash';
// import queryString from 'query-string';
import { compose } from 'redux';
import { connect } from 'react-redux';

import { queryDiagrams } from 'src/actions';
import { selectDiagramsResult } from 'src/selectors';
import Query from 'src/app/Query';
import Screen from 'src/components/Screen/Screen';
import Dashboard from 'src/components/Dashboard/Dashboard';
import {
  Breadcrumbs, SectionLoading,
} from 'src/components/common';
import ErrorScreen from 'src/components/Screen/ErrorScreen';
import DiagramCreateButton from 'src/components/Toolbar/DiagramCreateButton';
import DiagramList from 'src/components/Diagram/DiagramList';


import './DiagramsIndexScreen.scss';

const messages = defineMessages({
  title: {
    id: 'diagrams.title',
    defaultMessage: 'Network diagrams',
  },
  no_results_title: {
    id: 'diagrams.no_results_title',
    defaultMessage: 'You do not have any network diagrams yet',
  },
});

export class DiagramsIndexScreen extends Component {
  constructor(props) {
    super(props);
    this.getMoreResults = this.getMoreResults.bind(this);
  }

  componentDidMount() {
    this.fetchIfNeeded();
  }

  componentDidUpdate(prevProps) {
    const { result } = this.props;

    if (result.shouldLoad && !prevProps.result.shouldLoad) {
      this.fetchIfNeeded();
    }
  }

  getMoreResults() {
    const { query, result } = this.props;
    if (result && !result.isLoading && result.next && !result.isError) {
      this.props.queryDiagrams({ query, next: result.next });
    }
  }

  fetchIfNeeded() {
    const { result, query } = this.props;
    if (!result.isLoading) {
      this.props.queryDiagrams({ query });
    }
  }

  render() {
    const { intl, result } = this.props;

    if (result.isError) {
      return <ErrorScreen error={result.error} />;
    }

    const breadcrumbs = (
      <Breadcrumbs>
        <li>
          <FormattedMessage
            id="cases.browser.breadcrumb"
            defaultMessage="Diagrams"
          />
        </li>
      </Breadcrumbs>
    );

    return (
      <Screen
        className="DiagramsIndexScreen"
        breadcrumbs={breadcrumbs}
        title={intl.formatMessage(messages.title)}
        requireSession
      >
        <Dashboard>
          <div className="Dashboard__title-container">
            <div className="Dashboard__actions">
              <DiagramCreateButton />
            </div>
            <h5 className="Dashboard__title">{intl.formatMessage(messages.title)}</h5>
            <p className="Dashboard__subheading">
              <FormattedMessage
                id="diagram.description"
                defaultMessage="Network diagrams let you visualize complex relationships within a dataset."
              />
            </p>
          </div>
          { !result.results && (
            <SectionLoading />
          )}
          { result.results && (
            <DiagramList
              items={result.results}
              getMoreItems={this.getMoreResults}
              showCollection
            />
          )}
        </Dashboard>
      </Screen>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  const { location } = ownProps;
  const query = Query.fromLocation('diagrams', location, {}, 'diagrams')
    .sortBy('updated_at', 'desc');
  const result = selectDiagramsResult(state, query);

  return {
    query,
    result,
  };
};


export default compose(
  connect(mapStateToProps, { queryDiagrams }),
  injectIntl,
)(DiagramsIndexScreen);<commit_msg>made sure loading spinner appears on diagramIndexScreen<commit_after>import React, { Component } from 'react';
import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
// import _ from 'lodash';
// import queryString from 'query-string';
import { compose } from 'redux';
import { connect } from 'react-redux';

import { queryDiagrams } from 'src/actions';
import { selectDiagramsResult } from 'src/selectors';
import Query from 'src/app/Query';
import Screen from 'src/components/Screen/Screen';
import Dashboard from 'src/components/Dashboard/Dashboard';
import {
  Breadcrumbs, SectionLoading,
} from 'src/components/common';
import ErrorScreen from 'src/components/Screen/ErrorScreen';
import DiagramCreateButton from 'src/components/Toolbar/DiagramCreateButton';
import DiagramList from 'src/components/Diagram/DiagramList';


import './DiagramsIndexScreen.scss';

const messages = defineMessages({
  title: {
    id: 'diagrams.title',
    defaultMessage: 'Network diagrams',
  },
  no_results_title: {
    id: 'diagrams.no_results_title',
    defaultMessage: 'You do not have any network diagrams yet',
  },
});

export class DiagramsIndexScreen extends Component {
  constructor(props) {
    super(props);
    this.getMoreResults = this.getMoreResults.bind(this);
  }

  componentDidMount() {
    this.fetchIfNeeded();
  }

  componentDidUpdate(prevProps) {
    const { result } = this.props;

    if (result.shouldLoad && !prevProps.result.shouldLoad) {
      this.fetchIfNeeded();
    }
  }

  getMoreResults() {
    const { query, result } = this.props;
    if (result && !result.isLoading && result.next && !result.isError) {
      this.props.queryDiagrams({ query, next: result.next });
    }
  }

  fetchIfNeeded() {
    const { result, query } = this.props;
    if (!result.isLoading) {
      this.props.queryDiagrams({ query });
    }
  }

  render() {
    const { intl, result } = this.props;

    if (result.isError) {
      return <ErrorScreen error={result.error} />;
    }

    const breadcrumbs = (
      <Breadcrumbs>
        <li>
          <FormattedMessage
            id="cases.browser.breadcrumb"
            defaultMessage="Diagrams"
          />
        </li>
      </Breadcrumbs>
    );

    return (
      <Screen
        className="DiagramsIndexScreen"
        breadcrumbs={breadcrumbs}
        title={intl.formatMessage(messages.title)}
        requireSession
      >
        <Dashboard>
          <div className="Dashboard__title-container">
            <div className="Dashboard__actions">
              <DiagramCreateButton />
            </div>
            <h5 className="Dashboard__title">{intl.formatMessage(messages.title)}</h5>
            <p className="Dashboard__subheading">
              <FormattedMessage
                id="diagram.description"
                defaultMessage="Network diagrams let you visualize complex relationships within a dataset."
              />
            </p>
          </div>
          { result.isLoading && !result.results?.length && (
            <SectionLoading />
          )}
          { result.results && (
            <DiagramList
              items={result.results}
              getMoreItems={this.getMoreResults}
              showCollection
            />
          )}
        </Dashboard>
      </Screen>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  const { location } = ownProps;
  const query = Query.fromLocation('diagrams', location, {}, 'diagrams')
    .sortBy('updated_at', 'desc');

  const result = selectDiagramsResult(state, query);

  return {
    query,
    result,
  };
};


export default compose(
  connect(mapStateToProps, { queryDiagrams }),
  injectIntl,
)(DiagramsIndexScreen);
{'fraction_non_alphanumeric': 0.1231500339443313, 'fraction_numerical': 0.0005431093007467753, 'mean_word_length': 2.657398212512413, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 49, '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': '5998010', 'n_tokens_mistral': 2174, 'n_tokens_neox': 2150, 'n_words': 436}