Cleaner cell repr, better responsive size styles

src/components/Cell/Cell.css

@@ -3,3 +3,34 @@
 .Cell {
   /* */
 }
+
+
+.pre, .pre-alt {
+  overflow: hidden;
+  font-family: monospace;
+  max-width: 150px;
+  background: #ddd4;
+  margin: 4px 3px;
+  border: 1px solid #aaa;
+  padding: 4px;
+}
+
+.pre {
+  overflow-x: auto;
+  width: max-content;
+}
+
+.pre-alt {
+  display: inline-block;
+  vertical-align: top;
+  width: min-content;
+}
+
+.popover {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+

src/components/Cell/Cell.css.d.ts

@@ -1,2 +1,5 @@
 export const Cell: string;
 export const cell: string;
+export const pre: string;
+export const preAlt: string;
+export const popover: string;

src/components/Cell/Cell.module.d.ts

@@ -1,7 +1,11 @@
 export interface IProps {
   data: any
+  depth?: number
+  className?: string
 }
 
 export interface IState {
-  // state
+  tableData: any
+  depth: number
+  dataVisible: boolean
 }

src/components/Cell/Cell.tsx

@@ -1,12 +1,17 @@
 import * as React from 'react'
 import * as css from './Cell.css'
 import * as I from './Cell.module'
+import DataTable from 'components/DataTable/DataTable'
+
+const MAX_DEPTH = 5
 
 class Cell extends React.Component<I.IProps, I.IState> {
   constructor(props: I.IProps) {
     super(props)
     this.state = {
-      //
+      tableData: props.data,
+      dataVisible: false,
+      depth: props.depth || 0,
     }
   }
 
@@ -19,15 +24,30 @@ class Cell extends React.Component<I.IProps, I.IState> {
     )
   }
 
-  private parse(obj?: any) {
+  private expandData() {
+    this.setState({ dataVisible: true })
+  }
+
+  private parse() {
+    const obj = this.props.data
+    const classNames = this.props.className || ''
+
+    if (this.state.depth >= MAX_DEPTH) {
+      return (
+        <span>&hellip;</span>
+      )
+    }
+
     if (this.isRepresentable(obj)) {
-      let str = JSON.stringify(obj).split(`\\`).join('')
+      let str = JSON.stringify(obj, null, '\t').split(`\\`).join('')
       const maxLen = 400
+
       if (str.length > maxLen) {
         str = str.slice(0, maxLen) + '\u2026'
       }
+
       return (
-        <span>{str}</span>
+        <div className={[classNames, css.pre].join(' ')}>{str}</div>
       )
     }
     
@@ -39,19 +59,20 @@ class Cell extends React.Component<I.IProps, I.IState> {
     if (obj.constructor === Array && (!obj.length || obj[0].constructor === {}.constructor)) {
       const items = obj.slice(0, 3)
       return (
-        <span>
-          [{items.map((item, i) => (
-            <span key={Math.random()}>
-              {this.parse(item)}
-            </span>
+        <div className={[classNames, css.preAlt].join(' ')}>
+          Array[{items.map((item, i) => (
+            <Cell className={css.pre} depth={this.state.depth + 1} data={item} />
           ))}]
-        </span>
+        </div>
       )
     }
 
-    const keyList = Object.keys(obj).map(s => `"${s}"`).join(', ')
+    const keyList = Object.keys(obj).map(s => (
+      <Cell depth={this.state.depth + 1} data={s} />
+    ))
+
     return (
-      <div>
+      <div className={[classNames, css.preAlt].join(' ')} onClick={(e) => this.expandData()}>
         Object({keyList})
       </div>
     )
@@ -64,7 +85,12 @@ class Cell extends React.Component<I.IProps, I.IState> {
     
     return (
       <div className={classNames}>
-        {this.parse(this.props.data)}
+        {this.parse()}
+        {this.state.dataVisible ? (
+          <div className={css.popover}>
+            {/* <DataTable data={this.state.tableData} static={true} store={null} /> */}
+          </div>
+        ) : ''}
       </div>
     )
   }

src/components/DataTable/DataTable.css

@@ -10,6 +10,8 @@
 
   & tbody td, & thead th {
     padding:  12px;
+    width: max-content;
+    vertical-align: top;
   }
 }
 

src/components/DataTable/DataTable.module.d.ts

@@ -1,6 +1,8 @@
 export interface Props {
   store: any
   className?: string
+  static?: boolean
+  data?: any[]
 }
 
 export interface State {

src/components/DataTable/DataTable.tsx

@@ -13,11 +13,15 @@ class DataTable extends React.Component<I.Props, I.State> {
 
     this.state = {
       columns: props.store.get(StoreKeys.Columns, []),
-      data: props.store.get(StoreKeys.Table, []),
+      data: props.data || props.store.get(StoreKeys.Table, []),
     }
   }
 
   public componentWillMount() {
+    if (this.props.static) {
+      return
+    }
+
     this.listeners = [
       register(ActionTypes.UPDATE_COLUMNS, (columns: any) => {
         this.setState({
@@ -33,6 +37,10 @@ class DataTable extends React.Component<I.Props, I.State> {
   }
 
   public componentWillUnmount() {
+    if (this.props.static) {
+      return
+    }
+    
     this.listeners.forEach(l => Dispatcher.unregister(l))
   }
 
@@ -88,26 +96,23 @@ class DataTable extends React.Component<I.Props, I.State> {
       return <div className={css.dataTable}>No data to show!</div>
     }
 
-    const classNames = [
-      css.dataTable,
-      this.props.className || ''
-    ].join(' ')
-
     return (
-      <table className={classNames}>
-        <thead>
-          <tr>
-            {this.state.columns.map(col => <th key={col}>{col}</th>)}
-          </tr>
-        </thead>
-        <tbody>
-          {this.state.data.map((row, i) => (
-            <tr key={`row_${i}`}>
-              {this.getColumnRowData(row, i)}
+      <div className={this.props.className || ''}>
+        <table className={css.dataTable}>
+          <thead>
+            <tr>
+              {this.state.columns.map(col => <th key={col}>{col}</th>)}
             </tr>
-          ))}
-        </tbody>
-      </table>
+          </thead>
+          <tbody>
+            {this.state.data.map((row, i) => (
+              <tr key={`row_${i}`}>
+                {this.getColumnRowData(row, i)}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
     )
   }
 }

src/components/Header/Header.css

@@ -5,6 +5,8 @@
   background-image: linear-gradient(to bottom, white, #f3f3f3 88%, #eee);
   display: grid;
   grid-row-gap: 14px;
+  align-content: stretch;
+  grid-template-rows: min-content auto;
   overflow: hidden;
 }
 

src/components/Header/Header.module.d.ts

@@ -1,5 +1,6 @@
 export interface IProps {
   store: any
+  className?: string
 }
 
 export interface IState {

src/components/Header/Header.tsx

@@ -136,7 +136,7 @@ class Header extends React.Component<I.IProps, I.IState> {
 
   render() {
     return (
-      <div className={css.header}>
+      <div className={[css.header, this.props.className || ''].join(' ')}>
         <div className={css.nav}>
           <div className={css.method}>
             <SelectBox name="method"

src/components/KeyList/KeyList.css

@@ -1,7 +1,6 @@
 @import "../../_variables.css";
 
 .KeyList {
-  grid-area: sidebar;
   border-right: 1px solid #bbb;
 }
 

src/components/KeyList/KeyList.module.d.ts

@@ -1,5 +1,6 @@
 export interface IProps {
   store: any
+  className?: string
 }
 
 export interface IState {

src/components/KeyList/KeyList.tsx

@@ -104,8 +104,12 @@ class KeyList extends React.Component<I.IProps, I.IState> {
   }
 
   render() {
+    const classNames = [
+      css.KeyList,
+      this.props.className || ''
+    ].join(' ')
     return (
-      <div className={css.KeyList}>
+      <div className={classNames}>
         {this.keyListElements}
       </div>
     )

src/index.css

@@ -3,7 +3,6 @@
 html, body {
   font-family: "Helvetica Neue", "Calibri", "Segoe UI", "Arial", sans-serif;
   font-size: 11pt;
-  overflow: hidden;
 }
 
 * {

src/layouts/App/App.css

@@ -1,24 +1,34 @@
+$header-height: 150px;
+
 .App {
   position: relative;
-  width: 100%;
-  height: 100%;
-  display: grid;
-  grid-template-rows: min-content auto;
+  display: flex;
+  height: 100vh;
+  flex-direction: column;
+}
+
+.header {
+  height: $header-height;
 }
 
 .content {
-  display: grid;
   width: 100%;
-  grid-template-columns: [sidebar] 20vw [main] 80vw;
+  height: 100%;
   overflow: auto;
+  display: grid;
+  grid-template-columns: [sidebar] 20vw [main] 80vw;
+}
+
+.key-list {
+  grid-column: sidebar;
 }
 
 .table {
-  grid-area: main;
+  grid-column: main;
 }
 
 .scrollable {
-  max-width: 100%;
-  max-height: 100%;
+  width: inherit;
+  height: inherit;
   overflow: auto;
 }

src/layouts/App/App.css.d.ts

@@ -1,5 +1,7 @@
 export const App: string;
 export const app: string;
+export const header: string;
 export const content: string;
+export const keyList: string;
 export const table: string;
 export const scrollable: string;

src/layouts/App/App.tsx

@@ -38,12 +38,12 @@ class App extends React.Component<TProps> {
   render() {
     return (
       <div className={css.App}>
-        <Header {...this.props} />
+        <Header className={css.header} {...this.props} />
         <div className={css.content}>
-          <KeyList {...this.props} />
-          <div className={[css.scrollable, css.table].join(' ')}>
-            <DataTable {...this.props} />
-          </div>
+          <KeyList className={[css.scrollable, css.keyList].join(' ')}
+            {...this.props} />
+          <DataTable className={[css.scrollable, css.table].join(' ')}
+            {...this.props} />
         </div>
       </div>
     )