feat: list of notes added to left-handed container

src/App.js

@@ -25,6 +25,7 @@ import { uploadDataset } from "epics/upload-dataset-epic";
 import Header from 'features/header/Header';
 import HierarchySelector from 'features/hierarchy-selector/HierarchySelector';
 import ComparisonSelector from 'features/comparison-selector/ComparisonSelector';
+import NoteSelector from 'features/note-selector/NoteSelector';
 import MiscControls from 'features/misc-controls/MiscControls';
 import SearchControls from 'features/search/SearchControls';
 import Visualization from 'features/visualization/Visualization';
@@ -110,6 +111,7 @@ class App extends Component {
     this.setState({
       showData: !this.state.showData,
       showComparison: false,
+      showNotes:false,
       showGrouping: false,
       showFiltering: false,
     });
@@ -124,6 +126,16 @@ class App extends Component {
     });
   }
 
+  toggleShowNotes = () =>{
+    this.setState({
+      showData: false,
+      showComparison: false,
+      showNotes: !this.state.showNotes,
+      showGrouping: false,
+      showFiltering: false
+    });
+  }
+
   toggleShowGrouping = () =>{
     this.setState({
       showData: false,
@@ -260,6 +272,7 @@ class App extends Component {
     const endUuid = this.state.endUuid;
     const showData = this.state.showData;
     const showComparison = this.state.showComparison;
+    const showNotes = this.state.showNotes;
     const showGrouping = this.state.showGrouping;
     const showOptions = this.state.showOptions;
     const options = this.state.options;
@@ -346,6 +359,15 @@ class App extends Component {
               Please select at least 2 datasets to continue
             </div>
           }
+          <div className={style.accordionHeader} onClick={this.toggleShowNotes}>
+            Notes  {!showNotes && <FontAwesomeIcon icon={faAngleDoubleDown} />}{showNotes && <FontAwesomeIcon  onClick={this.toggleShowNotes} icon={faAngleDoubleUp} />}
+          </div>
+          { showNotes &&
+            <div> 
+              <NoteSelector />
+            </div>
+          }
+
 
           <div className={style.footerContainer}>
             <span className={ style.centerSpan }>
@@ -357,6 +379,8 @@ class App extends Component {
                 </div>
             </span>
           </div>
+
+
         </div>
         { datasetCount === 0 && lastUpdated !== null &&
           <div  className={ style.emptyDataset }>
@@ -366,6 +390,8 @@ class App extends Component {
           </div>
         }
 
+
+
         <div className={ style.canvas }>
           <Visualization startUid={startUuid} endUid={endUuid} />
         </div>

src/features/note-selector/NoteSelector.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { connect } from "react-redux";
+
+import { 
+  getNotesIndexedByHash
+} from "domain/notes";
+
+import style from './NoteSelector.module.css';
+
+class NoteSelector extends React.Component {
+
+  state = {
+
+  }
+
+  render() {
+    const Notes = ({notes}) => (
+      <>
+        {Object.values(notes).map(note => (
+          <div className={style.tag} key={note.id}>
+            {note.note.title}
+          </div>
+        ))}
+      </>
+    );
+
+    return (
+      <>
+        <ul className={style.tags}>
+            <Notes notes={this.props.notes}/>
+        </ul>
+      </>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    notes: getNotesIndexedByHash(state)
+  }
+};
+
+const mapDispatchToProps = {
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(NoteSelector);

src/features/note-selector/NoteSelector.module.css

@@ -0,0 +1,33 @@
+.tags {
+  list-style: none;
+  margin: 10px 5px 5px 5px;
+  overflow: hidden; 
+  padding: 0;
+}
+
+.tags li {
+  float: left; 
+}
+
+.tag {
+  background: #eee;
+  border-radius: 6px 6px 6px 6px;
+  display: inline-block;
+  height: 26px;
+  line-height: 26px;
+  padding: 0 20px 0 20px;
+  position: relative;
+  margin: 0 10px 10px 0;
+  text-decoration: none;
+  -webkit-transition: color 0.2s;
+}
+
+.tag:hover {
+  /*background-color: #cc0000;*/
+  background-color: rgb(65, 65, 65);
+  color: white;
+}
+
+.tag:hover::after {
+    border-left-color: rgb(65, 65, 65); 
+}