From ec6b3c54072a77bb4305da1c234db6c649218b88 Mon Sep 17 00:00:00 2001
From: undergroundwires <undergroundwires@users.noreply.github.com>
Date: Thu, 9 Jan 2020 20:18:20 +0100
Subject: [PATCH] added support for grouping

---
 src/App.vue                                   | 14 +---
 src/presentation/Scripts/Cards/CardList.vue   |  3 -
 .../Scripts/Cards/CardListItem.vue            | 10 +--
 .../Scripts/Cards/ScriptNodeParser.ts         | 43 -----------
 src/presentation/Scripts/CategoryTree.vue     | 19 -----
 src/presentation/Scripts/Grouping/Grouping.ts |  4 +
 .../Scripts/Grouping/TheGrouper.vue           | 62 +++++++++++++++
 .../Scripts/ScriptsTree/ScriptNodeParser.ts   | 63 ++++++++++++++++
 .../ScriptsTree.vue}                          | 75 ++++++++++---------
 .../{ => ScriptsTree}/SelectableTree/INode.ts |  0
 .../{ => ScriptsTree}/SelectableTree/Node.vue |  0
 .../SelectableTree/SelectableTree.vue         |  0
 .../Scripts/Selector/TheSelector.vue          | 41 +++++-----
 src/presentation/Scripts/TheGrouper.vue       | 48 ------------
 src/presentation/Scripts/TheScripts.vue       | 67 +++++++++++++++++
 src/presentation/styles/tree.scss             |  7 ++
 16 files changed, 270 insertions(+), 186 deletions(-)
 delete mode 100644 src/presentation/Scripts/Cards/ScriptNodeParser.ts
 delete mode 100644 src/presentation/Scripts/CategoryTree.vue
 create mode 100644 src/presentation/Scripts/Grouping/Grouping.ts
 create mode 100644 src/presentation/Scripts/Grouping/TheGrouper.vue
 create mode 100644 src/presentation/Scripts/ScriptsTree/ScriptNodeParser.ts
 rename src/presentation/Scripts/{Cards/CardListItemScripts.vue => ScriptsTree/ScriptsTree.vue} (54%)
 rename src/presentation/Scripts/{ => ScriptsTree}/SelectableTree/INode.ts (100%)
 rename src/presentation/Scripts/{ => ScriptsTree}/SelectableTree/Node.vue (100%)
 rename src/presentation/Scripts/{ => ScriptsTree}/SelectableTree/SelectableTree.vue (100%)
 delete mode 100644 src/presentation/Scripts/TheGrouper.vue
 create mode 100644 src/presentation/Scripts/TheScripts.vue

diff --git a/src/App.vue b/src/App.vue
index c63dedff..72e9da75 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,11 +4,7 @@
           <TheHeader class="row"
                      github-url="https://github.com/undergroundwires/privacy.sexy" />
           <!-- <TheSearchBar> </TheSearchBar> -->
-          <!-- <div style="display: flex; justify-content: space-between;"> -->
-          <!-- <TheGrouper></TheGrouper> -->
-          <TheSelector class="row" />
-          <!-- </div> -->
-          <CardList />
+          <TheScripts class="row"/>
           <TheCodeArea class="row" theme="xcode" />
           <TheCodeButtons class="row" />
           <TheFooter />
@@ -24,9 +20,7 @@ import TheFooter from './presentation/TheFooter.vue';
 import TheCodeArea from './presentation/TheCodeArea.vue';
 import TheCodeButtons from './presentation/TheCodeButtons.vue';
 import TheSearchBar from './presentation/TheSearchBar.vue';
-import TheSelector from './presentation/Scripts/Selector/TheSelector.vue';
-import TheGrouper from './presentation/Scripts/TheGrouper.vue';
-import CardList from './presentation/Scripts/Cards/CardList.vue';
+import TheScripts from './presentation/Scripts/TheScripts.vue';
 
 @Component({
   components: {
@@ -34,9 +28,7 @@ import CardList from './presentation/Scripts/Cards/CardList.vue';
     TheCodeArea,
     TheCodeButtons,
     TheSearchBar,
-    TheGrouper,
-    CardList,
-    TheSelector,
+    TheScripts,
     TheFooter,
   },
 })
