Update Physical Web WebUI to show new results automatically

components/physical_web/webui/resources/physical_web.js

Index: components/physical_web/webui/resources/physical_web.js
diff --git a/components/physical_web/webui/resources/physical_web.js b/components/physical_web/webui/resources/physical_web.js
index 418dc1d6e90c1b5e8daffb35b8fbd841900eae08..8aef18113baadb82cbccb6f7f670639390283742 100644
--- a/components/physical_web/webui/resources/physical_web.js
+++ b/components/physical_web/webui/resources/physical_web.js
@@ -9,8 +9,21 @@
  *      nearby devices
  */
 function renderTemplate(nearbyUrlsData) {
+  prepareURLS(nearbyUrlsData);
+
+  // This is a workaround with jstemplate. Jstemplate render only works on empty
+  // node. When we need to rerender things, we have to remove previous nodes.
+  let renderContainer = document.getElementById('render-container');
+  // Remove existing childNode.
+  while (renderContainer.hasChildNodes()) {
+    renderContainer.removeChild(renderContainer.lastChild);
+  }
+
+  let templateDiv = document.getElementById('render-template').cloneNode(true);
+  renderContainer.appendChild(templateDiv);
+
   // This is the javascript code that processes the template:
-  jstProcess(new JsEvalContext(nearbyUrlsData), $('physicalWebTemplate'));
+  jstProcess(new JsEvalContext(nearbyUrlsData), templateDiv);
 }
 
 function requestNearbyURLs() {
@@ -22,10 +35,52 @@ function physicalWebItemClicked(index) {
 }
 
 function returnNearbyURLs(nearbyUrlsData) {
-  var bodyContainer = $('body-container');
+  let bodyContainer = $('body-container');
   renderTemplate(nearbyUrlsData);
 
   bodyContainer.style.visibility = 'visible';
 }
 
+function prepareURLS(nearbyUrlsData) {
+  dedupURLs(nearbyUrlsData);
+  reorderURLs(nearbyUrlsData);
+  resetUrlIndex(nearbyUrlsData);
+}
+
+// When we have new URLs, we want to append it to the end of the result page to
+// prevent misclick.
+var ShownUrls = [];
+function reorderURLs(nearbyUrlsData) {

[mmocny, 2017/03/22 16:03:50]

This seems like an error prone hand rolled solution which concerns me.

I think its just a version of stable_partition, but since it won't be super
convenient to import an algorithms library here, I think we should try to find a
less clever solution, and I think we can.

Hows this:

1. Change `reorderURLs` to `findNewUrls` and have it return `newUrlsMetadata`
directly (doesn't modify any global state).
2. Instead of storing `ShownUrls` as a list of resolvedUrl, store the full
`nearbyUrlsData` array from last rendering (initial load will be empty array). 
(This is global state, but makes sense to store).
3. Implement `findNewUrls` by just doing a nested linear scan comparing
`newNearbyUrlsData` to `curentNearbyUrlsData`.  (This should be a very simple
implementation, the data sizes are trivial so its OK)
4. Before calling renderTemplate, do something like  `currentNearbyUrlsData =
currentNearbyUrlsData.concat(findNewUrls(currentNearbyUrlsData, nearbyUrlsData)`

Does this make sense?

[Ran, 2017/03/22 19:10:47]

Done.

+  let newUrlsMetadata = [];
+  for (let i = nearbyUrlsData['metadata'].length - 1; i >= 0; i--) {
+    let resolvedUrl = nearbyUrlsData['metadata'][i].resolvedUrl;
+    if (ShownUrls.indexOf(resolvedUrl) != -1) {  // already shown in page
+      continue;
+    } else {
+      ShownUrls.push(resolvedUrl);
+      newUrlsMetadata.push(nearbyUrlsData['metadata'][i]);
+      nearbyUrlsData['metadata'].splice(i, 1);
+    }
+  }
+  nearbyUrlsData['metadata'] =
+      nearbyUrlsData['metadata'].concat(newUrlsMetadata);
+}
+
+function dedupURLs(nearbyUrlsData) {

[mmocny, 2017/03/22 16:03:50]

As I mentioned in person, I think URLs are (or should be) deduped in C++, and I
think it should already be doing this from the code Matt gave you (maybe there
is a small bug?).

In a future version of the PW DataSource provider API, C++ will give you deduped
data so we should write the WebUI assuming such.

[Ran, 2017/03/22 19:10:47]

Done.

+  let set = new Set();
+  for (let i = nearbyUrlsData['metadata'].length - 1; i >= 0; i--) {
+    if (set.has(nearbyUrlsData['metadata'][i].resolvedUrl)) {
+      nearbyUrlsData['metadata'].splice(i, 1);
+    } else {
+      set.add(nearbyUrlsData['metadata'][i].resolvedUrl);
+    }
+  }
+}
+
+function resetUrlIndex(nearbyUrlsData) {

[mmocny, 2017/03/22 16:03:50]

Do you use .index for anything?

[mattreynolds, 2017/03/22 18:33:10]

Only for UMA. If we can remove it that would be great, we would just need some
other way to determine our index in physicalWebItemClicked.

+  for (let i = 0; i < nearbyUrlsData['metadata'].length; i++) {
+    nearbyUrlsData['metadata'][i].index = i;
+  }
+}
+
 document.addEventListener('DOMContentLoaded', requestNearbyURLs);