feat(transform): initial support for transform display

app/components/Code.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+
+interface CodeProps {
+ data: string | undefined
+}
+
+const Code: React.FunctionComponent<CodeProps> = (props: CodeProps) => {
+ const { data } = props
+
+ const lines = data.split('\n')
+
+ return (
+ <div className="code">
+ <pre style={{ float: 'left', margin: '0 20px', color: '#bbb' }}>{lines.map((_, i) => (`${i}\n`))}</pre>
+ <pre style={{ float: 'left' }}>{data}</pre>
+ </div>
+ )
+}
+
+export default Code

app/components/ComponentList.tsx

@@ -6,7 +6,7 @@ import { clipboard, shell, MenuItemConstructorOptions } from 'electron'
 import ContextMenuArea from 'react-electron-contextmenu'
 import { ApiActionThunk } from '../store/api'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faTags, faArchive, faTh, IconDefinition, faExclamation } from '@fortawesome/free-solid-svg-icons'
+import { faTags, faArchive, faTh, IconDefinition, faExclamation, faRobot } from '@fortawesome/free-solid-svg-icons'
 import { faReadme } from '@fortawesome/free-brands-svg-icons'
 
 import { DatasetStatus, SelectedComponent, ComponentType } from '../models/store'
@@ -111,9 +111,26 @@ const components = [
  displayName: 'Structure',
  tooltip: 'the structure of the dataset',
  icon: faTh
+ },
+ {
+ name: 'transform',
+ displayName: 'Transform',
+ tooltip: 'commit automation',
+ icon: faRobot
  }
 ]
 
+function removeHiddenComponents (status: DatasetStatus) {
+ const hideWhenMissing = {
+ 'transform': true
+ }
+
+ return (component): boolean => {
+ console.log(status[component.name])
+ return status[component.name] || !hideWhenMissing[component.name]
+ }
+}
+
 export const getComponentDisplayProps = (name: string) => {
  return components.filter(d => d.name === name)[0]
 }
