Increase universe selection cap (#159)

* demo version

* complement to filter selection

* dropdown menu for filters

* consistent color scheme throughout layers

* removes unused code

* Update globalStore.ts

* serialize method to filter for export

* linting

* filters to activefilters in treeline

* import plus icon

* adds useradded to filter

* Adds path to venn tooltip

* Adds add button to search bar and adding filters from calling store

* adds delete button to user added filters

* linting

* removes invalid comma in filter parsing

* Formatting

* PR feedback

* Moves Layer Selection to Venn

* Adjust search bar visually

* Selection List Vue Component

* Implements selection in TreeLine

* Implements selection for Venn

* Update TreeLine.ts

* Delete unused comment

* increase cap

observatory/src/components/controls/UniverseSelectionList.vue

@@ -2,7 +2,7 @@
 import { useGlobalStore } from '../../ts/stores/globalStore'
 import ToggleSwitch from './ToggleSwitch.vue'
 
-const MAX_OBSERVABLE_UNIVERSES = 2
+const MAX_OBSERVABLE_UNIVERSES = 5
 
 const store = useGlobalStore()
 

observatory/src/ts/Visualizations/VennSets.ts

@@ -71,10 +71,6 @@ export class VennSets implements MultiverseVisualization {
     }
 
     public toggleSelection(event: any, node: Node, selection: Set<string>): void {
-        // as our selection is the toRaw variant of what's in store,
-        // the responding vue won't get an update that selection has changed
-        // which is perfect for us. contrary to higlighting, we aren't changing multiple
-        // nodes, but one at a time. and therefore only need to change the style of one
         if (selection.has(node.identifier)) {
             selection.delete(node.identifier)
         } else {
@@ -208,7 +204,10 @@ export class VennSets implements MultiverseVisualization {
             [...groups.entries()]
                 .map((group: Array<unknown>) => group[0] as string)
                 .sort()
-                .map((group: string, index: number) => [group, this.colorScheme[index]])
+                .map((group: string, index: number) => [
+                    group,
+                    this.colorScheme[index % this.colorScheme.length]
+                ])
         )
 
         this.nodeHierarchy = d3