From 0a02e3d5071f32bba1dfd32d331ee9cd974036a0 Mon Sep 17 00:00:00 2001
From: Ty <Ty@TyfoodsForThought.com>
Date: Fri, 24 Apr 2020 16:27:19 -0400
Subject: [PATCH 1/2] I made a 'Diagram Legends' component. It takes in an
 array of objects, where each object describes the labels you would like
 configured. In this basic case it just takes 'label', 'fill color', 'marker',
 'markerFillColor'. This is used to create the legends for the potential pools
 diagram.

---
 components/DiagramLegend.jsx | 48 ++++++++++++++++++++++++++++++++++++
 pages/spatial-pooling.jsx    | 32 ++++++++++++++++++++++++
 2 files changed, 80 insertions(+)
 create mode 100644 components/DiagramLegend.jsx

diff --git a/components/DiagramLegend.jsx b/components/DiagramLegend.jsx
new file mode 100644
index 0000000..6bc2861
--- /dev/null
+++ b/components/DiagramLegend.jsx
@@ -0,0 +1,48 @@
+import * as d3 from 'd3';
+import React from 'react';
+
+class DiagramLegend extends React.Component {
+
+	componentDidMount() {
+        this.root = d3.select(`svg#${this.props.id}`)
+
+        let groupYCoord = 0
+        this.props.legendData.forEach((legendData)=>{
+            let group = this.root.append('g');
+                group.attr('transform', `translate(0, ${groupYCoord})`)
+                    .append('rect')
+                    .attr('style', `fontSize: 15px; stroke-width: 1; stroke: #808080; fill: ${legendData.fillColor}; `)
+                    .attr('width', 15)
+                    .attr('height', 15)
+                    .attr('x', 0)
+                    .attr('y', 0)
+                    .attr('r', 6)
+
+                group.append('text')
+                    .text(legendData.label)
+                    .attr('alignment-baseline', 'middle')
+                    .attr('x', 25)
+                    .attr('y', 8.5)
+                if(legendData.marker){
+                    group.append('text')
+                        .text(legendData.marker)
+                        .attr('style', `fontSize: 15px; fill: ${legendData.markerFillColor}; `)
+                        .attr('x', 2.5)
+                        .attr('y', 12.5)
+                        console.log("Marker exists for ", legendData.label );
+                }
+
+            groupYCoord+=25;
+        })
+
+	}
+
+	render() {
+		return (
+            <svg style={{...this.props.style}} id={this.props.id}></svg>
+		)
+	}
+}
+
+
+export default DiagramLegend;
\ No newline at end of file
diff --git a/pages/spatial-pooling.jsx b/pages/spatial-pooling.jsx
index c5fd98a..c317c15 100644
--- a/pages/spatial-pooling.jsx
+++ b/pages/spatial-pooling.jsx
@@ -29,6 +29,34 @@ import CompetitionStackRank from '../components/diagrams/CompetitionStackRank'
 import StreamingScalarDiagram from '../components/diagrams/StreamingScalarDiagram'
 // import DiagramStub from '../components/diagrams/DiagramStub'
 
+//Legends
+import PotentialPoolsLegend from '../components/DiagramLegend';
+let legendData = [
+    {
+        fillColor: '#FFF0A6',
+        label: 'Potential Pool',
+        marker: ''
+    },
+    {
+        fillColor: '#fff',
+        label: 'Feed Forward Input',
+        marker: ''
+    },
+    {
+        fillColor: '#BFBFBF',
+        label: 'Ignored Input',
+        marker: '✘',
+        markerFillColor: 'white'
+
+    },
+    {
+        fillColor: '#FFF0A6',
+        label: 'Observed Input',
+        marker: '✓',
+        markerFillColor: 'green'
+    },
+]
+
 var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
 
 const { BoundedScalarEncoder, CyclicEncoder, DayOfWeekCategoryEncoder, WeekendEncoder } = simplehtm.encoders
@@ -430,6 +458,10 @@ class SpatialPooling extends React.Component {
 							selectedMinicolumn={this.state.selectedMinicolumn}
 							onUpdate={selectedMinicolumn => this.setState({ selectedMinicolumn })}
 						/>
+						<PotentialPoolsLegend
+							style={{marginLeft: diagramWidth / 2}}
+							legendData={legendData}
+							id="potentialPoolLegend"/>
 						<figcaption className="figure-caption">
 							<span><a href="#potentialPools">¶</a>Figure 2:</span> Potential Pools.
 						</figcaption>

From 3fdc8f4e82746347da31b477b67586211f0c9ada Mon Sep 17 00:00:00 2001
From: Ty <Ty@TyfoodsForThought.com>
Date: Fri, 24 Apr 2020 16:36:17 -0400
Subject: [PATCH 2/2] Removed console.log inside of DiagramLEgend component

---
 components/DiagramLegend.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/DiagramLegend.jsx b/components/DiagramLegend.jsx
index 6bc2861..935beb9 100644
--- a/components/DiagramLegend.jsx
+++ b/components/DiagramLegend.jsx
@@ -29,7 +29,7 @@ class DiagramLegend extends React.Component {
                         .attr('style', `fontSize: 15px; fill: ${legendData.markerFillColor}; `)
                         .attr('x', 2.5)
                         .attr('y', 12.5)
-                        console.log("Marker exists for ", legendData.label );
+                        // console.log("Marker exists for ", legendData.label );
                 }
 
             groupYCoord+=25;