@@ -130,7 +147,7 @@ const ComponentList: React.FunctionComponent<ComponentListProps> = (props: Compo
  } = props
 
  const isEnabled = (name: string): boolean => {
- return (datasetSelected && selectionType === 'component' && (name === 'meta' || name === 'structure' || name === 'readme'))
+ return (datasetSelected && selectionType === 'component' && (name === 'meta' || name === 'structure' || name === 'readme' || name === 'transform'))
  }
 
  return (
@@ -145,7 +162,7 @@ const ComponentList: React.FunctionComponent<ComponentListProps> = (props: Compo
  Dataset Components
  </div>
  {
- components.map(({ name, displayName, tooltip, icon }) => {
+ components.filter(removeHiddenComponents(status)).map(({ name, displayName, tooltip, icon }) => {
  if (status[name] && !!fsiPath) {
  const { filepath, status: fileStatus } = status[name]
 

app/components/Dataset.tsx

@@ -179,7 +179,8 @@ export default class Dataset extends React.Component<DatasetProps> {
  if (
  componentsToReset.includes('structure') ||
  componentsToReset.includes('meta') ||
- componentsToReset.includes('readme')
+ componentsToReset.includes('readme') ||
+ componentsToReset.includes('transform')
  ) fetchWorkingDataset()
  }
 

app/components/DatasetComponent.tsx

@@ -7,6 +7,7 @@ import BodyContainer from '../containers/BodyContainer'
 import StructureContainer from '../containers/StructureContainer'
 import ParseError from './ParseError'
 import ReadmeContainer from '../containers/ReadmeContainer'
+import TransformContainer from '../containers/TransformContainer'
 import ReadmeHistoryContainer from '../containers/ReadmeHistoryContainer'
 import { CSSTransition } from 'react-transition-group'
 import SpinnerWithIcon from './chrome/SpinnerWithIcon'
@@ -114,6 +115,19 @@ const DatasetComponent: React.FunctionComponent<DatasetComponentProps> = (props:
  <StructureContainer history={history}/>
  </div>
  </CSSTransition>
+ <CSSTransition
+ in={(component === 'transform') && !isLoading && !hasParseError}
+ classNames='fade'
+ component='div'
+ timeout={300}
+ mountOnEnter
+ unmountOnExit
+ appear={true}
+ >
+ <div className='transition-wrap'>
+ <TransformContainer />
+ </div>
+ </CSSTransition>
  <SpinnerWithIcon loading={isLoading}/>
  </div>
  </div>

app/components/Transform.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+
+import { WorkingDataset } from '../models/store'
+import { ApiActionThunk } from '../store/api'
+
+import Code from './Code'
+
+export interface TransformProps {
+ peername: string
+ name: string
+ value: string
+ preview: string
+ history: boolean
+ workingDataset: WorkingDataset
+ write: (peername: string, name: string, dataset: any) => ApiActionThunk
+}
+
+const Transform: React.FunctionComponent<TransformProps> = (props) => {
+ const { value } = props
+
+ return (
+ <Code data={value} />
+ )
+}
+
+export default Transform

app/containers/TransformContainer.tsx

@@ -0,0 +1,31 @@
+import { connect } from 'react-redux'
+import { bindActionCreators, Dispatch } from 'redux'
+import Transform, { TransformProps } from '../components/Transform'
+import Store from '../models/store'
+import { fsiWriteAndFetch } from '../actions/api'
+
+const mapStateToProps = (state: Store) => {
+ const { workingDataset, selections } = state
+ const { value } = workingDataset.components.transform
+
+ const { peername, name } = selections
+
+ // get data for the currently selected component
+ return {
+ peername,
+ name,
+ value,
+ history,
+ workingDataset
+ }
+}
+
+const mergeProps = (props: any, actions: any): TransformProps => { //eslint-disable-line
+ return { ...props, ...actions }
+}
+
+const mapDispatchToProps = (dispatch: Dispatch) => {
+ return bindActionCreators({ write: fsiWriteAndFetch }, dispatch)
+}
+
+export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(Transform)

app/models/store.ts

@@ -68,7 +68,7 @@ export interface UI {
  detailsBar: Details
 }
 
-export type SelectedComponent = 'readme' | 'meta' | 'body' | 'structure' | ''
+export type SelectedComponent = 'readme' | 'meta' | 'body' | 'structure' | 'transform' | ''
 
 // currently selected dataset, tab, dataset component, commit, etc
 export interface Selections {
@@ -148,6 +148,9 @@ export interface CommitDetails {
  structure: {
  value: Structure
  }
+ transform: {
+ value: string | undefined
+ }
  }
  stats: Array<{[key: string]: any}>
 }

app/reducers/workingDataset.ts

@@ -33,6 +33,9 @@ const initialState: WorkingDataset = {
  },
  structure: {
  value: {}
+ },
+ transform: {
+ value: ''
  }
  },
  history: {
@@ -97,6 +100,9 @@ const workingDatasetsReducer: Reducer = (state = initialState, action: AnyAction
  },
  structure: {
  value: dataset && dataset.structure ? dataset.structure : {}
+ },
+ transform: {
+ value: dataset && dataset.transform ? atob(dataset.transform.scriptBytes) : ''
  }
  }
  }

stories/1-CodeViewer.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import Code from '../app/components/Code'
+
+export default {
+ title: 'Code'
+}
+
+const wrap = (component) => {
+ return (
+ <div style={{ maxWidth: 650, margin: '0 auto' }}>
+ {component}
+ </div>
+ )
+}
+
+const basicTransformText = `
+def transform(ds,ctx):
+ ds.set_body([[1,2,3,4],[5,6,7,8]])
+`
+
+export const basicTransform = () => wrap(<Code data={basicTransformText} />)
+
+basicTransform.story = {
+ name: 'Transform: Basic Starlark',
+ parameters: {
+ notes: `short code viewer`
+ }
+}