<commit_before>import * as React from 'react';
import { Observable } from 'rxjs';
import { Icon } from 'react-fa';
import { Col, Form, FormGroup, InputGroup, FormControl, Button, MenuItem, Panel, Tab,
  Well, ListGroup, ListGroupItem, Table, OverlayTrigger, Overlay, Tooltip, Popover, Label,
} from 'react-bootstrap';

import { Property, Command } from '../../WebRx';
import { Logging, Alert } from '../../Utils';
import { wxr } from '../React';
import { SampleData, SampleTreeData, sampleListData, sampleTreeData } from './RoutingMap';
import * as Components from '../Common';
// import { TodoListView } from './TodoList/TodoListView';
// import { TodoListViewModel } from './TodoList/TodoListViewModel';
import { ComponentDemoViewModel } from './ComponentDemoViewModel';
import { ComponentDemoView, ViewActivatorMap } from './ComponentDemoView';
import { ViewMap as AppViewMap } from '../../Routing';

const logger = Logging.getLogger('Demo.ViewMap');

const sampleDataTemplate = (x: SampleData) => {
  return (
    <div key={ x.id }>
      <div>
        <span>Name: </span><span>{ x.name }</span>
      </div>
      <div>
        <span>Required By: </span><span>{ x.requiredBy }</span>
      </div>
    </div>
  );
};

const sampleDataCmdTemplate = (x: SampleData) => {
  return (
    <Components.CommandButton block plain stopPropagation={ false } href='#' style={ ({ padding: 5 }) }>
      { sampleDataTemplate(x) }
    </Components.CommandButton>
  );
};

