New tag dropdown

packages/toc/src/generators/notebookgenerator/tagstool/index.tsx

@@ -29,7 +29,6 @@ export class TagsToolComponent extends React.Component<
     this.state = {
       selected: []
     };
-    this.tracker = this.props.tracker;
   }
 
   /*
@@ -41,6 +40,7 @@ export class TagsToolComponent extends React.Component<
       let selectedTags = this.state.selected;
       selectedTags.push(newState);
       this.setState({ selected: selectedTags });
+      this.filterTags(selectedTags);
     } else {
       let selectedTags = this.state.selected;
       let newSelectedTags: string[] = [];
@@ -53,6 +53,7 @@ export class TagsToolComponent extends React.Component<
         newSelectedTags = [];
       }
       this.setState({ selected: newSelectedTags });
+      this.filterTags(newSelectedTags);
     }
   };
 
@@ -82,37 +83,11 @@ export class TagsToolComponent extends React.Component<
     }
   }
 
-  /*
-  * Selects cells in the document that are tagged with any of the selected tags
-  * in the TOC tags dropdown
-  */
-  selectCells = () => {
-    let notebookPanel = this.tracker.currentWidget;
-    if (notebookPanel) {
-      let notebook = notebookPanel.content;
-      let first: boolean = true;
-      for (let i = 0; i < notebookPanel.model.cells.length; i++) {
-        let currentCell = notebook.widgets[i] as Cell;
-        for (let j = 0; j < this.state.selected.length; j++) {
-          if (this.containsTag(this.state.selected[j], currentCell)) {
-            if (first === true) {
-              notebook.deselectAll();
-              notebook.activeCellIndex = i;
-              first = false;
-            } else {
-              notebook.select(notebook.widgets[i] as Cell);
-            }
-          }
-        }
-      }
-    }
-  };
-
   /*
   * Tells the generator to filter the TOC by the selected tags.
   */
-  filterTags = () => {
-    this.props.generatorOptionsRef.filtered = this.state.selected;
+  filterTags = (selected: string[]) => {
+    this.props.generatorOptionsRef.filtered = selected;
   };
 
   /*
@@ -120,6 +95,32 @@ export class TagsToolComponent extends React.Component<
   */
   render() {
     let renderedJSX = <div className="toc-no-tags-div">No Tags Available</div>;
+    let filterText;
+    if (this.state.selected.length === 0) {
+      filterText = (
+        <span className={'toc-filter-button-na'}> Clear Filters </span>
+      );
+    } else if (this.state.selected.length === 1) {
+      filterText = (
+        <span
+          className={'toc-filter-button'}
+          onClick={() => this.deselectAllTags()}
+        >
+          {' '}
+          Clear 1 Filter{' '}
+        </span>
+      );
+    } else {
+      filterText = (
+        <span
+          className={'toc-filter-button'}
+          onClick={() => this.deselectAllTags()}
+        >
+          {' '}
+          Clear {this.state.selected.length} Filters{' '}
+        </span>
+      );
+    }
     if (this.props.allTagsList && this.props.allTagsList.length > 0) {
       renderedJSX = (
         <div className={'toc-tags-container'}>
@@ -128,32 +129,10 @@ export class TagsToolComponent extends React.Component<
             selectionStateHandler={this.changeSelectionState}
             selectedTags={this.state.selected}
           />
-          <span
-            className={'toc-clear-button'}
-            onClick={() => this.deselectAllTags()}
-          >
-            {' '}
-            Clear All{' '}
-          </span>
-          <span
-            onClick={() => this.filterTags()}
-            className={'toc-filter-button'}
-          >
-            {' '}
-            Filter
-          </span>
-          <span
-            className={'toc-select-button'}
-            onClick={() => this.selectCells()}
-          >
-            {' '}
-            Select Cells{' '}
-          </span>
+          {filterText}
         </div>
       );
     }
     return renderedJSX;
   }
-
-  private tracker: INotebookTracker;
 }

packages/toc/style/index.css

@@ -103,8 +103,8 @@
   background-color: none;
   background-size: 100%;
   background-position: center;
-  height: 16px;
-  width: 16px;
+  height: 24px;
+  width: 24px;
   margin: 4px;
   border-radius: 2px;
 }
@@ -134,8 +134,8 @@
 }
 
 .toc-toolbar-tag-icon {
-  width: 24px;
-  height: 16px;
+  width: 30px;
+  height: 22px;
   margin: 4px 9px 4px 4px;
 }
 
@@ -311,41 +311,51 @@
   font-size: 12px;
   color: var(--jp-ui-font-color1);
   padding-left: 15px;
-  padding-top: 7px;
+  /* padding-top: 7px; */
   user-select: none;
+  float: right;
 }
 
 .toc-clear-button:hover {
   font-size: 12px;
   color: var(--jp-ui-font-color2);
   padding-left: 15px;
-  padding-top: 7px;
+  /* padding-top: 7px; */
   user-select: none;
 }
 
-.toc-select-button {
+.toc-filter-button {
   background-color: var(--jp-layout-color1);
   border: solid 1px var(--jp-layout-color4);
   border-radius: 3px;
   width: fit-content;
-  padding-left: 10px;
-  padding-right: 10px;
+  padding: 5px;
+  padding-left: 6px;
+  padding-right: 6px;
   margin-right: 17px;
   color: var(--jp-layout-color5);
   float: right;
   font-size: 12px;
   user-select: none;
+  margin-bottom: 13px;
 }
 
-.toc-filter-button {
+.toc-filter-button:hover {
   background-color: var(--jp-layout-color4);
   border: solid 1px var(--jp-layout-color4);
+  color: var(--jp-layout-color1);
+}
+
+.toc-filter-button-na {
+  background-color: var(--jp-layout-color1);
+  border: solid 1px var(--jp-ui-font-color3);
   border-radius: 3px;
   width: fit-content;
-  padding-left: 10px;
-  padding-right: 10px;
-  margin-right: 15px;
-  color: var(--jp-layout-color1);
+  padding: 5px;
+  padding-left: 6px;
+  padding-right: 6px;
+  margin-right: 17px;
+  color: var(--jp-ui-font-color3);
   float: right;
   font-size: 12px;
   user-select: none;
@@ -393,7 +403,7 @@
   border-radius: 20px;
   padding: 10px;
   padding-bottom: 4px;
-  padding-top: 3px;
+  padding-top: 5px;
   margin: 3px;
   width: fit-content;
   max-width: calc(100% - 25px);
@@ -414,7 +424,7 @@
   display: flex;
   flex-wrap: wrap;
   height: fit-content;
-  margin-bottom: 20px;
+  padding-bottom: 6px;
   padding-right: 20px;
   padding-left: 9px;
   padding-top: 6px;