<commit_before>
import React from "react";
import twixty from "twixtykit";

import Loading from "../Loading";
import SK from "../../SK";
import SceneThumbnail from "./SceneThumbnail";
import style from "./SceneThumbnailList.scss";

export default class SceneThumbnailList extends React.Component{
  constructor() {
    super();
    this.state = {};
  }

  componentDidMount() {
    const broadcastId = this.props.broadcastId;
    let filter = {};
    if (broadcastId) {
      filter = {broadcastId};
      this.broadcastHandle = SK.broadcasts.watch({id: broadcastId})
      .on("data", ([broadcast]) => {
        this.setState({broadcast});
      })
      .catch(::twixty.error);
    }
    this.sceneHandle = SK.scenes.watch(filter)
    .on("data", (scenes) => {
      this.setState({scenes});
    })
    .catch((err) => {
      twixty.error(err);
    });
  }

  componentWillUnmount() {
    this.sceneHandle.stop();
    if (this.broadcastHandle) {
      this.broadcastHandle.stop();
    }
  }

  handleClick(id) {
    this.props.onPick(id);
  }

  render () {
    if (this.state.scenes === undefined) {<commit_msg>Sort scenes in the scene viewer<commit_after>
import React from "react";
import twixty from "twixtykit";

import Loading from "../Loading";
import SK from "../../SK";
import SceneThumbnail from "./SceneThumbnail";
import style from "./SceneThumbnailList.scss";

export default class SceneThumbnailList extends React.Component{
  constructor() {
    super();
    this.state = {};
  }

  componentDidMount() {
    const broadcastId = this.props.broadcastId;
    let filter = {};
    if (broadcastId) {
      filter = {broadcastId};
      this.broadcastHandle = SK.broadcasts.watch({id: broadcastId})
      .on("data", ([broadcast]) => {
        this.setState({broadcast});
      })
      .catch(::twixty.error);
    }
    this.sceneHandle = SK.scenes.watch(filter)
    .on("data", (scenes) => {
      scenes = scenes.sort((a, b) => {
        if (a.title > b.title) {
          return 1;
        }
        return -1;
      });
      this.setState({scenes});
    })
    .catch((err) => {
      twixty.error(err);
    });
  }

  componentWillUnmount() {
    this.sceneHandle.stop();
    if (this.broadcastHandle) {
      this.broadcastHandle.stop();
    }
  }

  handleClick(id) {
    this.props.onPick(id);
  }

  render () {
    if (this.state.scenes === undefined) {
{'fraction_non_alphanumeric': 0.16225304749894914, 'fraction_numerical': 0.0008406893652795292, 'mean_word_length': 2.689922480620155, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 11, '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': '5932080', 'n_tokens_mistral': 798, 'n_tokens_neox': 774, 'n_words': 153}