diff --git a/src/presentation/Scripts/Cards/CardList.vue b/src/presentation/Scripts/Cards/CardList.vue
index 33f2da28..a828af77 100644
--- a/src/presentation/Scripts/Cards/CardList.vue
+++ b/src/presentation/Scripts/Cards/CardList.vue
@@ -50,9 +50,6 @@ export default class CardList extends StatefulVue {
   display: flex;
   flex-flow: row wrap;
   font-family: $main-font;
-  .card {
-
-  }
 }
 .error {
   width: 100%;
diff --git a/src/presentation/Scripts/Cards/CardListItem.vue b/src/presentation/Scripts/Cards/CardListItem.vue
index 1cb46187..44050f14 100644
--- a/src/presentation/Scripts/Cards/CardListItem.vue
+++ b/src/presentation/Scripts/Cards/CardListItem.vue
@@ -12,19 +12,19 @@
       </div>
       <div class="card__expander" v-on:click.stop>
           <font-awesome-icon :icon="['fas', 'times']"  class="close-button" v-on:click="onSelected(false)"/>
-          <CardListItemScripts :categoryId="categoryId"></CardListItemScripts>
+          <ScriptsTree :categoryId="categoryId"></ScriptsTree>
     </div>
     </div>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator';
-import CardListItemScripts from './CardListItemScripts.vue';
+import ScriptsTree from '@/presentation/Scripts/ScriptsTree/ScriptsTree.vue';
 import { StatefulVue } from '@/presentation/StatefulVue';
 
 @Component({
   components: {
-    CardListItemScripts,
+    ScriptsTree,
   },
 })
 export default class CardListItem extends StatefulVue {
@@ -124,10 +124,6 @@ export default class CardListItem extends StatefulVue {
     justify-content: center;
     align-items: center;
     
-    text-transform: uppercase;
-    color: $light-gray;
-    font-size: 1.5em;
-    
     .close-button {
       font-size: 0.75em;
       position: absolute;
diff --git a/src/presentation/Scripts/Cards/ScriptNodeParser.ts b/src/presentation/Scripts/Cards/ScriptNodeParser.ts
deleted file mode 100644
index 169a9c01..00000000
--- a/src/presentation/Scripts/Cards/ScriptNodeParser.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { ICategory } from './../../../domain/ICategory';
-import { IApplicationState, IUserSelection } from '@/application/State/IApplicationState';
-import { INode } from './../SelectableTree/INode';
-
-export class ScriptNodeParser {
-    public static parseNodes(categoryId: number, state: IApplicationState): INode[] | undefined {
-        const category = state.app.findCategory(categoryId);
-        if (!category) {
-              throw new Error(`Category with id ${categoryId} does not exist`);
-          }
-        const tree = this.parseNodesRecursively(category, state.selection);
-        return tree;
-    }
-
-    private static parseNodesRecursively(parentCategory: ICategory, selection: IUserSelection): INode[] {
-          const nodes = new Array<INode>();
-          if (parentCategory.subCategories && parentCategory.subCategories.length > 0) {
-              for (const subCategory of parentCategory.subCategories) {
-                  const subCategoryNodes = this.parseNodesRecursively(subCategory, selection);
-                  nodes.push(
-                    {
-                      id: `cat${subCategory.id}`,
-                      text: subCategory.name,
-                      selected: false,
-                      children: subCategoryNodes,
-                      documentationUrls: subCategory.documentationUrls,
-                    });
-              }
-          }
-          if (parentCategory.scripts && parentCategory.scripts.length > 0) {
-              for (const script of parentCategory.scripts) {
-                  nodes.push( {
-                    id: script.id,
-                    text: script.name,
-                    selected: selection.isSelected(script),
-                    children: undefined,
-                    documentationUrls: script.documentationUrls,
-                });
-              }
-          }
-          return nodes;
-      }
-}
diff --git a/src/presentation/Scripts/CategoryTree.vue b/src/presentation/Scripts/CategoryTree.vue
deleted file mode 100644
index 91dba0a5..00000000
--- a/src/presentation/Scripts/CategoryTree.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-    <div>
-        <CardList v-if="isGrouped">
-        </CardList>
-        <SelectableTree></SelectableTree>
-    </div>
-</template>
-
-<script lang="ts">
-    import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
-    import { Category } from '@/domain/Category';
-    import { StatefulVue } from '@/presentation/StatefulVue';
-
-    /** Shows content of single category or many categories */
-    @Component
-    export default class CategoryTree extends StatefulVue {
-        @Prop() public data!: Category | Category[];
-    }
-</script>
\ No newline at end of file
diff --git a/src/presentation/Scripts/Grouping/Grouping.ts b/src/presentation/Scripts/Grouping/Grouping.ts
new file mode 100644
index 00000000..ccaf200f
--- /dev/null
+++ b/src/presentation/Scripts/Grouping/Grouping.ts
@@ -0,0 +1,4 @@
+export enum Grouping {
+    Cards = 1,
+    None = 0,
+}
diff --git a/src/presentation/Scripts/Grouping/TheGrouper.vue b/src/presentation/Scripts/Grouping/TheGrouper.vue
new file mode 100644
index 00000000..8f6d30bb
--- /dev/null
+++ b/src/presentation/Scripts/Grouping/TheGrouper.vue
@@ -0,0 +1,62 @@
+<template>
+    <div class="container">
+        <span class="part">Group by:</span>
+        <span class="part">
+            <span 
+                class="part"
+                v-bind:class="{ 'disabled': isGrouped, 'enabled': !isGrouped}"
+                @click="!isGrouped ? toggleGrouping() : undefined">Cards</span>
+            <span class="part">|</span>
+            <span class="part"
+                v-bind:class="{ 'disabled': !isGrouped, 'enabled': isGrouped}"
+                @click="isGrouped ? toggleGrouping() : undefined">None</span>
+            </span>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { StatefulVue } from '@/presentation/StatefulVue';
+import { IApplicationState } from '@/application/State/IApplicationState';
+import { Grouping } from './Grouping';
+
+@Component
+export default class TheGrouper extends StatefulVue {
+    public currentGrouping: Grouping;
+    public isGrouped = true;
+
+    public toggleGrouping() {
+        this.currentGrouping = this.currentGrouping === Grouping.None ? Grouping.Cards : Grouping.None;
+        this.isGrouped = this.currentGrouping === Grouping.Cards;
+        this.$emit('groupingChanged', this.currentGrouping);
+    }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/presentation/styles/colors.scss";
+@import "@/presentation/styles/fonts.scss";
+
+.container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    font-family: $normal-font;
+    .part {
+        display: flex;
+        margin-right:5px;
+    }
+}
+
+.enabled {
+    cursor: pointer;
+    &:hover {
+        font-weight:bold;
+        text-decoration:underline;
+    }
+}
+.disabled {
+    color:$gray;
+}
+
+</style>
diff --git a/src/presentation/Scripts/ScriptsTree/ScriptNodeParser.ts b/src/presentation/Scripts/ScriptsTree/ScriptNodeParser.ts
new file mode 100644
index 00000000..bf25782f
--- /dev/null
+++ b/src/presentation/Scripts/ScriptsTree/ScriptNodeParser.ts
@@ -0,0 +1,63 @@
+import { IApplicationState, IUserSelection } from '@/application/State/IApplicationState';
+import { ICategory, IScript } from '@/domain/ICategory';
+import { INode } from './SelectableTree/INode';
+
+export function parseAllCategories(state: IApplicationState): INode[] | undefined {
+  const nodes = new Array<INode>();
+  for (const category of state.app.categories) {
+    const children = parseCategoryRecursively(category, state.selection);
+    nodes.push(convertCategoryToNode(category, children));
+  }
+  return nodes;
+}
+
+export function parseSingleCategory(categoryId: number, state: IApplicationState): INode[] | undefined {
+  const category = state.app.findCategory(categoryId);
+  if (!category) {
+    throw new Error(`Category with id ${categoryId} does not exist`);
+  }
+  const tree = parseCategoryRecursively(category, state.selection);
+  return tree;
+}
+
+function parseCategoryRecursively(
+  parentCategory: ICategory,
+  selection: IUserSelection): INode[] {
+  if (!parentCategory) { throw new Error('parentCategory is undefined'); }
+  if (!selection) { throw new Error('selection is undefined'); }
+
+  const nodes = new Array<INode>();
+  if (parentCategory.subCategories && parentCategory.subCategories.length > 0) {
+    for (const subCategory of parentCategory.subCategories) {
+      const subCategoryNodes = parseCategoryRecursively(subCategory, selection);
+      nodes.push(convertCategoryToNode(subCategory, subCategoryNodes));
+    }
+  }
+  if (parentCategory.scripts && parentCategory.scripts.length > 0) {
+    for (const script of parentCategory.scripts) {
+      nodes.push(convertScriptToNode(script, selection));
+    }
+  }
+  return nodes;
+}
+
+function convertCategoryToNode(
+  category: ICategory, children: readonly INode[]): INode {
+  return {
+    id: `${category.id}`,
+    text: category.name,
+    selected: false,
+    children,
+    documentationUrls: category.documentationUrls,
+  };
+}
+
+function convertScriptToNode(script: IScript, selection: IUserSelection): INode {
+  return {
+    id: `${script.id}`,
+    text: script.name,
+    selected: selection.isSelected(script),
+    children: undefined,
+    documentationUrls: script.documentationUrls,
+  };
+}
diff --git a/src/presentation/Scripts/Cards/CardListItemScripts.vue b/src/presentation/Scripts/ScriptsTree/ScriptsTree.vue
similarity index 54%
rename from src/presentation/Scripts/Cards/CardListItemScripts.vue
rename to src/presentation/Scripts/ScriptsTree/ScriptsTree.vue
index f1f3fb05..03e1db70 100644
--- a/src/presentation/Scripts/Cards/CardListItemScripts.vue
+++ b/src/presentation/Scripts/ScriptsTree/ScriptsTree.vue
@@ -1,5 +1,5 @@
 <template>
-    <span>
+    <span id="container">
         <span v-if="nodes != null && nodes.length > 0">
             <SelectableTree
               :nodes="nodes"
@@ -21,17 +21,17 @@
   import { IScript } from '@/domain/IScript';
   import { IApplicationState, IUserSelection } from '@/application/State/IApplicationState';
   import { IFilterMatches } from '@/application/State/Filter/IFilterMatches';
-  import { ScriptNodeParser } from './ScriptNodeParser';
-  import SelectableTree, { FilterPredicate } from './../SelectableTree/SelectableTree.vue';
-  import { INode } from './../SelectableTree/INode';
+  import { parseAllCategories, parseSingleCategory } from './ScriptNodeParser';
+  import SelectableTree, { FilterPredicate } from './SelectableTree/SelectableTree.vue';
+  import { INode } from './SelectableTree/INode';
 
   @Component({
     components: {
       SelectableTree,
     },
   })
-  export default class CardListItemScripts extends StatefulVue {
-    @Prop() public categoryId!: number;
+  export default class ScriptsTree extends StatefulVue {
+    @Prop() public categoryId?: number;
 
     public nodes?: INode[] = null;
     public selectedNodeIds?: string[] = null;
@@ -42,15 +42,17 @@
     public async mounted() {
       // React to state changes
       const state = await this.getCurrentStateAsync();
-      this.reactToChanges(state);
+      state.selection.changed.on(this.handleSelectionChanged);
+      state.filter.filterRemoved.on(this.handleFilterRemoved);
+      state.filter.filtered.on(this.handleFiltered);
       // Update initial state
-      await this.updateNodesAsync(this.categoryId);
+      await this.initializeNodesAsync(this.categoryId);
     }
 
     public async checkNodeAsync(node: INode) {
         if (node.children != null && node.children.length > 0) {
             return; // only interested in script nodes
-          }
+        }
         const state = await this.getCurrentStateAsync();
         if (node.selected) {
             state.selection.addSelectedScript(node.id);
@@ -60,40 +62,43 @@
     }
 
     @Watch('categoryId')
-    public async updateNodesAsync(categoryId: |number) {
-        this.nodes = categoryId ?
-          await ScriptNodeParser.parseNodes(categoryId, await this.getCurrentStateAsync())
-            : undefined;
+    public async initializeNodesAsync(categoryId?: number) {
+      const state = await this.getCurrentStateAsync();
+      if (categoryId) {
+        this.nodes = parseSingleCategory(categoryId, state);
+      } else {
+        this.nodes = parseAllCategories(state);
+      }
     }
 
     public filterPredicate(node: INode): boolean {
       return this.matches.scriptMatches.some((script: IScript) => script.id === node.id);
     }
 
-    private reactToChanges(state: IApplicationState) {
-      // Update selection data
-      const updateNodeSelection = (node: INode, selectedScripts: ReadonlyArray<IScript>): INode => {
-          return {
-            id: node.id,
-            text: node.text,
-            selected: selectedScripts.some((script) => script.id === node.id),
-            children: node.children ? node.children.map((child) => updateNodeSelection(child, selectedScripts)) : [],
-            documentationUrls: node.documentationUrls,
-          };
-      };
-      state.selection.changed.on(
-        (selectedScripts: ReadonlyArray<IScript>) =>
-          this.nodes = this.nodes.map((node: INode) => updateNodeSelection(node, selectedScripts)),
-          );
-      // Update search / filter data
-      state.filter.filterRemoved.on(() =>
-        this.filterText = '');
-      state.filter.filtered.on((matches: IFilterMatches) => {
-        this.filterText = matches.query;
-        this.matches = matches;
-      });
+    private handleSelectionChanged(selectedScripts: ReadonlyArray<IScript>) {
+      this.nodes = this.nodes.map((node: INode) => updateNodeSelection(node, selectedScripts));
+    }
+
+    private handleFilterRemoved() {
+      this.filterText = '';
+    }
+
+    private handleFiltered(matches: IFilterMatches) {
+      this.filterText = matches.query;
+      this.matches = matches;
     }
   }
+
+  function updateNodeSelection(node: INode, selectedScripts: ReadonlyArray<IScript>): INode {
+    return {
+      id: node.id,
+      text: node.text,
+      selected: selectedScripts.some((script) => script.id === node.id),
+      children: node.children ? node.children.map((child) => updateNodeSelection(child, selectedScripts)) : [],
+      documentationUrls: node.documentationUrls,
+      };
+  }
+
 </script>
 
 <style scoped lang="scss">
diff --git a/src/presentation/Scripts/SelectableTree/INode.ts b/src/presentation/Scripts/ScriptsTree/SelectableTree/INode.ts
similarity index 100%
rename from src/presentation/Scripts/SelectableTree/INode.ts
rename to src/presentation/Scripts/ScriptsTree/SelectableTree/INode.ts
diff --git a/src/presentation/Scripts/SelectableTree/Node.vue b/src/presentation/Scripts/ScriptsTree/SelectableTree/Node.vue
similarity index 100%
rename from src/presentation/Scripts/SelectableTree/Node.vue
rename to src/presentation/Scripts/ScriptsTree/SelectableTree/Node.vue
diff --git a/src/presentation/Scripts/SelectableTree/SelectableTree.vue b/src/presentation/Scripts/ScriptsTree/SelectableTree/SelectableTree.vue
similarity index 100%
rename from src/presentation/Scripts/SelectableTree/SelectableTree.vue
rename to src/presentation/Scripts/ScriptsTree/SelectableTree/SelectableTree.vue
diff --git a/src/presentation/Scripts/Selector/TheSelector.vue b/src/presentation/Scripts/Selector/TheSelector.vue
index 53d9e2ab..e43c94ac 100644
--- a/src/presentation/Scripts/Selector/TheSelector.vue
+++ b/src/presentation/Scripts/Selector/TheSelector.vue
@@ -2,25 +2,27 @@
     <div class="container">
         <div class="part select">Select:</div>
         <div class="part">
-            <SelectableOption
-                label="None"
-                :enabled="isNoneSelected"
-                @click="selectNoneAsync()">
-            </SelectableOption>
-        </div>
-        <div class="part"> | </div>
-        <div class="part">
-            <SelectableOption
-                label="Recommended"
-                :enabled="isRecommendedSelected"
-                @click="selectRecommendedAsync()" />
-        </div>
-        <div class="part"> | </div>
-       <div class="part">
-            <SelectableOption
-            label="All"
-            :enabled="isAllSelected"
-            @click="selectAllAsync()" />
+            <div class="part">
+                <SelectableOption
+                    label="None"
+                    :enabled="isNoneSelected"
+                    @click="selectNoneAsync()">
+                </SelectableOption>
+            </div>
+            <div class="part"> | </div>
+            <div class="part">
+                <SelectableOption
+                    label="Recommended"
+                    :enabled="isRecommendedSelected"
+                    @click="selectRecommendedAsync()" />
+                </div>
+            <div class="part"> | </div>
+            <div class="part">
+                    <SelectableOption
+                    label="All"
+                    :enabled="isAllSelected"
+                    @click="selectAllAsync()" />
+            </div>
         </div>
     </div>
 </template>
@@ -94,7 +96,6 @@ export default class TheSelector extends StatefulVue {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    align-items:flex-start;
     .part {
         display: flex;
         margin-right:5px;
diff --git a/src/presentation/Scripts/TheGrouper.vue b/src/presentation/Scripts/TheGrouper.vue
deleted file mode 100644
index 5cb84837..00000000
--- a/src/presentation/Scripts/TheGrouper.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-    <div class="container">
-        Group by: <span 
-        v-bind:class="{ 'disabled': isGrouped, 'enabled': !isGrouped}"
-            @click="changeGrouping()" >Cards</Span> |
-        <span class="action"
-            v-bind:class="{ 'disabled': !isGrouped, 'enabled': isGrouped}"
-            @click="changeGrouping()">None</span>
-    </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import { StatefulVue } from '@/presentation/StatefulVue';
-import { IApplicationState } from '@/application/State/IApplicationState';
-
-@Component
-export default class TheGrouper extends StatefulVue {
-    public isGrouped = true;
-
-    public changeGrouping() {
-        this.isGrouped = !this.isGrouped;
-    }
-
-}
-</script>
-
-<style scoped lang="scss">
-@import "@/presentation/styles/colors.scss";
-@import "@/presentation/styles/fonts.scss";
-
-.container {
-    // text-align:left;
-    font:$normal-font;
-
-}
-.enabled {
-    cursor: pointer;
-    &:hover {
-        font-weight:bold;
-        text-decoration:underline;
-    }
-}
-.disabled {
-    color:$gray;
-}
-
-</style>
diff --git a/src/presentation/Scripts/TheScripts.vue b/src/presentation/Scripts/TheScripts.vue
new file mode 100644
index 00000000..13e7b770
--- /dev/null
+++ b/src/presentation/Scripts/TheScripts.vue
@@ -0,0 +1,67 @@
+<template>
+    <div>
+        <div class="help-container">
+            <TheSelector class="left" />
+            <TheGrouper class="right"
+                v-on:groupingChanged="onGroupingChanged($event)" />
+        </div>
+        <CardList v-if="showCards" />
+        <ScriptsTree v-if="showList" />
+    </div>
+</template>
+
+<script lang="ts">
+    import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
+    import { Category } from '@/domain/Category';
+    import { StatefulVue } from '@/presentation/StatefulVue';
+    import TheGrouper from '@/presentation/Scripts/Grouping/TheGrouper.vue';
+    import TheSelector from '@/presentation/Scripts/Selector/TheSelector.vue';
+    import ScriptsTree from '@/presentation/Scripts/ScriptsTree/ScriptsTree.vue';
+    import CardList from '@/presentation/Scripts/Cards/CardList.vue';
+    import { Grouping } from './Grouping/Grouping';
+
+    /** Shows content of single category or many categories */
+    @Component({
+    components: {
+        TheGrouper,
+        TheSelector,
+        ScriptsTree,
+        CardList,
+    },
+    })
+    export default class TheScripts extends StatefulVue {
+        public showCards = true;
+        public showList = false;
+
+        @Prop() public data!: Category | Category[];
+
+        public onGroupingChanged(group: Grouping) {
+            switch (group) {
+                case Grouping.Cards:
+                    this.showCards = true;
+                    this.showList = false;
+                    break;
+                case Grouping.None:
+                    this.showCards = false;
+                    this.showList = true;
+                    break;
+                default:
+                    throw new Error('Unknown grouping');
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+.help-container {
+  display: flex;
+  justify-content: space-between;
+
+  .left {
+      justify-content: flex-start;
+  }
+  .right {
+      justify-content: flex-end;
+  }
+}
+</style>
diff --git a/src/presentation/styles/tree.scss b/src/presentation/styles/tree.scss
index cfa54ae2..d8c16858 100644
--- a/src/presentation/styles/tree.scss
+++ b/src/presentation/styles/tree.scss
@@ -1,8 +1,15 @@
 // Overrides base styling for LiquorTree
 @import "@/presentation/styles/colors.scss";
 
+.tree {
+    background-color: $slate;
+}
+
 .tree-node > .tree-content > .tree-anchor > span {
     color: $white !important;
+    text-transform: uppercase;
+    color: $light-gray;
+    font-size: 1.5em;
 }
 
 .tree-node {