export const demoViewMap: ViewActivatorMap = {
  Loading: () => <Components.Loading text='Standard Loader...' />,
  SizedLoading: (c, cr) => wxr.renderSizedLoadable(true, '50px Loader...', 50),
  Splash: () => <Components.Splash fluid header='webrx-react Demo' logo='http://placehold.it/100x100?text=Logo' />,
  CommandButton: () => (
    <Form>
      <FormGroup bsSize='large' style={({ marginBottom: 0 })}>
        <InputGroup>
          <FormControl id='CommandButtonParamInput' type='text' placeholder='Enter Command Parameter Text Here...' />
          <InputGroup.Button>
            <Components.CommandButton bsSize='large'
              commandParameter={() => ((document.getElementById('CommandButtonParamInput') || {}) as HTMLInputElement).value }
              command={Components.CommandButton.wx.command(x => Alert.create(x, 'CommandButton Pressed'))}
              tooltip='Embedded Command Tooltips!!!'
            >
              Execute Command
            </Components.CommandButton>
            <Components.CommandButton bsSize='large'
              commandParameter={() => ((document.getElementById('CommandButtonParamInput') || {}) as HTMLInputElement).value }
              command={Components.CommandButton.wx.command(x => Alert.create(x, 'CommandButton Pressed'))}
              tooltip={ (<Popover id='cmd-btn-custom-tt' placement='top'>Custom Tooltip</Popover>) }
            >
              Same Command
            </Components.CommandButton>
            <Components.CommandButton bsSize='large'
              commandParameter={() => ((document.getElementById('CommandButtonParamInput') || {}) as HTMLInputElement).value }
              command={Components.CommandButton.wx.command(x => Alert.create(x, 'CommandButton Pressed'))}
              tooltip={(
                <OverlayTrigger placement='bottom'
                  overlay={ (<Tooltip id='cmd-btn-custom-tt'>Custom Overlay Tooltip</Tooltip>) }
                />
              )}
            >
              Same Again
            </Components.CommandButton>
          </InputGroup.Button>
        </InputGroup>
      </FormGroup>
    </Form>
  ),
  Alert: () => (
    <div>
      <Button onClick={() => Alert.create(`Alert Content: ${new Date()}`, 'Info Alert', 'info')}>Info Alert</Button>
      <Button onClick={() => Alert.createForError(new Error(`Error Message: ${new Date()}`), 'Error Alert')}>Error Alert</Button>
    </div>
  ),
  ObservableWrapper: () => (
    <Components.ObservableWrapper observable={ Observable.timer(0, 1000) } render={ x => (<div>Current Value is { x }</div>) } />
  ),
  SearchViewModel: (viewModel: Components.SearchViewModel) => (
    <Form horizontal>
      <FormGroup>
        <Col sm={12}>
          <Components.SearchView viewModel={ viewModel } />
        </Col>
      </FormGroup>
    </Form>
  ),
  TimeSpanInputViewModel: (viewModel: Components.TimeSpanInputViewModel) => (
    <Form>
      <Components.TimeSpanInputView viewModel={ viewModel } /><commit_msg>removing bottom margin from search demo<commit_after>import * as React from 'react';
import { Observable } from 'rxjs';
import { Icon } from 'react-fa';
import { Col, Form, FormGroup, InputGroup, FormControl, Button, MenuItem, Panel, Tab,
  Well, ListGroup, ListGroupItem, Table, OverlayTrigger, Overlay, Tooltip, Popover, Label,
} from 'react-bootstrap';

import { Property, Command } from '../../WebRx';
import { Logging, Alert } from '../../Utils';
import { wxr } from '../React';
import { SampleData, SampleTreeData, sampleListData, sampleTreeData } from './RoutingMap';
import * as Components from '../Common';
// import { TodoListView } from './TodoList/TodoListView';
// import { TodoListViewModel } from './TodoList/TodoListViewModel';
import { ComponentDemoViewModel } from './ComponentDemoViewModel';
import { ComponentDemoView, ViewActivatorMap } from './ComponentDemoView';
import { ViewMap as AppViewMap } from '../../Routing';

const logger = Logging.getLogger('Demo.ViewMap');

const sampleDataTemplate = (x: SampleData) => {
  return (
    <div key={ x.id }>
      <div>
        <span>Name: </span><span>{ x.name }</span>
      </div>
      <div>
        <span>Required By: </span><span>{ x.requiredBy }</span>
      </div>
    </div>
  );
};

const sampleDataCmdTemplate = (x: SampleData) => {
  return (
    <Components.CommandButton block plain stopPropagation={ false } href='#' style={ ({ padding: 5 }) }>
      { sampleDataTemplate(x) }
    </Components.CommandButton>
  );
};

export const demoViewMap: ViewActivatorMap = {
  Loading: () => <Components.Loading text='Standard Loader...' />,
  SizedLoading: (c, cr) => wxr.renderSizedLoadable(true, '50px Loader...', 50),
  Splash: () => <Components.Splash fluid header='webrx-react Demo' logo='http://placehold.it/100x100?text=Logo' />,
  CommandButton: () => (
    <Form>
      <FormGroup bsSize='large' style={({ marginBottom: 0 })}>
        <InputGroup>
          <FormControl id='CommandButtonParamInput' type='text' placeholder='Enter Command Parameter Text Here...' />
          <InputGroup.Button>
            <Components.CommandButton bsSize='large'
              commandParameter={() => ((document.getElementById('CommandButtonParamInput') || {}) as HTMLInputElement).value }
              command={Components.CommandButton.wx.command(x => Alert.create(x, 'CommandButton Pressed'))}
              tooltip='Embedded Command Tooltips!!!'
            >
              Execute Command
            </Components.CommandButton>
            <Components.CommandButton bsSize='large'
              commandParameter={() => ((document.getElementById('CommandButtonParamInput') || {}) as HTMLInputElement).value }
              command={Components.CommandButton.wx.command(x => Alert.create(x, 'CommandButton Pressed'))}
              tooltip={ (<Popover id='cmd-btn-custom-tt' placement='top'>Custom Tooltip</Popover>) }
            >
              Same Command
            </Components.CommandButton>
            <Components.CommandButton bsSize='large'
              commandParameter={() => ((document.getElementById('CommandButtonParamInput') || {}) as HTMLInputElement).value }
              command={Components.CommandButton.wx.command(x => Alert.create(x, 'CommandButton Pressed'))}
              tooltip={(
                <OverlayTrigger placement='bottom'
                  overlay={ (<Tooltip id='cmd-btn-custom-tt'>Custom Overlay Tooltip</Tooltip>) }
                />
              )}
            >
              Same Again
            </Components.CommandButton>
          </InputGroup.Button>
        </InputGroup>
      </FormGroup>
    </Form>
  ),
  Alert: () => (
    <div>
      <Button onClick={() => Alert.create(`Alert Content: ${new Date()}`, 'Info Alert', 'info')}>Info Alert</Button>
      <Button onClick={() => Alert.createForError(new Error(`Error Message: ${new Date()}`), 'Error Alert')}>Error Alert</Button>
    </div>
  ),
  ObservableWrapper: () => (
    <Components.ObservableWrapper observable={ Observable.timer(0, 1000) } render={ x => (<div>Current Value is { x }</div>) } />
  ),
  SearchViewModel: (viewModel: Components.SearchViewModel) => (
    <Form horizontal onSubmit={ () => false }>
      <FormGroup style={ ({ marginBottom: 0 }) }>
        <Col sm={12}>
          <Components.SearchView viewModel={ viewModel } />
        </Col>
      </FormGroup>
    </Form>
  ),
  TimeSpanInputViewModel: (viewModel: Components.TimeSpanInputViewModel) => (
    <Form>
      <Components.TimeSpanInputView viewModel={ viewModel } />
{'fraction_non_alphanumeric': 0.15882025598219254, 'fraction_numerical': 0.004340567612687813, 'mean_word_length': 3.0205816554809846, 'pattern_counts': {'":': 0, '<': 115, '<?xml version=': 0, '>': 154, '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': '102736', 'n_tokens_mistral': 2578, 'n_tokens_neox': 2497, 'n_words': 564}