From c93127861912c35e335d2b790a4e8bccf2a2f287 Mon Sep 17 00:00:00 2001
From: Markelle Kelly <markellekelly@gmail.com>
Date: Thu, 9 Aug 2018 15:52:07 -0700
Subject: [PATCH] Added show/hide cell functionality

---
 src/generators.tsx        | 37 +++++++++++++++++++++++++++++++++++++
 static/eyeball_hidden.svg |  3 +++
 static/eyeball_hover.svg  |  3 +++
 static/eyeball_view.svg   |  3 +++
 style/index.css           |  9 +++++++++
 5 files changed, 55 insertions(+)
 create mode 100644 static/eyeball_hidden.svg
 create mode 100644 static/eyeball_hover.svg
 create mode 100644 static/eyeball_view.svg

diff --git a/src/generators.tsx b/src/generators.tsx
index 4963ed0..246aff9 100644
--- a/src/generators.tsx
+++ b/src/generators.tsx
@@ -153,6 +153,11 @@ function notebookItemRenderer(
     6: '10'
   };
   let jsx;
+  const hideOnClick = (cell?: Cell) => {
+    if (cell) {
+      cell.inputHidden = !cell.inputHidden;
+    }
+  };
   if (item.type === 'markdown' || item.type === 'header') {
     const paddingLeft = 24;
     const collapseOnClick = (cellRef?: Cell) => {
@@ -221,6 +226,14 @@ function notebookItemRenderer(
           <div className="toc-entry-holder">
             {item.hasChild && twistButton}
             {jsx}
+            <div className={'eyeball-icon'}>
+              <img
+                src={require('../static/eyeball_view.svg')}
+                onClick={event => {
+                  hideOnClick(item.cellRef);
+                }}
+              />
+            </div>
           </div>
         );
       }
@@ -271,6 +284,14 @@ function notebookItemRenderer(
           <div className="toc-entry-holder">
             {item.hasChild && twistButton}
             {jsx}
+            <div className={'eyeball-icon'}>
+              <img
+                src={require('../static/eyeball_view.svg')}
+                onClick={event => {
+                  hideOnClick(item.cellRef);
+                }}
+              />
+            </div>
           </div>
         );
       }
@@ -284,6 +305,14 @@ function notebookItemRenderer(
         <span className={'toc-code-span'}>
           <CodeComponent code={item.text!} theme="jupyter" />
         </span>
+        <div className={'eyeball-icon'}>
+          <img
+            src={require('../static/eyeball_view.svg')}
+            onClick={event => {
+              hideOnClick(item.cellRef);
+            }}
+          />
+        </div>
       </div>
     );
   } else if (item.type === 'raw' && options.showRaw) {
@@ -292,6 +321,14 @@ function notebookItemRenderer(
         <span className={'toc-code-span'}>
           <CodeComponent code={item.text!} theme="none" />
         </span>
+        <div className={'eyeball-icon'}>
+          <img
+            src={require('../static/eyeball_view.svg')}
+            onClick={event => {
+              hideOnClick(item.cellRef);
+            }}
+          />
+        </div>
       </div>
     );
   } else {
diff --git a/static/eyeball_hidden.svg b/static/eyeball_hidden.svg
new file mode 100644
index 0000000..e28ffdb
--- /dev/null
+++ b/static/eyeball_hidden.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="11" viewBox="0 0 16 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0C4.36364 0 1.25818 2.26182 0 5.45455C1.25818 8.64727 4.36364 10.9091 8 10.9091C11.6364 10.9091 14.7418 8.64727 16 5.45455C14.7418 2.26182 11.6364 0 8 0ZM8 9.09091C5.99273 9.09091 4.36364 7.46182 4.36364 5.45455C4.36364 3.44727 5.99273 1.81818 8 1.81818C10.0073 1.81818 11.6364 3.44727 11.6364 5.45455C11.6364 7.46182 10.0073 9.09091 8 9.09091ZM8 3.27273C6.79273 3.27273 5.81818 4.24727 5.81818 5.45455C5.81818 6.66182 6.79273 7.63636 8 7.63636C9.20727 7.63636 10.1818 6.66182 10.1818 5.45455C10.1818 4.24727 9.20727 3.27273 8 3.27273Z" fill="#E2E2E2"/>
+</svg>
diff --git a/static/eyeball_hover.svg b/static/eyeball_hover.svg
new file mode 100644
index 0000000..e084fc6
--- /dev/null
+++ b/static/eyeball_hover.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.33333 0C4 0 1.15333 2.07333 0 5C1.15333 7.92667 4 10 7.33333 10C10.6667 10 13.5133 7.92667 14.6667 5C13.5133 2.07333 10.6667 0 7.33333 0ZM7.33333 8.33333C5.49333 8.33333 4 6.84 4 5C4 3.16 5.49333 1.66667 7.33333 1.66667C9.17333 1.66667 10.6667 3.16 10.6667 5C10.6667 6.84 9.17333 8.33333 7.33333 8.33333ZM7.33333 3C6.22667 3 5.33333 3.89333 5.33333 5C5.33333 6.10667 6.22667 7 7.33333 7C8.44 7 9.33333 6.10667 9.33333 5C9.33333 3.89333 8.44 3 7.33333 3Z" transform="translate(0.666504)" fill="#828282"/>
+</svg>
diff --git a/static/eyeball_view.svg b/static/eyeball_view.svg
new file mode 100644
index 0000000..297fae9
--- /dev/null
+++ b/static/eyeball_view.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.33333 0C4 0 1.15333 2.07333 0 5C1.15333 7.92667 4 10 7.33333 10C10.6667 10 13.5133 7.92667 14.6667 5C13.5133 2.07333 10.6667 0 7.33333 0ZM7.33333 8.33333C5.49333 8.33333 4 6.84 4 5C4 3.16 5.49333 1.66667 7.33333 1.66667C9.17333 1.66667 10.6667 3.16 10.6667 5C10.6667 6.84 9.17333 8.33333 7.33333 8.33333ZM7.33333 3C6.22667 3 5.33333 3.89333 5.33333 5C5.33333 6.10667 6.22667 7 7.33333 7C8.44 7 9.33333 6.10667 9.33333 5C9.33333 3.89333 8.44 3 7.33333 3Z" transform="translate(0.666992)" fill="black"/>
+</svg>
diff --git a/style/index.css b/style/index.css
index 36a1ca2..3b3c2c5 100644
--- a/style/index.css
+++ b/style/index.css
@@ -222,6 +222,7 @@ TOTAL SIZE REMAINS AT 24PX INCLUDING MARGINS AND PADDING */
   display: inline-flex;
   position: relative;
   align-items: center;
+  width: 100%;
 }
 
 .toc-collapse-button {
@@ -232,6 +233,7 @@ TOTAL SIZE REMAINS AT 24PX INCLUDING MARGINS AND PADDING */
 }
 
 .header-cell {
+  width: 100%;
   overflow-x: hidden;
   overflow-y: hidden;
 }
@@ -248,3 +250,10 @@ TOTAL SIZE REMAINS AT 24PX INCLUDING MARGINS AND PADDING */
   opacity: 0;
   overflow: hidden;
 }
+
+.eyeball-icon {
+  float: right;
+  padding: 0px;
+  margin: 0px;
+  padding-left: 7px;
+}