<commit_before>import './BrowserLayout.styl'

import React, { useState, useEffect } from 'react'
import cx from 'classnames'

import StackListContainer from '../StackListContainer'
import WebentityBrowseContainer from '../WebentityBrowseContainer'
import HelpPin from '../../components/HelpPin'

import BrowserHeader from '../../components/BrowserHeader'
import BrowserTabsContainer from '../BrowserTabsContainer'
import HypheView from './HypheView'
import Spinner from '../../components/Spinner'

const BrowserLayout = ({
  corpus,
  status,
  instanceUrl,
  isEmpty,
  isLanding,
  // actions
  onSelectStack,
  openTab
}) => {
  /**
   * lists management
   */
  const [asideMode, setAsideMode] = useState(isLanding ? 'stackList' : 'webeneityBrowse')
  const [browserMode, setBrowserMode] = useState('browse')

  useEffect(() => {
    if (isLanding) {
      setAsideMode('stackList')
    }
  }, [isLanding])

  
  const onSetAsideMode = mode => setAsideMode(mode)

  const handleOpenTabFromHyphe = (url) => {
    setBrowserMode('browse')
    openTab(url)
  }
  const hypheUrl = instanceUrl + '/#/project/' + corpus.corpus_id + '/network'
  
  const { ready }= status && status.corpus

  return (
    <div className="browser-layout">
      <BrowserHeader 
        corpus={ corpus }
        status={ status }
        browserMode={ browserMode }
        onSelectStack={ onSelectStack }
        onSetBrowserMode={ setBrowserMode } />
      { ready ?
        <div 
          className="browser-main-container"
          style={ browserMode === 'browse' ? {}: { display: 'none' } }>
          <aside className="browser-column browser-aside-column">
            <ul className="aside-header switch-mode-container">
              <li><button onClick={ () => onSetAsideMode('stackList') } className={ cx('mode-btn', { 'is-active': asideMode === 'stackList' }) }>
                <span>Inquiry overview <HelpPin>review and curate the webentities constituting your inquiry</HelpPin></span></button>
              </li>
              <li><button disabled={ isLanding } onClick={ () => onSetAsideMode('webentityBrowse') } className={ cx('mode-btn', { 'is-active': asideMode === 'webentityBrowse' }) }>
                <span>Browsed webentity <HelpPin>edit information about the currently browsed webentity</HelpPin></span></button>
              </li>
            </ul>
            <div className="aside-content" style={ asideMode === 'webentityBrowse' ? {}: { display: 'none' } }>
              <WebentityBrowseContainer />
            </div>
            <div className="aside-content" style={ asideMode === 'stackList' ? {}: { display: 'none' } }>
              <StackListContainer
                isLanding={ isLanding } 
                isEmpty={ isEmpty } 
              />
            </div>
          </aside>
          <section className="browser-column browser-main-column">
            <BrowserTabsContainer />
          </section>
        </div>:
        <div className="spinner-container">
          <Spinner /> 
        </div>
      }
      
      <HypheView 
        style={ browserMode === 'hyphe' ? {} : { display: 'none' }  }
        isHypheView={ browserMode === 'hyphe' }
        url={ hypheUrl } onOpenTabFromHyphe={ handleOpenTabFromHyphe } />
    </div>
  )<commit_msg>conditional activate sidebar mode<commit_after>import './BrowserLayout.styl'

import React, { useState, useEffect } from 'react'
import cx from 'classnames'

import StackListContainer from '../StackListContainer'
import WebentityBrowseContainer from '../WebentityBrowseContainer'
import HelpPin from '../../components/HelpPin'

import BrowserHeader from '../../components/BrowserHeader'
import BrowserTabsContainer from '../BrowserTabsContainer'
import HypheView from './HypheView'
import Spinner from '../../components/Spinner'

const BrowserLayout = ({
  corpus,
  status,
  instanceUrl,
  isEmpty,
  isLanding,
  // actions
  onSelectStack,
  openTab
}) => {
  /**
   * lists management
   */
  const [asideMode, setAsideMode] = useState(isLanding ? 'stackList' : 'webeneityBrowse')
  const [browserMode, setBrowserMode] = useState('browse')
  
  const onSetAsideMode = mode => setAsideMode(mode)

  const handleOpenTabFromHyphe = (url) => {
    setBrowserMode('browse')
    openTab(url)
  }
  const hypheUrl = instanceUrl + '/#/project/' + corpus.corpus_id + '/network'
  
  const { ready }= status && status.corpus

  return (
    <div className="browser-layout">
      <BrowserHeader 
        corpus={ corpus }
        status={ status }
        browserMode={ browserMode }
        onSelectStack={ onSelectStack }
        onSetBrowserMode={ setBrowserMode } />
      { ready ?
        <div 
          className="browser-main-container"
          style={ browserMode === 'browse' ? {}: { display: 'none' } }>
          <aside className="browser-column browser-aside-column">
            <ul className="aside-header switch-mode-container">
              <li><button onClick={ () => onSetAsideMode('stackList') } className={ cx('mode-btn', { 'is-active': (asideMode === 'stackList' || isLanding) }) }>
                <span>Inquiry overview <HelpPin>review and curate the webentities constituting your inquiry</HelpPin></span></button>
              </li>
              <li><button disabled={ isLanding } onClick={ () => onSetAsideMode('webentityBrowse') } className={ cx('mode-btn', { 'is-active': (asideMode === 'webentityBrowse' && !isLanding) }) }>
                <span>Browsed webentity <HelpPin>edit information about the currently browsed webentity</HelpPin></span></button>
              </li>
            </ul>
            <div className="aside-content" style={ (asideMode === 'webentityBrowse' && !isLanding) ? {}: { display: 'none' } }>
              <WebentityBrowseContainer />
            </div>
            <div className="aside-content" style={ (asideMode === 'stackList' || isLanding) ? {}: { display: 'none' } }>
              <StackListContainer
                isLanding={ isLanding } 
                isEmpty={ isEmpty } 
              />
            </div>
          </aside>
          <section className="browser-column browser-main-column">
            <BrowserTabsContainer />
          </section>
        </div>:
        <div className="spinner-container">
          <Spinner /> 
        </div>
      }
      
      <HypheView 
        style={ browserMode === 'hyphe' ? {} : { display: 'none' }  }
        isHypheView={ browserMode === 'hyphe' }
        url={ hypheUrl } onOpenTabFromHyphe={ handleOpenTabFromHyphe } />
    </div>
  )
{'fraction_non_alphanumeric': 0.144123490753477, 'fraction_numerical': 0.0, 'mean_word_length': 2.587719298245614, 'pattern_counts': {'":': 0, '<': 79, '<?xml version=': 0, '>': 90, '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': '3741582', 'n_tokens_mistral': 1939, 'n_tokens_neox': 1861, 'n_words': 404}