<commit_before>import * as React from 'react'
import styled from 'styled-components'
import state from '@state'
import AddComponentMenu from './AddComponentMenu/AddComponentMenu'
import Component from '@src/editor/Nodes/_Component'
import { connect } from 'lape'
import AddingAtom from '@src/editor/Components/Preview/AddingAtom'
import { getCurrentComponent } from '@src/selectors'
import AddComponent from '@src/editor/TopBar/AddComponent'
import GridOverlay from '@src/editor/Overlay/Grid'
import AddComponentOverlay from '@src/editor/Overlay/AddComponent'

const Wrapper = styled.div`
  position: relative;
  display: grid;
  flex: 1;
  justify-content: center;
  background: radial-gradient(#f7f7f7 15%, transparent 16%) 0 0, radial-gradient(#ececec 15%, transparent 16%) 8px 8px,
    radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 0 1px,
    radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 8px 9px;
  background-color: rgb(0, 0, 0, 0.01);
  background-size: 16px 16px;
  transform: translateZ(0);
`

const PerspectiveBox = styled.div`
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-gap: 16px;
  width: 512px;
  align-items: stretch;
  transition: transform 0.25s;
`

const AlignCenter = styled.div`
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  align-self: center;
`

const GridOverlayWrapper = styled.div`
  position: absolute;
  left: -70px;
  top: -70px;
  width: calc(100% + 70px);
  height: calc(100% + 70px);
`
const AddComponentOverlayWrapper = styled.div`
  user-select: none;
  pointer-events: none;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
`

const unselectComponent = e => {
  if (e.currentTarget === e.target) {
    state.ui.selectedNode = null
    state.ui.stateManager = null
    state.ui.editingTextNode = null
    state.ui.editingBoxNode = null
    state.ui.showAddComponentMenu = false
  }
}

const Preview = () => {
  const component = getCurrentComponent()
  return (
    <Wrapper onClick={unselectComponent}>
      <PerspectiveBox onClick={unselectComponent}>
        <AlignCenter>
          <GridOverlayWrapper>
            <GridOverlay component={component.root} />
          </GridOverlayWrapper>
          <Component component={component.root} parent={null} />
          <AddComponentOverlayWrapper>
            <AddComponentOverlay component={component.root} />
          </AddComponentOverlayWrapper>
        </AlignCenter>
      </PerspectiveBox>
      <AddComponent />
      {state.ui.showAddComponentMenu && <AddComponentMenu />}
      {state.ui.addingAtom && <AddingAtom />}
    </Wrapper>
  )
}

export default connect(Preview)
<commit_msg>fix part that nobody sees anyway<commit_after>import * as React from 'react'
import styled from 'styled-components'
import state from '@state'
import AddComponentMenu from './AddComponentMenu/AddComponentMenu'
import Component from '@src/editor/Nodes/_Component'
import { connect } from 'lape'
import AddingAtom from '@src/editor/Components/Preview/AddingAtom'
import { getCurrentComponent } from '@src/selectors'
import AddComponent from '@src/editor/TopBar/AddComponent'
import GridOverlay from '@src/editor/Overlay/Grid'
import AddComponentOverlay from '@src/editor/Overlay/AddComponent'

const Wrapper = styled.div`
  position: relative;
  display: grid;
  flex: 1;
  justify-content: center;
  background: radial-gradient(#f7f7f7 15%, transparent 16%) 0 0, radial-gradient(#ececec 15%, transparent 16%) 8px 8px,
    radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 0 1px,
    radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 8px 9px;
  background-color: rgb(0, 0, 0, 0.01);
  background-size: 16px 16px;
  transform: translateZ(0);
`

const PerspectiveBox = styled.div`
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-gap: 16px;
  width: 512px;
  align-items: stretch;
  transition: transform 0.25s;
`

const AlignCenter = styled.div`
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  align-self: center;
`

const GridOverlayWrapper = styled.div`
  position: absolute;
  left: -70px;
  top: -70px;
  width: calc(100% + 70px);
  height: calc(100% + 70px);
`
const AddComponentOverlayWrapper = styled.div`
  user-select: none;
  pointer-events: none;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
`

const unselectComponent = e => {
  if (e.currentTarget === e.target) {
    state.ui.selectedNode = null
    state.ui.stateManager = null
    state.ui.editingTextNode = null
    state.ui.editingBoxNode = null
    state.ui.showAddComponentMenu = false
  }
}

const Preview = () => {
  const component = getCurrentComponent()
  return (
    <Wrapper onClick={unselectComponent}>
      <PerspectiveBox onClick={unselectComponent}>
        <AlignCenter>
          <GridOverlayWrapper>
            <GridOverlay component={component.root} />
          </GridOverlayWrapper>
          <Component component={component.root} parent={null} />
          <AddComponentOverlayWrapper>
            <AddComponentOverlay component={component.root} />
          </AddComponentOverlayWrapper>
        </AlignCenter>
      </PerspectiveBox>
      <AddComponent />
      {state.ui.showAddComponentMenu && <AddComponentMenu />}
      {state.ui.addingAtom && <AddingAtom />}
    </Wrapper>
  )
}

export default connect(Preview)

{'fraction_non_alphanumeric': 0.12415801929728745, 'fraction_numerical': 0.03695612597851811, 'mean_word_length': 3.691716481639624, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 39, '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': '2260854', 'n_tokens_mistral': 1913, 'n_tokens_neox': 1749, 'n_words': 434}