/* eslint-env browser */

import { querySelectorAll } from '../graph';

export let selectedProject;

/**
 * Listens for mouse clicks on the project list and sets the selectedProject variable to that project's ID. It returns
 * a promise that signals that the project has been selected.
 *
 * @returns {Promise} signals that that the project has been selected
 */
export function buildProjectAnchors () {
  return new Promise((resolve) => {
    querySelectorAll('#projects a').forEach(projectAnchor => {
      projectAnchor.addEventListener('click', event => {
        selectedProject = event.target.getAttribute('data-id');
        resolve();
      });
    });
  });
}

@@ -30,43 +30,75 @@
 ort 
-%7B querySelectorAll %7D from '../graph
+* as graph from '../graph';%0Aimport * as hierarchy from './hierarchy
 ';%0A%0A
@@ -435,46 +435,16 @@
 %7B%0A  
-return new Promise((resolve) =%3E %7B%0A    
+  graph.
 quer
@@ -551,24 +551,61 @@
  event =%3E %7B%0A
+        new Promise((resolve) =%3E %7B%0A  
         sele
@@ -668,19 +668,799 @@
     
-resolve();%0A
+// Fetch both the hierarchy and graph payload and then return the promise with the payloads when both async%0A        // calls are fulfilled%0A        document.body.style.cursor = 'wait';%0A        let requests = %5Bhierarchy.getHierarchy(selectedProject), graph.getGraph(selectedProject)%5D;%0A        resolve(Promise.all(requests));%0A      %7D).then(payloads =%3E %7B%0A          // Render the hierarchy display and add click handlers and store the project graph JSON%0A          let hierarchyPayload = payloads%5B0%5D;%0A          graph.graphData = payloads%5B1%5D;%0A          hierarchy.renderHierarchy(hierarchyPayload);%0A          hierarchy.buildItemHierarchyAnchors();%0A          graph.toggle(graph.projectsContainer);%0A          graph.toggle(graph.hierarchyContainer);%0A          document.body.style.cursor = 'default';%0A  
     
@@ -1477,12 +1477,11 @@
 %7D);%0A  %7D)
-;
 %0A%7D%0A

move anchor logic to project.js