<commit_before>import { Provider, useSelector } from 'react-redux';
import { State, store } from '../states/store';
import styled, { createGlobalStyle } from 'styled-components';
import { About } from './About';
import { AutomatonStateListener } from './AutomatonStateListener';
import { AutomatonWithGUI } from '../../AutomatonWithGUI';
import { ChannelList } from './ChannelList';
import { Colors } from '../constants/Colors';
import { ContextMenu } from './ContextMenu';
import { CurveEditor } from './CurveEditor';
import { CurveList } from './CurveList';
import { DopeSheet } from './DopeSheet';
import { DopeSheetOverlay } from './DopeSheetOverlay';
import { DopeSheetUnderlay } from './DopeSheetUnderlay';
import { FxSpawner } from './FxSpawner';
import { Header } from './Header';
import { Inspector } from './Inspector';
import { Metrics } from '../constants/Metrics';
import React from 'react';
import { Scrollable } from './Scrollable';
import { Stalker } from './Stalker';
import { Timeline } from './Timeline';

// == styles =======================================================================================
const GlobalStyle = createGlobalStyle`
  @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');

  * {
    box-sizing: border-box;
  }
`;

const StyledHeader = styled( Header )`
  position: absolute;
  top: 0;
  width: 100%;
  height: ${ Metrics.headerHeight };
`;

const StyledChannelList = styled( ChannelList )`
  width: ${ Metrics.channelListWidth - 4 }px;
  margin: 0 2px;
`;

const StyledDopeSheetUnderlay = styled( DopeSheetUnderlay )`
  position: absolute;
  width: calc( 100% - ${ Metrics.channelListWidth }px - ${ Metrics.inspectorWidth } );
  height: calc( 100% - ${ Metrics.headerHeight } );
  left: ${ Metrics.channelListWidth }px;
  top: ${ Metrics.headerHeight };
`;

const StyledDopeSheetOverlay = styled( DopeSheetOverlay )`
  position: absolute;
  width: calc( 100% - ${ Metrics.channelListWidth }px - ${ Metrics.inspectorWidth } );
  height: calc( 100% - ${ Metrics.headerHeight } );
  left: ${ Metrics.channelListWidth }px;
  top: ${ Metrics.headerHeight };
  pointer-events: none;
`;

const StyledDopeSheet = styled( DopeSheet )`
  width: calc( 100% - ${ Metrics.channelListWidth }px );
  flex-grow: 1;
`;

const StyledTimeline = styled( Timeline )`
  position: absolute;
  left: ${ Metrics.channelListWidth }px;
  top: ${ Metrics.headerHeight };
  width: calc( 100% - ${ Metrics.channelListWidth }px - ${ Metrics.inspectorWidth } );
  height: calc( 100% - ${ Metrics.headerHeight } );
`;

const ChannelListAndDopeSheetContainer = styled.div`
  display: flex;
`;

const ChannelListAndDopeSheetScrollable = styled( Scrollable )`
  position: absolute;
  left: 0;
  top: ${ Metrics.headerHeight };
  width: calc( 100% - ${ Metrics.inspectorWidth } );
  height: calc( 100% - ${ Metrics.headerHeight } );
`;

const StyledCurveList = styled( CurveList )`
  position: absolute;
  bottom: 0;
  width: ${ Metrics.curveListWidth }px;
  height: calc( 100% - ${ Metrics.headerHeight } );
`;

const StyledCurveEditor = styled( CurveEditor )`
  position: absolute;
  left: ${ Metrics.curveListWidth }px;
  bottom: 0;
  width: calc( 100% - ${ Metrics.curveListWidth }px - ${ Metrics.inspectorWidth } );
  height: calc( 100% - ${ Metrics.headerHeight } );
`;

