all the things.

src/App.css

@@ -7,3 +7,14 @@
   font-weight: bold;
   stroke-opacity: 0.3;
 }
+.data-container {
+  display: flex;
+  flex-direction: row;
+  border: solid 2px #aaaaaa;
+  border-radius: 5px;
+}
+.data-container > textarea {
+  border: solid 1px #aaaaaa;
+  border-width: 0 1px 0 0;
+  padding: 1rem;
+}

src/App.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import './App.css';
+import './checkbox.css';
 
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faHandPointer, faFile } from '@fortawesome/free-solid-svg-icons';
@@ -20,8 +21,7 @@ import {
   AcidTrailChartsContainer,
   EnterStringContainer,
   FileChooserContainer,
-  HashButtonContainer,
-  // HashesContainer
+  HashButtonContainer
 } from './containers';
 
 library.add(faHandPointer, faFile);
@@ -60,11 +60,16 @@ class App extends Component {
           <Container>
             <Row>
               <Col>
-                <h1>Welcome to the ACID House</h1>
-                <AcidTrailChartsContainer/>
-                <EnterStringContainer/>
-                <FileChooserContainer/>
-                <HashButtonContainer/>
+                <h1>ACID Trail</h1>
+                <p>An ACID trail is an Associated Color ID for a file or other
+                  arbitrary data.</p>
+                <AcidTrailChartsContainer>
+                  <HashButtonContainer/>
+                </AcidTrailChartsContainer>
+                <div className="data-container">
+                  <EnterStringContainer/>
+                  <FileChooserContainer/>
+                </div>
               </Col>
             </Row>
           </Container>

src/actions/acid-trail.js

@@ -0,0 +1,23 @@
+const CHANGE_SHOWBARS = Symbol('CHANGE_SHOWBARS');
+
+export const types = {
+  CHANGE_SHOWBARS
+};
+
+export const createChangeShowBarsAction = (bar, checked) => {
+  return {
+    type:     CHANGE_SHOWBARS,
+    payload:  {
+      [bar]: checked
+    }
+  };
+};
+
+export const actions = {
+  createChangeShowBarsAction
+};
+
+export default {
+  ...types,
+  ...actions
+};

src/actions/hasher.js

@@ -51,32 +51,7 @@ export const actions = {
   createFinishHashAction,
 };
 
-// export const hashFiles = () =>
-//   (dispatch, getState) => {
-//     dispatch(createStartHashAction());
-//
-//     const files = getState().hasher.files;
-//
-//     const hasher = new WorkerFileHasher({
-//       files
-//     });
-//
-//     hasher.fileWorkers.forEach(
-//       (fileWorker) => dispatch(
-//         createFinishHashAction(
-//           fileWorker.hash()
-//         )
-//       )
-//     );
-//
-//   };
-//
-// export const functions = {
-//   hashFiles
-// };
-
 export default {
   ...types,
   ...actions
-  // ...functions
 };

src/actions/index.js

@@ -1,16 +1,20 @@
 import { actions as baseActions } from './base';
 import { actions as hasherActions } from './hasher';
+import { actions as acidTrailActions } from './acid-trail';
 import { types as baseActionTypes } from './base';
 import { types as hasherActionTypes } from './hasher';
+import { types as acidTrailActionTypes } from './acid-trail';
 
 export const types = {
   ...baseActionTypes,
-  ...hasherActionTypes
+  ...hasherActionTypes,
+  ...acidTrailActionTypes
 };
 
 export const actions = {
   ...baseActions,
-  ...hasherActions
+  ...hasherActions,
+  ...acidTrailActions
 };
 
 export default {

src/checkbox.css

@@ -0,0 +1,30 @@
+.checkbox {
+  visibility: hidden;
+}
+.checkbox-container {
+  cursor: pointer;
+}
+.checkbox-bar {
+  width: 30px;
+  height: 10px;
+  background: #555;
+  margin: 20px 20px;
+  position: relative;
+  border-radius: 3px;
+}
+.checkbox-label {
+  display: block;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+
+  transition: all .2s ease;
+  position: absolute;
+  top: -3px;
+  left: -3px;
+
+  background: #ccc;
+}
+.checkbox:checked + label {
+  left: 17px;
+}

src/components/AcidTrailChart/AcidTrailChart.js

@@ -58,73 +58,98 @@ class AcidTrailChartComponent extends Component {
 
   componentDidMount () {
 
-    const { animateFauxDOM, connectFauxDOM, hash } = this.props;
+    const {
+      animateFauxDOM,
+      connectFauxDOM,
+      hash,
+      showBars = {
+        hash:   true,
+        shades: true,
+        colors: true,
+        names:  true
+      }
+    } = this.props;
 
     const height = '50';
 
     const trail = AcidTrail.trail(hash.hashed);
 
     const faux = connectFauxDOM('div', 'chart');
 
-    const hashcolors = trail.colors();
-    const shadenames = trail.hashColors.map(
-      (color) => color.match.shadeName
-    );
-    const shades = trail.hashColors.map(
-      (color) => color.match.shade.toLowerCase()
-    );
-    const matchcolors = trail.matchcolors().map(
-      (color) => color.toLowerCase()
-    );
-    const matchnames = trail.matchnames();
-
-    let svg = d3.select(faux).append('svg')
-      .attr('width', '100%')
-      .attr('height', height)
-      .append('g');
-
-    this.addBar({
-      colors: hashcolors,
-      names:  hashcolors,
-      svg,
-      height
-    });
-
-    svg = d3.select(faux).append('svg')
-      .attr('width', '100%')
-      .attr('height', height)
-      .append('g');
-
-    this.addBar({
-      colors: shades,
-      names:  shadenames,
-      svg,
-      height
-    });
-
-    svg = d3.select(faux).append('svg')
-      .attr('width', '100%')
-      .attr('height', height)
-      .append('g');
-
-    this.addBar({
-      colors: matchcolors,
-      names:  matchcolors,
-      svg,
-      height
-    });
-
-    svg = d3.select(faux).append('svg')
-      .attr('width', '100%')
-      .attr('height', height)
-      .append('g');
-
-    this.addBar({
-      colors: matchcolors,
-      names:  matchnames,
-      svg,
-      height
-    });
+    let svg;
+
+    if (showBars.hash) {
+      const hashcolors = trail.colors();
+
+      svg = d3.select(faux).append('svg')
+        .attr('width', '100%')
+        .attr('height', height)
+        .append('g');
+
+      this.addBar({
+        colors: hashcolors,
+        names:  hashcolors,
+        svg,
+        height
+      });
+    }
+
+    if (showBars.shades) {
+      const shadenames = trail.hashColors.map(
+        (color) => color.match.shadeName
+      );
+      const shades = trail.hashColors.map(
+        (color) => color.match.shade.toLowerCase()
+      );
+
+      svg = d3.select(faux).append('svg')
+        .attr('width', '100%')
+        .attr('height', height)
+        .append('g');
+
+      this.addBar({
+        colors: shades,
+        names:  shadenames,
+        svg,
+        height
+      });
+    }
+
+    if (showBars.colors || showBars.names) {
+      const matchcolors = trail.matchcolors().map(
+        (color) => color.toLowerCase()
+      );
+
+      if (showBars.colors) {
+        svg = d3.select(faux).append('svg')
+          .attr('width', '100%')
+          .attr('height', height)
+          .append('g');
+
+        this.addBar({
+          colors: matchcolors,
+          names:  matchcolors,
+          svg,
+          height
+        });
+      }
+
+      if (showBars.names) {
+        const matchnames = trail.matchnames();
+
+        svg = d3.select(faux).append('svg')
+          .attr('width', '100%')
+          .attr('height', height)
+          .append('g');
+
+        this.addBar({
+          colors: matchcolors,
+          names:  matchnames,
+          svg,
+          height
+        });
+      }
+    }
 
     animateFauxDOM(800);
   }

src/components/AcidTrailCharts/AcidTrailCharts.css

@@ -0,0 +1,25 @@
+.showBars {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+.showBars > div {
+  flex-basis: 15%;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+.showBars > .hash-button {
+  margin-left: 5%;
+  justify-self: flex-end;
+  flex-grow: 10;
+  text-align: right;
+}
+.showBar-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.acid-trail-charts {
+  margin: 1rem;
+}