<commit_before>React         = require 'react'
DetailPage    = require '../DetailPage.cjsx'

{ Header, Box, Split, Sidebar, Tabs, Tab } = require 'grommet'
AppControls = require '../menus/AppControls.cjsx'
YamlEditor  = require '../editors/YamlEditor.cjsx'

module.exports = React.createClass
  displayName: 'AppsDetailPage'

  getInitialState: ->
    dockerCompose: @props.dockerCompose
    bigboatCompose: @props.bigboatCompose

  render: ->
    if @props.dockerCompose
      @renderWithData()
    else @renderNoData()

  renderNoData: -> <span />

  onChange: (code) -> console.log 'onChange', code

  renderWithData: ->
    console.log @props.app
    <Split flex='left' priority='left'>
      <DetailPage title={@props.title} >
        <Tabs style={marginBottom:0} responsive={false}>
          <Tab title='Docker Compose'>
            <YamlEditor code={@props.dockerCompose} />
          </Tab>
          <Tab title='BigBoat Compose'>
            <YamlEditor code={@props.bigboatCompose} />
          </Tab>
        </Tabs>
      </DetailPage>
      <Sidebar size='medium' colorIndex='light-2' direction='column'>
        <Header pad='medium' size='large' />
        <AppControls onRemoveApp={@props.onRemoveApp} onStartApp={@props.onStartApp} name={@props.title} />
      </Sidebar>
    </Split><commit_msg>temporarily store changed compose text in state so it isn't lost when the user navigates between compose editors on the page.<commit_after>React         = require 'react'
DetailPage    = require '../DetailPage.cjsx'

{ Header, Box, Split, Sidebar, Tabs, Tab } = require 'grommet'
AppControls = require '../menus/AppControls.cjsx'
YamlEditor  = require '../editors/YamlEditor.cjsx'

module.exports = React.createClass
  displayName: 'AppsDetailPage'

  getInitialState: ->
    dockerCompose: @props.dockerCompose
    bigboatCompose: @props.bigboatCompose

  render: ->
    if @props.dockerCompose
      @renderWithData()
    else @renderNoData()

  renderNoData: -> <span />

  onComposeChange: (yamlobj, code) -> @setState dockerCompose: code
  onBigboatChange: (yamlobj, code) -> @setState bigboatCompose: code
  onSaveApp: -> @props.onSaveApp @state.dockerCompose, @state.bigboatCompose

  renderWithData: ->
    <Split flex='left' priority='left'>
      <DetailPage title={@props.title} >
        <Tabs style={marginBottom:0} responsive={false}>
          <Tab title='Docker Compose'>
            <YamlEditor code={@state.dockerCompose or @props.dockerCompose} onChange={@onComposeChange} />
          </Tab>
          <Tab title='BigBoat Compose'>
            <YamlEditor code={@state.bigboatCompose or @props.bigboatCompose} onChange={@onBigboatChange} />
          </Tab>
        </Tabs>
      </DetailPage>
      <Sidebar size='medium' colorIndex='light-2' direction='column'>
        <Header pad='medium' size='large' />
        <AppControls
          onSaveApp={@onSaveApp}
          onRemoveApp={@props.onRemoveApp}
          onStartApp={@props.onStartApp}
          name={@props.title} />
      </Sidebar>
    </Split>
{'fraction_non_alphanumeric': 0.13740959894806049, 'fraction_numerical': 0.0013149243918474688, 'mean_word_length': 3.112162162162162, 'pattern_counts': {'":': 0, '<': 37, '<?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': '5698218', 'n_tokens_mistral': 968, 'n_tokens_neox': 945, 'n_words': 195}