const StyledInspector = styled( Inspector )`
  position: absolute;
  right: 0;
  bottom: 0;<commit_msg>(from automaton-with-gui repo) add a margin at the bottom of dopesheet to make rangebar visible<commit_after>import { Provider, useSelector } from 'react-redux';
import { State, store } from '../states/store';
import styled, { createGlobalStyle } from 'styled-components';
import { About } from './About';
import { AutomatonStateListener } from './AutomatonStateListener';
import { AutomatonWithGUI } from '../../AutomatonWithGUI';
import { ChannelList } from './ChannelList';
import { Colors } from '../constants/Colors';
import { ContextMenu } from './ContextMenu';
import { CurveEditor } from './CurveEditor';
import { CurveList } from './CurveList';
import { DopeSheet } from './DopeSheet';
import { DopeSheetOverlay } from './DopeSheetOverlay';
import { DopeSheetUnderlay } from './DopeSheetUnderlay';
import { FxSpawner } from './FxSpawner';
import { Header } from './Header';
import { Inspector } from './Inspector';
import { Metrics } from '../constants/Metrics';
import React from 'react';
import { Scrollable } from './Scrollable';
import { Stalker } from './Stalker';
import { Timeline } from './Timeline';

// == styles =======================================================================================
const GlobalStyle = createGlobalStyle`
  @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');

  * {
    box-sizing: border-box;
  }
`;

const StyledHeader = styled( Header )`
  position: absolute;
  top: 0;
  width: 100%;
  height: ${ Metrics.headerHeight };
`;

const StyledChannelList = styled( ChannelList )`
  width: ${ Metrics.channelListWidth - 4 }px;
  margin: 0 2px;
`;

const StyledDopeSheetUnderlay = styled( DopeSheetUnderlay )`
  position: absolute;
  width: calc( 100% - ${ Metrics.channelListWidth }px - ${ Metrics.inspectorWidth } );
  height: calc( 100% - ${ Metrics.headerHeight } );
  left: ${ Metrics.channelListWidth }px;
  top: ${ Metrics.headerHeight };
`;

const StyledDopeSheetOverlay = styled( DopeSheetOverlay )`
  position: absolute;
  width: calc( 100% - ${ Metrics.channelListWidth }px - ${ Metrics.inspectorWidth } );
  height: calc( 100% - ${ Metrics.headerHeight } );
  left: ${ Metrics.channelListWidth }px;
  top: ${ Metrics.headerHeight };
  pointer-events: none;
`;

const StyledDopeSheet = styled( DopeSheet )`
  width: calc( 100% - ${ Metrics.channelListWidth }px );
  flex-grow: 1;
`;

const StyledTimeline = styled( Timeline )`
  position: absolute;
  left: ${ Metrics.channelListWidth }px;
  top: ${ Metrics.headerHeight };
  width: calc( 100% - ${ Metrics.channelListWidth }px - ${ Metrics.inspectorWidth } );
  height: calc( 100% - ${ Metrics.headerHeight } );
`;

const ChannelListAndDopeSheetContainer = styled.div`
  display: flex;
  padding-bottom: 4px;
`;

const ChannelListAndDopeSheetScrollable = styled( Scrollable )`
  position: absolute;
  left: 0;
  top: ${ Metrics.headerHeight };
  width: calc( 100% - ${ Metrics.inspectorWidth } );
  height: calc( 100% - ${ Metrics.headerHeight } );
`;

const StyledCurveList = styled( CurveList )`
  position: absolute;
  bottom: 0;
  width: ${ Metrics.curveListWidth }px;
  height: calc( 100% - ${ Metrics.headerHeight } );
`;

const StyledCurveEditor = styled( CurveEditor )`
  position: absolute;
  left: ${ Metrics.curveListWidth }px;
  bottom: 0;
  width: calc( 100% - ${ Metrics.curveListWidth }px - ${ Metrics.inspectorWidth } );
  height: calc( 100% - ${ Metrics.headerHeight } );
`;

const StyledInspector = styled( Inspector )`
  position: absolute;
  right: 0;
  bottom: 0;
{'fraction_non_alphanumeric': 0.1725428119153835, 'fraction_numerical': 0.01856382213268096, 'mean_word_length': 4.404354587869363, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, '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': '213855', 'n_tokens_mistral': 2340, 'n_tokens_neox': 2185, 'n_words': 549}