From ec8dc69112da9393512ae830e90e49165527d865 Mon Sep 17 00:00:00 2001
From: Colin Megill <colinmegill@gmail.com>
Date: Mon, 9 Oct 2017 22:17:48 -0700
Subject: [PATCH] add section header

---
 src/components/categorical/categorical.js |  2 ++
 src/components/continuous/continuous.js   |  7 +++++--
 src/components/framework/sectionHeader.js | 12 ++++++++++++
 src/components/graph/graph.js             |  3 ++-
 4 files changed, 21 insertions(+), 3 deletions(-)
 create mode 100644 src/components/framework/sectionHeader.js

diff --git a/src/components/categorical/categorical.js b/src/components/categorical/categorical.js
index 7e7c88b2..b21196e5 100644
--- a/src/components/categorical/categorical.js
+++ b/src/components/categorical/categorical.js
@@ -1,5 +1,6 @@
 import React from "react";
 import _ from "lodash";
+import { connect } from "react-redux";
 import * as globals from "../../globals";
 
 import cells from "../../../data/GBM_metadata.js";
@@ -52,6 +53,7 @@ const Categorical = () => {
       }
     </div>
   )
+        <SectionHeader text="Categorical Metadata"/>
 };
 
 export default Categorical;
diff --git a/src/components/continuous/continuous.js b/src/components/continuous/continuous.js
index 1c56758d..d226058d 100644
--- a/src/components/continuous/continuous.js
+++ b/src/components/continuous/continuous.js
@@ -4,6 +4,7 @@ import cells from "../../../data/GBM_metadata.js";
 import drawParallelCoordinates from "./drawParallelCoordinates";
 import createContinuousRanges from "./createContinuousRanges";
 import styles from './parallelCoordinates.css';
+import SectionHeader from "../framework/sectionHeader";
 
 import {
   margin,
@@ -28,7 +29,7 @@ class Continuous extends React.Component {
   render() {
     return (
       <div id="parcoords_wrapper" style={{marginTop: 50}}>
-        <h3> Continuous Metadata </h3>
+        <SectionHeader text="Continuous Metadata"/>
         <div style={{marginBottom: 30}}>
           Color By:
           <button style={{marginLeft: 10}}>Cluster_2d_color</button>
@@ -48,10 +49,12 @@ class Continuous extends React.Component {
             width:  width + margin.left + margin.right + "px",
             height: height + margin.top + margin.bottom + "px"
           }}></div>
-        <pre id="parcoords_output" className={styles.pre}></pre>
       </div>
     )
   }
 };
 
 export default Continuous;
+
+/* text appended to parellel coords giving N instances of selection */ 
+// <pre id="parcoords_output" className={styles.pre}></pre>
diff --git a/src/components/framework/sectionHeader.js b/src/components/framework/sectionHeader.js
new file mode 100644
index 00000000..73446bab
--- /dev/null
+++ b/src/components/framework/sectionHeader.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const SectionHeader = ({text}) => (
+  <p style={{
+    fontSize: 32,
+    fontWeight: 700
+  }}>
+    {text}
+  </p>
+);
+
+export default SectionHeader;
diff --git a/src/components/graph/graph.js b/src/components/graph/graph.js
index beb92949..b8d99597 100644
--- a/src/components/graph/graph.js
+++ b/src/components/graph/graph.js
@@ -2,6 +2,7 @@ import React from 'react';
 import _ from "lodash";
 import styles from "./graph.css";
 import {setupGraphElements, drawGraph} from "./drawGraph";
+import SectionHeader from "../framework/sectionHeader";
 
 class Graph extends React.Component {
 
@@ -38,7 +39,7 @@ class Graph extends React.Component {
   render() {
     return (
       <div id="graphWrapper">
-        <h3> Graph </h3>
+        <SectionHeader text="Graph"/>
         <div id="graphAttachPoint"> </div>
       </div>
     )