From dc23f2880cd10868038f0d23eadd6b244b4d0c39 Mon Sep 17 00:00:00 2001
From: Andrew Sunada <asunada@mozilla.com>
Date: Wed, 24 Jul 2019 14:45:29 -0700
Subject: [PATCH 1/6] fix(dino-park): reorganizing loading order

---
 src/pages/PageOrgchart.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/pages/PageOrgchart.vue b/src/pages/PageOrgchart.vue
index b5176e283..eda3ad73d 100644
--- a/src/pages/PageOrgchart.vue
+++ b/src/pages/PageOrgchart.vue
@@ -31,7 +31,9 @@
       </button>
     </div>
     <div class="org-chart">
-      <div class="org-chart__chart"><LoadingSpinner></LoadingSpinner></div>
+      <div class="org-chart__chart">
+        <LoadingSpinner></LoadingSpinner>
+      </div>
       <ApolloQuery
         v-if="username && (desktopView || openedFromOrgNode)"
         :query="previewProfileQuery"
@@ -199,8 +201,8 @@ export default {
   async created() {
     window.addEventListener('resize', this.updateView);
     this.updateView();
-    await this.fetchData();
-    await this.highlight();
+    this.highlight();
+    this.fetchData();
   },
   computed: {
     username() {

From 03c89f5867a4faaeaee498e7320092d292715034 Mon Sep 17 00:00:00 2001
From: Andrew Sunada <asunada@mozilla.com>
Date: Mon, 29 Jul 2019 16:17:45 -0700
Subject: [PATCH 2/6] feat(dino-park): adjusting org chart loading

---
 src/components/ui/UserPicture.vue | 18 ++++++--------
 src/pages/PageOrgchart.vue        | 40 ++++++++++++++++++++++++++-----
 2 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/src/components/ui/UserPicture.vue b/src/components/ui/UserPicture.vue
index ef1992af7..e095e0df7 100644
--- a/src/components/ui/UserPicture.vue
+++ b/src/components/ui/UserPicture.vue
@@ -1,15 +1,11 @@
 <template>
-  <div :class="'user-picture' + (modifier ? ' ' + modifier : '')">
-    <img
-      v-if="src"
-      ref="img"
-      :class="cls"
-      :src="src"
-      alt=""
-      :width="size"
-      role="presentation"
-      aria-hidden="true"
-    />
+  <div
+    :class="['user-picture', modifier ? ' ' + modifier : '', cls]"
+    v-bind:style="{
+      backgroundImage: `url(${src})`,
+      backgroundSize: `${size}px`,
+    }"
+  >
     <DinoType v-if="isStaff" :size="dinoTypeSize" />
   </div>
 </template>
diff --git a/src/pages/PageOrgchart.vue b/src/pages/PageOrgchart.vue
index eda3ad73d..32ac0e955 100644
--- a/src/pages/PageOrgchart.vue
+++ b/src/pages/PageOrgchart.vue
@@ -196,13 +196,14 @@ export default {
       desktopView: false,
       dirty: false,
       rawJson: null,
+      chartForHighlightClicked: false,
     };
   },
   async created() {
     window.addEventListener('resize', this.updateView);
     this.updateView();
-    this.highlight();
-    this.fetchData();
+    await this.fetchData();
+    await this.highlight();
   },
   computed: {
     username() {
@@ -262,7 +263,7 @@ export default {
 
         orgChartRoot.addEventListener('click', (event) => {
           const li = event.target.closest('li');
-
+          this.chartForHighlightClicked = true;
           if (event.target.closest('button')) {
             this.toggle(li);
             this.saveOrgTree();
@@ -384,9 +385,36 @@ export default {
       });
     },
     expandAll() {
-      Object.entries(this.expandables).forEach(([, li]) => {
-        this.toggle(li, true);
-      });
+      const entries = Object.entries(this.expandables);
+      const loadSet = (idx, num) => {
+        entries.slice(idx, idx + num).forEach(([, li]) => {
+          this.toggle(li, true);
+        });
+      };
+      let step = 25,
+        i = 0,
+        intervalTime = 1000;
+      let inter = setInterval(() => {
+        const run = () => {
+          if (i < entries.length) {
+            loadSet(i, step);
+            i += step;
+            if (i + step > entries.length) {
+              step = entries.length - i;
+            }
+          } else {
+            clearInterval(inter);
+          }
+        };
+        if (this.chartForHighlightClicked) {
+          setTimeout(() => {
+            run();
+            this.chartForHighlightClicked = false;
+          });
+        } else {
+          run();
+        }
+      }, intervalTime);
       this.saveOrgTree();
     },
     collapseAll() {

From 15844ea7bcecbfd19a045bfa8e16e0f9b85b5cb4 Mon Sep 17 00:00:00 2001
From: Andrew Sunada <asunada@mozilla.com>
Date: Mon, 12 Aug 2019 16:34:02 -0700
Subject: [PATCH 3/6] feat(IAM-158): setting up page to load 1 image at a time
 to maintain interactivability

---
 src/assets/images/empty_profile.png       | Bin 0 -> 3218 bytes
 src/assets/js/image-collection-handler.js |  88 ++++++++++++++++
 src/pages/PageOrgchart.vue                | 121 +++++++++++++---------
 3 files changed, 161 insertions(+), 48 deletions(-)
 create mode 100644 src/assets/images/empty_profile.png
 create mode 100644 src/assets/js/image-collection-handler.js

diff --git a/src/assets/images/empty_profile.png b/src/assets/images/empty_profile.png
new file mode 100644
index 0000000000000000000000000000000000000000..8baf9029aaba828224ae17c99d7fb5ef879c02c0
GIT binary patch
literal 3218
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
YH$quoe(~4k-mipY#!C9>#Em=t3&}wyKmY&$

literal 0
HcmV?d00001

diff --git a/src/assets/js/image-collection-handler.js b/src/assets/js/image-collection-handler.js
new file mode 100644
index 000000000..2a016f4cd
--- /dev/null
+++ b/src/assets/js/image-collection-handler.js
@@ -0,0 +1,88 @@
+import generateIdenticon from '@/assets/js/identicon-avatar';
+
+export default class ImageCollectionHandler {
+  constructor(options) {
+    this.images = [];
+    this.loadedIds = [];
+    this.nodesToLoad = [];
+    this.interrupted = false;
+    this.onImageLoaded =
+      'onImageLoaded' in options ? options.onImageLoaded : (key, image) => {};
+  }
+  loadImagesFromNodes(nodes) {
+    return new Promise((res, rej) => {
+      this.nodesToLoad = nodes.slice(0);
+      const loadNextNode = () => {
+        const self = this;
+        if (this.nodesToLoad.length === 0) {
+          res(this.images);
+          return;
+        }
+        const poppedNode = this.nodesToLoad.shift();
+        if (this.loadedIds.includes(poppedNode.username)) {
+          console.log('Already loaded: ', poppedNode.username);
+          loadNextNode();
+          return;
+        }
+        let { picture, username } = poppedNode;
+        let url = null;
+        let img = null;
+        if (
+          picture === null ||
+          picture === '' ||
+          picture === 'default:' ||
+          picture.startsWith('https://s3.amazonaws.com/')
+        ) {
+          img = new Image();
+          generateIdenticon(username, 40).then((src) => {
+            url = src;
+            img.src = url;
+          });
+        } else {
+          img = new Image();
+          url = `${picture}?size=40`;
+          img.src = url;
+        }
+
+        img.onload = function() {
+          self.images.unshift(img);
+          self.loadedIds.unshift(poppedNode.username);
+          self.onImageLoaded(poppedNode.username, this);
+          if (self.interrupted) {
+            if (Array.isArray(self.interrupted)) {
+              self.nodesToLoad = self.interrupted.concat(self.nodesToLoad);
+            } else {
+              self.nodesToLoad.push(self.interrupted);
+            }
+            self.interrupted = false;
+            loadNextNode();
+          } else {
+            loadNextNode();
+          }
+        };
+        img.onerror = function() {
+          loadNextNode();
+          console.log("Couldn't load: ", url);
+        };
+      };
+      loadNextNode();
+    });
+  }
+  interruptImagesWithNode(id) {
+    for (let i = 0, len = this.nodesToLoad.length; i < len; i++) {
+      if (this.nodesToLoad[i].username === id) {
+        this.interrupted = this.nodesToLoad[i];
+        break;
+      }
+    }
+  }
+  interruptImagesWithNodeList(ids) {
+    const interruptedSet = [];
+    for (let i = 0, len = this.nodesToLoad.length; i < len; i++) {
+      if (ids.includes(this.nodesToLoad[i].username)) {
+        interruptedSet.push(this.nodesToLoad[i]);
+      }
+    }
+    this.interrupted = interruptedSet;
+  }
+}
diff --git a/src/pages/PageOrgchart.vue b/src/pages/PageOrgchart.vue
index 32ac0e955..db6861f84 100644
--- a/src/pages/PageOrgchart.vue
+++ b/src/pages/PageOrgchart.vue
@@ -1,6 +1,6 @@
 <template>
   <main class="org-chart-main">
-    <div class="org-chart-buttons" v-if="!loading">
+    <div class="org-chart-buttons" v-if="!loading && !imagesLoaded">
       <button
         type="button"
         @click="expandAll"
@@ -77,9 +77,10 @@ import Toggle from '@/components/ui/Toggle.vue';
 import { PREVIEW_PROFILE } from '@/queries/profile';
 import Fetcher from '@/assets/js/fetcher';
 import generateIdenticon from '@/assets/js/identicon-avatar';
+import ImageCollectionHandler from '@/assets/js/image-collection-handler';
 
 const fetcher = new Fetcher({ failoverOn: [302] });
-
+let context = null;
 function renderNode(node, level = 1) {
   const e = document.createElement('div');
   const hasChildren = node.children.length > 0;
@@ -135,20 +136,10 @@ function renderNode(node, level = 1) {
   li.id = username;
   e.querySelector('a').href = `/o/${username}`;
   const img = e.querySelector('.user-picture');
-  if (
-    picture === null ||
-    picture === '' ||
-    picture === 'default:' ||
-    picture.startsWith('https://s3.amazonaws.com/')
-  ) {
-    generateIdenticon(username, 40).then((src) => {
-      img.style.backgroundSize = 'cover';
-      img.style.backgroundImage = `url("${src}")`;
-    });
-  } else {
-    img.style.backgroundSize = 'cover';
-    img.style.backgroundImage = `url("${picture}?size=40")`;
-  }
+  const innerImg = new Image();
+  innerImg.src = '/img/empty_profile.png';
+  innerImg.className = 'profile_image';
+  img.appendChild(innerImg);
   e.querySelector(
     '.org-node__name',
   ).textContent = `${node.data.firstName} ${node.data.lastName}`;
@@ -197,6 +188,9 @@ export default {
       dirty: false,
       rawJson: null,
       chartForHighlightClicked: false,
+      images: {},
+      imagePromises: [],
+      imagesLoaded: false,
     };
   },
   async created() {
@@ -224,9 +218,33 @@ export default {
     },
   },
   methods: {
+    loadNodes(nodes) {
+      const collection = new ImageCollectionHandler();
+      collection.loadImagesFromNodes(nodes);
+      return collection;
+    },
     async fetchData() {
       this.loading = true;
       try {
+        const collection = new ImageCollectionHandler({
+          onImageLoaded: (key, image) => {
+            const el = document.getElementById(key);
+            const selectedImage = el.querySelector('.profile_image');
+            if (!selectedImage) {
+              console.log("Couldn't find key: ", key);
+            } else {
+              selectedImage.parentNode.replaceChild(image, selectedImage);
+            }
+          },
+        });
+        const printData = (pData) => {
+          const link = document.createElement('link');
+          link.href = pData.data.picture + '?size=40';
+          document.getElementById('app').appendChild(link);
+          for (let i = 0, len = pData.children.length; i < len; i++) {
+            printData(pData.children[i]);
+          }
+        };
         const data = await fetcher.fetch('/api/v4/orgchart');
         const orgchart = await data.json();
         this.initiallyExpanded = orgchart.forrest
@@ -236,11 +254,32 @@ export default {
             return obj;
           }, {});
         const orgChartRoot = document.querySelector('.org-chart__chart');
+
         let chartFromStore = Boolean(this.$store.state.org);
         this.rawJson = JSON.stringify(orgchart);
         if (chartFromStore && this.rawJson !== this.$store.state.org.rawJson) {
           chartFromStore = false;
         }
+        let initialNodes = [];
+        let initialIds = [];
+        const nodes = [];
+        const initialExpandableKeys = Object.keys(this.initiallyExpanded);
+        const gatherChildren = (currentStack) => {
+          let nextStack = [];
+          for (let i = 0, len = currentStack.length; i < len; i++) {
+            nodes.push(currentStack[i].data);
+            if (currentStack[i].children.length > 0) {
+              nextStack = nextStack.concat(currentStack[i].children);
+            }
+          }
+          if (nextStack.length > 0) {
+            gatherChildren(nextStack);
+          }
+        };
+        gatherChildren(orgchart.forrest);
+        const loadedInitialImages = collection.loadImagesFromNodes(
+          initialNodes,
+        );
         const [f, t] = chartFromStore
           ? this.$store.state.org.nodes
           : renderOrgchart(orgchart);
@@ -261,15 +300,26 @@ export default {
           this.expandFirst();
         }
 
+        const loadedFinalImages = collection.loadImagesFromNodes(nodes);
+
         orgChartRoot.addEventListener('click', (event) => {
           const li = event.target.closest('li');
+
           this.chartForHighlightClicked = true;
           if (event.target.closest('button')) {
             this.toggle(li);
             this.saveOrgTree();
-            return;
+            let selectedUl = li.querySelector('ul');
+            if (selectedUl) {
+              collection.interruptImagesWithNodeList(
+                [...selectedUl.childNodes].map((node) =>
+                  node.getAttribute('id'),
+                ),
+              );
+            }
+          } else {
+            collection.interruptImagesWithNode(li.getAttribute('id'));
           }
-
           const anchor = event.target.closest('a');
           if (anchor) {
             this.$router.push({
@@ -282,6 +332,7 @@ export default {
             event.preventDefault();
           }
         });
+        this.loading = false;
       } catch (e) {
         if (e instanceof TypeError && e.message.startsWith('NetworkError')) {
           window.location.reload();
@@ -385,36 +436,9 @@ export default {
       });
     },
     expandAll() {
-      const entries = Object.entries(this.expandables);
-      const loadSet = (idx, num) => {
-        entries.slice(idx, idx + num).forEach(([, li]) => {
-          this.toggle(li, true);
-        });
-      };
-      let step = 25,
-        i = 0,
-        intervalTime = 1000;
-      let inter = setInterval(() => {
-        const run = () => {
-          if (i < entries.length) {
-            loadSet(i, step);
-            i += step;
-            if (i + step > entries.length) {
-              step = entries.length - i;
-            }
-          } else {
-            clearInterval(inter);
-          }
-        };
-        if (this.chartForHighlightClicked) {
-          setTimeout(() => {
-            run();
-            this.chartForHighlightClicked = false;
-          });
-        } else {
-          run();
-        }
-      }, intervalTime);
+      Object.entries(this.expandables).forEach(([, li]) => {
+        this.toggle(li, true);
+      });
       this.saveOrgTree();
     },
     collapseAll() {
@@ -447,6 +471,7 @@ export default {
     },
   },
   mounted() {
+    context = this;
     document.getElementById('search-query').focus();
   },
 };

From 31299d559e64a7139b6addf05d6122bcffb4a0a7 Mon Sep 17 00:00:00 2001
From: Andrew Sunada <asunada@mozilla.com>
Date: Wed, 14 Aug 2019 14:27:52 -0700
Subject: [PATCH 4/6] feat(IAM-158): loading initial images immediately, while
 delaying non initial images

---
 src/assets/js/image-collection-handler.js |   1 -
 src/pages/PageOrgchart.vue                | 365 ++++++++++++----------
 2 files changed, 203 insertions(+), 163 deletions(-)

diff --git a/src/assets/js/image-collection-handler.js b/src/assets/js/image-collection-handler.js
index 2a016f4cd..1377a1d81 100644
--- a/src/assets/js/image-collection-handler.js
+++ b/src/assets/js/image-collection-handler.js
@@ -20,7 +20,6 @@ export default class ImageCollectionHandler {
         }
         const poppedNode = this.nodesToLoad.shift();
         if (this.loadedIds.includes(poppedNode.username)) {
-          console.log('Already loaded: ', poppedNode.username);
           loadNextNode();
           return;
         }
diff --git a/src/pages/PageOrgchart.vue b/src/pages/PageOrgchart.vue
index db6861f84..d772f4499 100644
--- a/src/pages/PageOrgchart.vue
+++ b/src/pages/PageOrgchart.vue
@@ -79,9 +79,16 @@ import Fetcher from '@/assets/js/fetcher';
 import generateIdenticon from '@/assets/js/identicon-avatar';
 import ImageCollectionHandler from '@/assets/js/image-collection-handler';
 
+const blankProfile = require('@/assets/images/empty_profile.png');
 const fetcher = new Fetcher({ failoverOn: [302] });
 let context = null;
-function renderNode(node, level = 1) {
+function renderNode(
+  node,
+  level = 1,
+  initiallyExpanded = {},
+  traceIndices = [],
+  renderImage = false,
+) {
   const e = document.createElement('div');
   const hasChildren = node.children.length > 0;
   e.innerHTML = `
@@ -98,12 +105,20 @@ function renderNode(node, level = 1) {
         <span class="org-node__name"></span>
         <span class="org-node__title"></span>
       </a>
-
+    
         ${
           hasChildren
             ? `
-              <div class="org-node__expander">
-                <button type="button" aria-expanded="true" class="org-node__expander-button org-node__toggle">
+              <div class="org-node__expander${
+                node.data.username in initiallyExpanded ? ' ' : ''
+              }">
+                <button type="button" aria-expanded="${
+                  node.data.username in initiallyExpanded ? true : false
+                }" aria-label="${
+                node.data.username in initiallyExpanded
+                  ? 'Expanded'
+                  : 'Collapsed'
+              }" class="org-node__expander-button org-node__toggle">
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" role="presentation" focusable="false"><polyline points="6 9 12 15 18 9"></polyline></svg>
                 </button>
                 <div tabindex="-1" class="org-node__expander-overflow"><ul></ul></div>
@@ -136,30 +151,84 @@ function renderNode(node, level = 1) {
   li.id = username;
   e.querySelector('a').href = `/o/${username}`;
   const img = e.querySelector('.user-picture');
-  const innerImg = new Image();
-  innerImg.src = '/img/empty_profile.png';
-  innerImg.className = 'profile_image';
-  img.appendChild(innerImg);
+  if (renderImage) {
+    if (
+      picture === null ||
+      picture === '' ||
+      picture === 'default:' ||
+      picture.startsWith('https://s3.amazonaws.com/')
+    ) {
+      generateIdenticon(username, 40).then((src) => {
+        img.style.backgroundSize = 'cover';
+        img.style.backgroundImage = `url("${src}")`;
+      });
+    } else {
+      img.style.backgroundSize = 'cover';
+      img.style.backgroundImage = `url("${picture}?size=40")`;
+    }
+  } else {
+    const innerImg = new Image();
+    innerImg.src = blankProfile;
+    innerImg.className = 'profile_image';
+    img.appendChild(innerImg);
+  }
+
   e.querySelector(
     '.org-node__name',
   ).textContent = `${node.data.firstName} ${node.data.lastName}`;
   e.querySelector('.org-node__title').textContent = node.data.title;
   const ul = e.querySelector('ul');
+  const button = e.querySelector('button');
   if (ul) {
-    node.children.forEach((child) =>
-      ul.appendChild(renderNode(child, level + 1)),
+    ul.style.display = !(node.data.username in initiallyExpanded)
+      ? 'none'
+      : 'inline-block';
+    button.style.transform = !(node.data.username in initiallyExpanded)
+      ? 'rotateZ(-90deg)'
+      : '';
+    node.children.forEach((child, idx) =>
+      ul.appendChild(
+        renderNode(
+          child,
+          level + 1,
+          idx === parseInt(toExpand)
+            ? {
+                ...initiallyExpanded,
+                [child.data.username]: true,
+              }
+            : initiallyExpanded,
+          idx === toExpand ? traceIndices : [],
+          !Number.isNaN(parseInt(toExpand)) ||
+            child.data.username in initiallyExpanded ||
+            node.data.username in initiallyExpanded,
+        ),
+      ),
     );
   }
   return li;
 }
 
-function renderOrgchart(orgchart) {
+function renderOrgchart(orgchart, initiallyExpanded, traceIndices) {
   const forrest = document.createElement('div');
   forrest.className = 'org-root org-root--forrest';
   const forrestInner = document.createElement('ul');
+  const toExpand = traceIndices.shift();
   forrest.appendChild(forrestInner);
-  orgchart.forrest.forEach((root) =>
-    forrestInner.appendChild(renderNode(root)),
+  orgchart.forrest.forEach((root, idx) =>
+    forrestInner.appendChild(
+      renderNode(
+        root,
+        1,
+        idx === toExpand
+          ? {
+              ...initiallyExpanded,
+              [root.data.username]: true,
+            }
+          : initiallyExpanded,
+        idx === toExpand ? traceIndices : [],
+        root.data.username in initiallyExpanded,
+      ),
+    ),
   );
   const loose = document.createElement('div');
   loose.className = 'org-root org-root--loose';
@@ -167,7 +236,11 @@ function renderOrgchart(orgchart) {
     '<h2 class="org-root__heading">People who do not have a manager set</h2>';
   const looseInner = document.createElement('ul');
   loose.appendChild(looseInner);
-  orgchart.loose.forEach((root) => looseInner.appendChild(renderNode(root)));
+  orgchart.loose.forEach((root, idx) =>
+    looseInner.appendChild(
+      renderNode(root, 1, initiallyExpanded, traceIndices, true),
+    ),
+  );
   return [forrest, loose];
 }
 
@@ -191,13 +264,23 @@ export default {
       images: {},
       imagePromises: [],
       imagesLoaded: false,
+      collection: new ImageCollectionHandler({
+        onImageLoaded: (key, image) => {
+          const el = document.getElementById(key);
+          const selectedImage = el.querySelector('.profile_image');
+          if (!selectedImage) {
+            console.log("Couldn't find key: ", key);
+          } else {
+            selectedImage.parentNode.replaceChild(image, selectedImage);
+          }
+        },
+      }),
     };
   },
   async created() {
     window.addEventListener('resize', this.updateView);
     this.updateView();
     await this.fetchData();
-    await this.highlight();
   },
   computed: {
     username() {
@@ -218,170 +301,128 @@ export default {
     },
   },
   methods: {
-    loadNodes(nodes) {
-      const collection = new ImageCollectionHandler();
-      collection.loadImagesFromNodes(nodes);
-      return collection;
-    },
     async fetchData() {
+      const { username } = this.$route.params;
       this.loading = true;
+      const printData = (pData) => {
+        const link = document.createElement('link');
+        link.href = pData.data.picture + '?size=40';
+        document.getElementById('app').appendChild(link);
+        for (let i = 0, len = pData.children.length; i < len; i++) {
+          printData(pData.children[i]);
+        }
+      };
+      let orgchart = null;
+      let trace = '';
       try {
-        const collection = new ImageCollectionHandler({
-          onImageLoaded: (key, image) => {
-            const el = document.getElementById(key);
-            const selectedImage = el.querySelector('.profile_image');
-            if (!selectedImage) {
-              console.log("Couldn't find key: ", key);
-            } else {
-              selectedImage.parentNode.replaceChild(image, selectedImage);
-            }
-          },
-        });
-        const printData = (pData) => {
-          const link = document.createElement('link');
-          link.href = pData.data.picture + '?size=40';
-          document.getElementById('app').appendChild(link);
-          for (let i = 0, len = pData.children.length; i < len; i++) {
-            printData(pData.children[i]);
-          }
-        };
         const data = await fetcher.fetch('/api/v4/orgchart');
-        const orgchart = await data.json();
-        this.initiallyExpanded = orgchart.forrest
-          .map((node) => node.data.username)
-          .reduce((obj, key) => {
-            obj[key] = true;
-            return obj;
-          }, {});
-        const orgChartRoot = document.querySelector('.org-chart__chart');
-
-        let chartFromStore = Boolean(this.$store.state.org);
-        this.rawJson = JSON.stringify(orgchart);
-        if (chartFromStore && this.rawJson !== this.$store.state.org.rawJson) {
-          chartFromStore = false;
+        orgchart = await data.json();
+      } catch (e) {
+        if (e instanceof TypeError && e.message.startsWith('NetworkError')) {
+          window.location.reload();
+          return;
         }
-        let initialNodes = [];
-        let initialIds = [];
-        const nodes = [];
-        const initialExpandableKeys = Object.keys(this.initiallyExpanded);
-        const gatherChildren = (currentStack) => {
-          let nextStack = [];
-          for (let i = 0, len = currentStack.length; i < len; i++) {
-            nodes.push(currentStack[i].data);
-            if (currentStack[i].children.length > 0) {
-              nextStack = nextStack.concat(currentStack[i].children);
-            }
-          }
-          if (nextStack.length > 0) {
-            gatherChildren(nextStack);
-          }
-        };
-        gatherChildren(orgchart.forrest);
-        const loadedInitialImages = collection.loadImagesFromNodes(
-          initialNodes,
-        );
-        const [f, t] = chartFromStore
-          ? this.$store.state.org.nodes
-          : renderOrgchart(orgchart);
-        this.dirty = chartFromStore ? this.$store.state.org.dirty : false;
-        orgChartRoot.innerHTML = '';
-        orgChartRoot.appendChild(f);
-        orgChartRoot.appendChild(t);
-        this.updateCurrentNode();
+        console.error('OrgChart error: ', e);
+      }
+      if (username && this.$route.name === 'OrgchartHighlight') {
+        try {
+          const data = await fetcher.fetch(
+            `/api/v4/orgchart/trace/${encodeURIComponent(username)}`,
+          );
+          const traceJSON = await data.json();
 
-        this.expandables = Array.from(
-          orgChartRoot.querySelectorAll('.org-node--expandable'),
-        ).reduce((obj, li) => {
-          obj[li.id] = li;
+          trace = traceJSON.trace;
+          console.log('Found trace: ', trace);
+        } catch (e) {
+          if (e instanceof TypeError && e.message.startsWith('NetworkError')) {
+            window.location.reload();
+            return;
+          }
+          console.error('Trace error: ', e);
+        }
+      }
+      const isLoose = trace && trace.startsWith('-1-');
+      const indices = (isLoose ? trace.substr(3) : trace)
+        .split('-')
+        .map(Number);
+      this.initiallyExpanded = orgchart.forrest
+        .map((node) => node.data.username)
+        .reduce((obj, key) => {
+          obj[key] = true;
           return obj;
         }, {});
+      const orgChartRoot = document.querySelector('.org-chart__chart');
 
-        if (!chartFromStore) {
-          this.expandFirst();
+      let chartFromStore = Boolean(this.$store.state.org);
+      this.rawJson = JSON.stringify(orgchart);
+      if (chartFromStore && this.rawJson !== this.$store.state.org.rawJson) {
+        chartFromStore = false;
+      }
+      let initialNodes = [];
+      let initialIds = [];
+      const nodes = [];
+      const initialExpandableKeys = Object.keys(this.initiallyExpanded);
+      const gatherChildren = (currentStack) => {
+        let nextStack = [];
+        for (let i = 0, len = currentStack.length; i < len; i++) {
+          nodes.push(currentStack[i].data);
+          if (currentStack[i].children.length > 0) {
+            nextStack = nextStack.concat(currentStack[i].children);
+          }
         }
+        if (nextStack.length > 0) {
+          gatherChildren(nextStack);
+        }
+      };
+      gatherChildren(orgchart.forrest);
+      const [f, t] = chartFromStore
+        ? this.$store.state.org.nodes
+        : renderOrgchart(orgchart, this.initiallyExpanded, indices);
+      this.dirty = chartFromStore ? this.$store.state.org.dirty : false;
+      orgChartRoot.innerHTML = '';
+      orgChartRoot.appendChild(f);
+      orgChartRoot.appendChild(t);
+      this.updateCurrentNode();
+      this.expandables = Array.from(
+        orgChartRoot.querySelectorAll('.org-node--expandable'),
+      ).reduce((obj, li) => {
+        obj[li.id] = li;
+        return obj;
+      }, {});
+      const loadedFinalImages = this.collection.loadImagesFromNodes(
+        nodes.filter((node) => !initialIds.includes(node.username)),
+      );
 
-        const loadedFinalImages = collection.loadImagesFromNodes(nodes);
-
-        orgChartRoot.addEventListener('click', (event) => {
-          const li = event.target.closest('li');
+      orgChartRoot.addEventListener('click', (event) => {
+        const li = event.target.closest('li');
 
-          this.chartForHighlightClicked = true;
-          if (event.target.closest('button')) {
-            this.toggle(li);
-            this.saveOrgTree();
-            let selectedUl = li.querySelector('ul');
-            if (selectedUl) {
-              collection.interruptImagesWithNodeList(
-                [...selectedUl.childNodes].map((node) =>
-                  node.getAttribute('id'),
-                ),
-              );
-            }
-          } else {
-            collection.interruptImagesWithNode(li.getAttribute('id'));
+        this.chartForHighlightClicked = true;
+        if (event.target.closest('button')) {
+          this.toggle(li);
+          this.saveOrgTree();
+          let selectedUl = li.querySelector('ul');
+          if (selectedUl) {
+            this.collection.interruptImagesWithNodeList(
+              [...selectedUl.childNodes].map((node) => node.getAttribute('id')),
+            );
           }
-          const anchor = event.target.closest('a');
-          if (anchor) {
-            this.$router.push({
-              name: 'Orgchart',
-              params: {
-                username: li.id,
-                openedFromOrgNode: true,
-              },
-            });
-            event.preventDefault();
-          }
-        });
-        this.loading = false;
-      } catch (e) {
-        if (e instanceof TypeError && e.message.startsWith('NetworkError')) {
-          window.location.reload();
-          return;
+        } else {
+          this.collection.interruptImagesWithNode(li.getAttribute('id'));
         }
-        console.error(e);
-      }
-      this.loading = false;
-    },
-    async highlight() {
-      const { username } = this.$route.params;
-      if (!(username && this.$route.name === 'OrgchartHighlight')) {
-        return;
-      }
-
-      try {
-        const data = await fetcher.fetch(
-          `/api/v4/orgchart/trace/${encodeURIComponent(username)}`,
-        );
-        const { trace } = await data.json();
-        const isLoose = trace && trace.startsWith('-1-');
-
-        const root = this.$el.querySelector(
-          `.org-root--${isLoose ? 'loose' : 'forrest'}`,
-        );
-        const indices = (isLoose ? trace.substr(3) : trace)
-          .split('-')
-          .map(Number);
-        const li = this.toggleTrace(root.firstElementChild, indices);
-        // assume browsers with `scrollBehavior` support scrollIntoView
-        // with object as arguments
-        const card = li.querySelector('a') || li;
-        if ('scrollBehavior' in document.documentElement.style) {
-          card.scrollIntoView({
-            block: 'center',
+        const anchor = event.target.closest('a');
+        if (anchor) {
+          this.$router.push({
+            name: 'Orgchart',
+            params: {
+              username: li.id,
+              openedFromOrgNode: true,
+            },
           });
-        } else {
-          // scrolls into view with element at bottom of viewport (block: 'end')
-          card.scrollIntoView(false);
+          event.preventDefault();
         }
+      });
 
-        this.saveOrgTree();
-      } catch (e) {
-        if (e instanceof TypeError && e.message.startsWith('NetworkError')) {
-          window.location.reload();
-          return;
-        }
-        console.error(e);
-      }
+      this.loading = false;
     },
     toggleTrace(ul, indices) {
       const index = indices.shift();

From 1f591fa219d1f95f25830770aa7bbbefd538a034 Mon Sep 17 00:00:00 2001
From: Andrew Sunada <asunada@mozilla.com>
Date: Wed, 14 Aug 2019 14:34:29 -0700
Subject: [PATCH 5/6] fix(IAM-158): fixing missing code from last commit

---
 src/pages/PageOrgchart.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/PageOrgchart.vue b/src/pages/PageOrgchart.vue
index d772f4499..51f6a424f 100644
--- a/src/pages/PageOrgchart.vue
+++ b/src/pages/PageOrgchart.vue
@@ -180,6 +180,7 @@ function renderNode(
   const ul = e.querySelector('ul');
   const button = e.querySelector('button');
   if (ul) {
+    const toExpand = traceIndices.shift();
     ul.style.display = !(node.data.username in initiallyExpanded)
       ? 'none'
       : 'inline-block';
@@ -488,6 +489,7 @@ export default {
       });
       this.saveOrgTree();
     },
+    // TODO: Consider removing
     expandFirst() {
       const ids = Object.keys(this.initiallyExpanded);
       Object.entries(this.expandables).forEach(([id, li]) => {

From 8545f0c19586e7d97e7de4f85f612698641c46cf Mon Sep 17 00:00:00 2001
From: Andrew Sunada <asunada@mozilla.com>
Date: Wed, 14 Aug 2019 14:40:19 -0700
Subject: [PATCH 6/6] fix(IAM-158): fixing logic so that final highlight
 doesn't get expanded

---
 src/pages/PageOrgchart.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/PageOrgchart.vue b/src/pages/PageOrgchart.vue
index 51f6a424f..f963b9024 100644
--- a/src/pages/PageOrgchart.vue
+++ b/src/pages/PageOrgchart.vue
@@ -192,7 +192,7 @@ function renderNode(
         renderNode(
           child,
           level + 1,
-          idx === parseInt(toExpand)
+          idx === parseInt(toExpand) && traceIndices.length > 0
             ? {
                 ...initiallyExpanded,
                 [child.data.username]: true,