From f9799c93bc915e4972a80c098fe38d811441df6b Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 13 Jun 2018 15:09:01 -0700
Subject: [PATCH 01/10] Remove whitespace

---
 ui/src/style/components/time-machine/visualization.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/style/components/time-machine/visualization.scss b/ui/src/style/components/time-machine/visualization.scss
index 7f7b532cf..9074d2b6c 100644
--- a/ui/src/style/components/time-machine/visualization.scss
+++ b/ui/src/style/components/time-machine/visualization.scss
@@ -56,8 +56,8 @@ $flux-builder-yield-tabs-max-width: 400px;
 }
 
 .yield-node--sidebar-filter.form-control.input-xs {
-    font-size: 12px;
-  }
+  font-size: 12px;
+}
 
 // Tabs
 .yield-node--tabs {

From e90a93ee82560c8e217956fa1ac3ea3a508a2ebc Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 13 Jun 2018 15:09:11 -0700
Subject: [PATCH 02/10] Style yield name

---
 ui/src/flux/components/TimeMachineVis.tsx             |  2 +-
 .../style/components/time-machine/visualization.scss  | 11 +++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/ui/src/flux/components/TimeMachineVis.tsx b/ui/src/flux/components/TimeMachineVis.tsx
index 6ae3f61ae..098517d6a 100644
--- a/ui/src/flux/components/TimeMachineVis.tsx
+++ b/ui/src/flux/components/TimeMachineVis.tsx
@@ -54,7 +54,7 @@ class TimeMachineVis extends PureComponent<Props, State> {
             currentView={visType}
             onToggleView={this.selectVisType}
           />
-          <span>{yieldName}</span>
+          <div className="yield-node--name">{`"${yieldName}"`}</div>
         </div>
         <div className="yield-node--visualization">{this.vis}</div>
       </>
diff --git a/ui/src/style/components/time-machine/visualization.scss b/ui/src/style/components/time-machine/visualization.scss
index 9074d2b6c..baf054a91 100644
--- a/ui/src/style/components/time-machine/visualization.scss
+++ b/ui/src/style/components/time-machine/visualization.scss
@@ -27,6 +27,17 @@ $flux-builder-yield-tabs-max-width: 400px;
   background-color: $g3-castle;
   padding: $flux-node-padding;
   border-radius: $radius $radius 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.yield-node--name {
+  font-size: 12px;
+  font-weight: 600;
+  margin-right: 6px;
+  @include no-user-select();
+  color: $c-honeydew;
 }
 
 .yield-node--visualization {

From 9ca270573cc9a99139834ac8e7116926f48caed1 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 13 Jun 2018 15:09:25 -0700
Subject: [PATCH 03/10] Remove border when yield table is empty

---
 ui/src/style/components/time-machine/visualization.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/ui/src/style/components/time-machine/visualization.scss b/ui/src/style/components/time-machine/visualization.scss
index baf054a91..95c7e7773 100644
--- a/ui/src/style/components/time-machine/visualization.scss
+++ b/ui/src/style/components/time-machine/visualization.scss
@@ -135,7 +135,11 @@ $flux-builder-yield-tabs-max-width: 400px;
   flex: 1 0 0;
   background-color: $g3-castle;
   overflow: hidden;
-  border-radius: 0 $radius $radius 0;
+  border-radius: 0 0 $radius $radius;
+
+  &:only-child {
+    border: 0;
+  }
 }
 
 // Line Graph

From 01635dfda19817f385ee4a60f04a48c5397b25f0 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 13 Jun 2018 15:58:59 -0700
Subject: [PATCH 04/10] Polish threesizer handles and headers when in
 horizontal handle mode

---
 ui/src/flux/components/TimeMachine.tsx        |  2 +
 .../shared/components/threesizer/Division.tsx | 91 +++++++++++++++----
 .../components/threesizer/DivisionHeader.tsx  | 10 +-
 ui/src/style/components/threesizer.scss       | 39 +++++++-
 4 files changed, 119 insertions(+), 23 deletions(-)

diff --git a/ui/src/flux/components/TimeMachine.tsx b/ui/src/flux/components/TimeMachine.tsx
index abdd06c6f..3bbd50a84 100644
--- a/ui/src/flux/components/TimeMachine.tsx
+++ b/ui/src/flux/components/TimeMachine.tsx
@@ -96,6 +96,7 @@ class TimeMachine extends PureComponent<Props> {
     return [
       {
         name: 'Script',
+        handlePixels: 44,
         headerOrientation: HANDLE_VERTICAL,
         headerButtons: [
           <div
@@ -120,6 +121,7 @@ class TimeMachine extends PureComponent<Props> {
       },
       {
         name: 'Explore',
+        handlePixels: 44,
         headerButtons: [],
         menuOptions: [],
         render: () => <SchemaExplorer service={service} />,
diff --git a/ui/src/shared/components/threesizer/Division.tsx b/ui/src/shared/components/threesizer/Division.tsx
index 2534e7e64..ad0a41f25 100644
--- a/ui/src/shared/components/threesizer/Division.tsx
+++ b/ui/src/shared/components/threesizer/Division.tsx
@@ -67,38 +67,41 @@ class Division extends PureComponent<Props> {
   }
 
   public render() {
-    const {name, render, draggable, menuOptions, headerButtons} = this.props
+    const {render} = this.props
     return (
       <div
         className={this.containerClass}
         style={this.containerStyle}
         ref={this.ref}
       >
-        <div
-          style={this.handleStyle}
-          title={this.title}
-          draggable={draggable}
-          onDragStart={this.drag}
-          className={this.handleClass}
-          onDoubleClick={this.handleDoubleClick}
-        >
-          <div className={this.titleClass}>{name}</div>
-        </div>
+        {this.renderDragHandle}
         <div className={this.contentsClass} style={this.contentStyle}>
-          {name && (
-            <DivisionHeader
-              buttons={headerButtons}
-              menuOptions={menuOptions}
-              onMinimize={this.handleMinimize}
-              onMaximize={this.handleMaximize}
-            />
-          )}
+          {this.renderHeader}
           <div className="threesizer--body">{render(this.visibility)}</div>
         </div>
       </div>
     )
   }
 
+  private get renderHeader(): JSX.Element {
+    const {name, headerButtons, menuOptions, orientation} = this.props
+
+    if (!name) {
+      return null
+    }
+
+    if (orientation === HANDLE_VERTICAL) {
+      return (
+        <DivisionHeader
+          buttons={headerButtons}
+          menuOptions={menuOptions}
+          onMinimize={this.handleMinimize}
+          onMaximize={this.handleMaximize}
+        />
+      )
+    }
+  }
+
   private get visibility(): string {
     if (this.props.size === 0) {
       return 'hidden'
@@ -123,6 +126,53 @@ class Division extends PureComponent<Props> {
     }
   }
 
+  private get renderDragHandle(): JSX.Element {
+    const {draggable} = this.props
+
+    return (
+      <div
+        style={this.handleStyle}
+        title={this.title}
+        draggable={draggable}
+        onDragStart={this.drag}
+        className={this.handleClass}
+        onDoubleClick={this.handleDoubleClick}
+      >
+        {this.renderDragHandleContents}
+      </div>
+    )
+  }
+
+  private get renderDragHandleContents(): JSX.Element {
+    const {
+      name,
+      handlePixels,
+      orientation,
+      headerButtons,
+      menuOptions,
+    } = this.props
+
+    if (!name) {
+      return
+    }
+
+    if (orientation === HANDLE_HORIZONTAL && handlePixels >= 20) {
+      return (
+        <DivisionHeader
+          buttons={headerButtons}
+          menuOptions={menuOptions}
+          onMinimize={this.handleMinimize}
+          onMaximize={this.handleMaximize}
+          name={name}
+        />
+      )
+    }
+
+    if (handlePixels >= 20) {
+      return <div className={this.titleClass}>{name}</div>
+    }
+  }
+
   private get handleStyle(): CSSProperties {
     const {handleDisplay: display, orientation, handlePixels} = this.props
 
@@ -178,7 +228,7 @@ class Division extends PureComponent<Props> {
   }
 
   private get handleClass(): string {
-    const {draggable, orientation} = this.props
+    const {draggable, orientation, name} = this.props
 
     const collapsed = orientation === HANDLE_VERTICAL && this.isTitleObscured
 
@@ -188,6 +238,7 @@ class Division extends PureComponent<Props> {
       dragging: this.isDragging,
       vertical: orientation === HANDLE_VERTICAL,
       horizontal: orientation === HANDLE_HORIZONTAL,
+      named: name,
     })
   }
 
diff --git a/ui/src/shared/components/threesizer/DivisionHeader.tsx b/ui/src/shared/components/threesizer/DivisionHeader.tsx
index 487598433..b477270dd 100644
--- a/ui/src/shared/components/threesizer/DivisionHeader.tsx
+++ b/ui/src/shared/components/threesizer/DivisionHeader.tsx
@@ -8,14 +8,20 @@ interface Props {
   onMaximize: () => void
   buttons: JSX.Element[]
   menuOptions?: MenuItem[]
+  name?: string
 }
 
 class DivisionHeader extends PureComponent<Props> {
   public render() {
+    const {name} = this.props
+
     return (
       <div className="threesizer--header">
-        {this.props.buttons.map(b => b)}
-        <DivisionMenu menuItems={this.menuItems} />
+        {name && <div className="threesizer--header-name">{name}</div>}
+        <div className="threesizer--header-controls">
+          {this.props.buttons.map(b => b)}
+          <DivisionMenu menuItems={this.menuItems} />
+        </div>
       </div>
     )
   }
diff --git a/ui/src/style/components/threesizer.scss b/ui/src/style/components/threesizer.scss
index a897c1c9d..48cfa46a4 100644
--- a/ui/src/style/components/threesizer.scss
+++ b/ui/src/style/components/threesizer.scss
@@ -149,6 +149,22 @@ $threesizer-shadow-stop: fade-out($g0-obsidian, 1);
   }
 }
 
+.threesizer--header-name {
+  font-size: 14px;
+  font-weight: 600;
+  white-space: nowrap;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: $g11-sidewalk;
+  padding-left: 4px;
+}
+
+.threesizer--header-controls {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
 .threesizer--body {
   .horizontal>&:only-child {
     width: 100%;
@@ -307,4 +323,25 @@ $threesizer-shadow-stop: fade-out($g0-obsidian, 1);
 // Hide Header children when collapsed
 .threesizer--handle.vertical.threesizer--collapsed+.threesizer--contents>.threesizer--header>* {
   display: none;
-}
\ No newline at end of file
+}
+
+// When threesizer has horizontal handles, division headers appear inside
+// the drag handle and styles must adapt
+.threesizer--handle.horizontal.named {
+  background-color: transparent;
+  border: 0;
+
+  .threesizer--header {
+    border-right: 0;
+    border-bottom: 2px solid $g4-onyx;
+    width: 100%;
+    height: 100%;
+    justify-content: space-between;
+    transition: background-color 0.25s ease;
+  } 
+
+  &:hover .threesizer--header,
+  &.dragging .threesizer--header {
+    background-color: $g3-castle;
+  }
+}

From c7e6306fd6105023a6c568ebef437c7543b79771 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 13 Jun 2018 16:02:38 -0700
Subject: [PATCH 05/10] Add breathing room between navbar and schema explorer

---
 ui/src/style/components/time-machine/flux-explorer.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/src/style/components/time-machine/flux-explorer.scss b/ui/src/style/components/time-machine/flux-explorer.scss
index 3bad30087..b8697c566 100644
--- a/ui/src/style/components/time-machine/flux-explorer.scss
+++ b/ui/src/style/components/time-machine/flux-explorer.scss
@@ -14,6 +14,7 @@ $flux-tree-gutter: 11px;
   height: 100%;
   background-color: $g2-kevlar;
   min-width: $flux-tree-min-width;
+  padding-left: 30px;
 }
 
 .flux-schema-tree {

From 5ad27c03a4c284d3b4f31b4aee6b11f46c25fb85 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 13 Jun 2018 16:09:57 -0700
Subject: [PATCH 06/10] Polish time machine code mirror

---
 ui/src/style/components/code-mirror/_time-machine.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/ui/src/style/components/code-mirror/_time-machine.scss b/ui/src/style/components/code-mirror/_time-machine.scss
index bed93cdb2..153727ac7 100644
--- a/ui/src/style/components/code-mirror/_time-machine.scss
+++ b/ui/src/style/components/code-mirror/_time-machine.scss
@@ -5,6 +5,7 @@
 */
 
 .cm-s-time-machine {
+  background-color: $g1-raven;
   color: $g11-sidewalk;
 
   .cm-variable {
@@ -46,4 +47,13 @@
   .cm-comment {
     color: $g8-storm;
   }
+
+  .CodeMirror-scrollbar-filler {
+    background-color: transparent;
+  }
+
+  .CodeMirror-vscrollbar,
+  .CodeMirror-hscrollbar {
+    @include custom-scrollbar-round($g1-raven, $g6-smoke);
+  }
 }

From 35c36acf679b4e4f902128bafa378430a5f7e13a Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 13 Jun 2018 16:10:53 -0700
Subject: [PATCH 07/10] Prevent threesizer header names from colliding with
 menu items

---
 ui/src/style/components/threesizer.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/src/style/components/threesizer.scss b/ui/src/style/components/threesizer.scss
index 48cfa46a4..2468fc061 100644
--- a/ui/src/style/components/threesizer.scss
+++ b/ui/src/style/components/threesizer.scss
@@ -157,6 +157,7 @@ $threesizer-shadow-stop: fade-out($g0-obsidian, 1);
   letter-spacing: 0.05em;
   color: $g11-sidewalk;
   padding-left: 4px;
+  padding-right: 6px;
 }
 
 .threesizer--header-controls {

From 9fbe4944aa43b47763bc993f26bf5aa5cd5472f9 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Thu, 14 Jun 2018 10:27:46 -0700
Subject: [PATCH 08/10] Rename 'Analyze' to 'Validate'

---
 ui/src/flux/components/TimeMachine.tsx       | 12 ++++++------
 ui/src/flux/containers/FluxPage.tsx          |  8 ++++----
 ui/src/shared/copy/notifications.ts          |  4 ++--
 ui/src/style/components/threesizer.scss      | 10 +++++-----
 ui/test/flux/components/TimeMachine.test.tsx |  2 +-
 5 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/ui/src/flux/components/TimeMachine.tsx b/ui/src/flux/components/TimeMachine.tsx
index 3bbd50a84..b92368654 100644
--- a/ui/src/flux/components/TimeMachine.tsx
+++ b/ui/src/flux/components/TimeMachine.tsx
@@ -25,7 +25,7 @@ interface Props {
   onSubmitScript: OnSubmitScript
   onAppendFrom: () => void
   onAppendJoin: () => void
-  onAnalyze: () => void
+  onValidate: () => void
 }
 
 interface Body extends FlatBody {
@@ -87,7 +87,7 @@ class TimeMachine extends PureComponent<Props> {
       script,
       status,
       service,
-      onAnalyze,
+      onValidate,
       suggestions,
       onChangeScript,
       onSubmitScript,
@@ -100,11 +100,11 @@ class TimeMachine extends PureComponent<Props> {
         headerOrientation: HANDLE_VERTICAL,
         headerButtons: [
           <div
-            key="analyze"
-            className="btn btn-default btn-xs analyze--button"
-            onClick={onAnalyze}
+            key="validate"
+            className="btn btn-default btn-xs validate--button"
+            onClick={onValidate}
           >
-            Analyze
+            Validate
           </div>,
         ],
         menuOptions: [],
diff --git a/ui/src/flux/containers/FluxPage.tsx b/ui/src/flux/containers/FluxPage.tsx
index 289bbb172..11b9ded99 100644
--- a/ui/src/flux/containers/FluxPage.tsx
+++ b/ui/src/flux/containers/FluxPage.tsx
@@ -7,7 +7,7 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 import KeyboardShortcuts from 'src/shared/components/KeyboardShortcuts'
 
 import {
-  analyzeSuccess,
+  validateSuccess,
   fluxTimeSeriesError,
   fluxResponseTruncatedError,
 } from 'src/shared/copy/notifications'
@@ -109,7 +109,7 @@ export class FluxPage extends PureComponent<Props, State> {
               status={status}
               service={this.service}
               suggestions={suggestions}
-              onAnalyze={this.handleAnalyze}
+              onValidate={this.handleValidate}
               onAppendFrom={this.handleAppendFrom}
               onAppendJoin={this.handleAppendJoin}
               onChangeScript={this.handleChangeScript}
@@ -581,14 +581,14 @@ export class FluxPage extends PureComponent<Props, State> {
     }, '')
   }
 
-  private handleAnalyze = async () => {
+  private handleValidate = async () => {
     const {links, notify, script} = this.props
 
     try {
       const ast = await getAST({url: links.ast, body: script})
       const body = bodyNodes(ast, this.state.suggestions)
       const status = {type: 'success', text: ''}
-      notify(analyzeSuccess)
+      notify(validateSuccess())
 
       this.setState({ast, body, status})
     } catch (error) {
diff --git a/ui/src/shared/copy/notifications.ts b/ui/src/shared/copy/notifications.ts
index 086881d48..0e7722ced 100644
--- a/ui/src/shared/copy/notifications.ts
+++ b/ui/src/shared/copy/notifications.ts
@@ -660,10 +660,10 @@ export const notifyKapacitorNotFound = () => ({
 })
 
 // Flux notifications
-export const analyzeSuccess = {
+export const validateSuccess = () => ({
   ...defaultSuccessNotification,
   message: 'No errors found. Happy Happy Joy Joy!',
-}
+})
 
 export const notifyCopyToClipboardSuccess = text => ({
   ...defaultSuccessNotification,
diff --git a/ui/src/style/components/threesizer.scss b/ui/src/style/components/threesizer.scss
index 2468fc061..7b2ec0ddd 100644
--- a/ui/src/style/components/threesizer.scss
+++ b/ui/src/style/components/threesizer.scss
@@ -157,13 +157,17 @@ $threesizer-shadow-stop: fade-out($g0-obsidian, 1);
   letter-spacing: 0.05em;
   color: $g11-sidewalk;
   padding-left: 4px;
-  padding-right: 6px;
+  padding-right: 2px;
 }
 
 .threesizer--header-controls {
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
+
+  > * {
+    margin-left: 4px;
+  }
 }
 
 .threesizer--body {
@@ -185,10 +189,6 @@ $threesizer-shadow-stop: fade-out($g0-obsidian, 1);
   margin-top: 10px;
 }
 
-.analyze--button {
-  margin-right: 3px
-}
-
 .dash-graph-context--button {
   width: 24px;
   height: 24px;
diff --git a/ui/test/flux/components/TimeMachine.test.tsx b/ui/test/flux/components/TimeMachine.test.tsx
index 2064c08a7..f701c5cfa 100644
--- a/ui/test/flux/components/TimeMachine.test.tsx
+++ b/ui/test/flux/components/TimeMachine.test.tsx
@@ -12,7 +12,7 @@ const setup = () => {
     suggestions: [],
     onSubmitScript: () => {},
     onChangeScript: () => {},
-    onAnalyze: () => {},
+    onValidate: () => {},
     onAppendFrom: () => {},
     onAppendJoin: () => {},
     status: {type: '', text: ''},

From 4603b931e8e724f5803d2a147f99b9c1e552a346 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Thu, 14 Jun 2018 10:31:20 -0700
Subject: [PATCH 09/10] Replace magic number with constant

---
 ui/src/shared/components/threesizer/Division.tsx | 13 ++++++++++---
 ui/src/shared/constants/index.tsx                |  1 +
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/ui/src/shared/components/threesizer/Division.tsx b/ui/src/shared/components/threesizer/Division.tsx
index ad0a41f25..fc83c0b2b 100644
--- a/ui/src/shared/components/threesizer/Division.tsx
+++ b/ui/src/shared/components/threesizer/Division.tsx
@@ -8,7 +8,11 @@ import classnames from 'classnames'
 import calculateSize from 'calculate-size'
 
 import DivisionHeader from 'src/shared/components/threesizer/DivisionHeader'
-import {HANDLE_VERTICAL, HANDLE_HORIZONTAL} from 'src/shared/constants/index'
+import {
+  HANDLE_VERTICAL,
+  HANDLE_HORIZONTAL,
+  MIN_HANDLE_PIXELS,
+} from 'src/shared/constants/index'
 import {MenuItem} from 'src/shared/components/threesizer/DivisionMenu'
 
 const NOOP = () => {}
@@ -156,7 +160,10 @@ class Division extends PureComponent<Props> {
       return
     }
 
-    if (orientation === HANDLE_HORIZONTAL && handlePixels >= 20) {
+    if (
+      orientation === HANDLE_HORIZONTAL &&
+      handlePixels >= MIN_HANDLE_PIXELS
+    ) {
       return (
         <DivisionHeader
           buttons={headerButtons}
@@ -168,7 +175,7 @@ class Division extends PureComponent<Props> {
       )
     }
 
-    if (handlePixels >= 20) {
+    if (handlePixels >= MIN_HANDLE_PIXELS) {
       return <div className={this.titleClass}>{name}</div>
     }
   }
diff --git a/ui/src/shared/constants/index.tsx b/ui/src/shared/constants/index.tsx
index 99566c1ba..647848f3b 100644
--- a/ui/src/shared/constants/index.tsx
+++ b/ui/src/shared/constants/index.tsx
@@ -481,6 +481,7 @@ export const HANDLE_VERTICAL = 'vertical'
 export const HANDLE_HORIZONTAL = 'horizontal'
 export const HANDLE_NONE = 'none'
 export const HANDLE_PIXELS = 20
+export const MIN_HANDLE_PIXELS = 20
 export const MAX_SIZE = 1
 export const MIN_SIZE = 0
 

From 28c13c7a942f559485aef984a7cf6484898df7e0 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Thu, 14 Jun 2018 10:42:22 -0700
Subject: [PATCH 10/10] Move division name rendering into getter

---
 .../components/threesizer/DivisionHeader.tsx       | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/ui/src/shared/components/threesizer/DivisionHeader.tsx b/ui/src/shared/components/threesizer/DivisionHeader.tsx
index b477270dd..436953e05 100644
--- a/ui/src/shared/components/threesizer/DivisionHeader.tsx
+++ b/ui/src/shared/components/threesizer/DivisionHeader.tsx
@@ -13,11 +13,9 @@ interface Props {
 
 class DivisionHeader extends PureComponent<Props> {
   public render() {
-    const {name} = this.props
-
     return (
       <div className="threesizer--header">
-        {name && <div className="threesizer--header-name">{name}</div>}
+        {this.renderName}
         <div className="threesizer--header-controls">
           {this.props.buttons.map(b => b)}
           <DivisionMenu menuItems={this.menuItems} />
@@ -26,6 +24,16 @@ class DivisionHeader extends PureComponent<Props> {
     )
   }
 
+  private get renderName(): JSX.Element {
+    const {name} = this.props
+
+    if (!name) {
+      return
+    }
+
+    return <div className="threesizer--header-name">{name}</div>
+  }
+
   private get menuItems(): MenuItem[] {
     const {onMaximize, onMinimize, menuOptions} = this.props
     return [