From a3dc9077953ce7582bf97f7a0efc2fe50582f3c1 Mon Sep 17 00:00:00 2001
From: Leon Chen <leon@md.ai>
Date: Sat, 8 Oct 2016 18:54:06 -0400
Subject: [PATCH] update ResNet50 demo

---
 demos/src/resnet50.css           | 7 ++++++-
 demos/src/resnet50.js            | 1 +
 demos/src/resnet50.template.html | 2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/demos/src/resnet50.css b/demos/src/resnet50.css
index ebb94cd..abb0563 100644
--- a/demos/src/resnet50.css
+++ b/demos/src/resnet50.css
@@ -143,8 +143,9 @@
       .layer {
         display: inline-block;
         background: white;
+        border: 2px solid white;
         border-radius: 5px;
-        padding: 4px 12px 2px;
+        padding: 2px 10px 0px;
 
         .layer-class-name {
           color: $color-1;
@@ -158,6 +159,10 @@
           font-weight: bold;
         }
       }
+
+      .layer.has-result {
+        border-color: $color-1;
+      }
     }
 
     .architecture-connections {
diff --git a/demos/src/resnet50.js b/demos/src/resnet50.js
index 3f596e0..bba3c24 100644
--- a/demos/src/resnet50.js
+++ b/demos/src/resnet50.js
@@ -73,6 +73,7 @@ export const ResNet50 = Vue.extend({
       return rows
     },
     layersWithResults: function () {
+      // store as computed property for reactivity
       return this.model.layersWithResults
     },
     outputClasses: function () {
diff --git a/demos/src/resnet50.template.html b/demos/src/resnet50.template.html
index 4367ff0..604b508 100644
--- a/demos/src/resnet50.template.html
+++ b/demos/src/resnet50.template.html
@@ -7,7 +7,6 @@
     Loading...{{ loadingProgress }}%
   </div>
   <div class="input-container" v-if="!modelLoading">
-    {{ layersWithResults }}
     <div class="input-label">Enter a valid image URL or select an image from the dropdown:</div>
     <div class="image-url">
       <mdl-textfield
@@ -68,6 +67,7 @@
         <div
           v-if="layer.className"
           class="layer"
+          :class="{ 'has-result': layersWithResults.includes(layer.name) }"
           :id="layer.name"
         >
           <div class="layer-class-name">{{ layer.className }}</div>