diff --git a/.gitignore b/.gitignore
index 5805fa4..173010b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,3 @@
 .idea
 .DS_Store
-*/tests/output
-
+**/tests/output/
\ No newline at end of file
diff --git a/lib/measures/detailed_hvac_viewer/README.md b/lib/measures/detailed_hvac_viewer/README.md
index 3a9ab35..88e7653 100644
--- a/lib/measures/detailed_hvac_viewer/README.md
+++ b/lib/measures/detailed_hvac_viewer/README.md
@@ -17,8 +17,6 @@ The user is asked to provided the following parameters:
     * System Node Mass Flow Rate
     * etc.
 
-Developed as part of HackSimBuild 2024 by Matthew Dahlhausen and Ken Takahashi
-
 ## Measure Type
 ReportingMeasure
 
diff --git a/lib/measures/detailed_hvac_viewer/measure.rb b/lib/measures/detailed_hvac_viewer/measure.rb
index 0232966..c8f1049 100644
--- a/lib/measures/detailed_hvac_viewer/measure.rb
+++ b/lib/measures/detailed_hvac_viewer/measure.rb
@@ -23,9 +23,7 @@ def modeler_description
     * System Node Temperature
     * System Node Setpoint Temperature
     * System Node Mass Flow Rate
-    * etc.
-
-Developed as part of HackSimBuild 2024 by Matthew Dahlhausen and Ken Takahashi"
+    * etc."
   end
 
   # define the arguments that the user will input
@@ -46,7 +44,7 @@ def arguments(model=nil)
     chs << 'Monthly'
     reporting_frequency = OpenStudio::Measure::OSArgument::makeChoiceArgument('reporting_frequency', chs, true)
     reporting_frequency.setDisplayName("<h3>Select a Reporting Frequency?</h3>")
-    reporting_frequency.setDefaultValue('Timestep')
+    reporting_frequency.setDefaultValue("Hourly")
     args << reporting_frequency
 
     # reporting variables
@@ -149,19 +147,19 @@ def energyPlusOutputRequests(runner, user_arguments)
     loops.each do |loop|
       # add the supply objects
       supply_objects = loop.supplyComponents(OpenStudio::Model::Node::iddObjectType)
-      node_names = addNodeNamestoArray(supply_objects, node_names)
+      node_names = add_node_names_to_array(supply_objects, node_names)
 
       # also add the outside air system nodes if an air loop
       if loop.to_AirLoopHVAC.is_initialized
         loop = loop.to_AirLoopHVAC.get
         oa_objects = loop.oaComponents(OpenStudio::Model::Node::iddObjectType)
-        node_names = addNodeNamestoArray(oa_objects, node_names)
+        node_names = add_node_names_to_array(oa_objects, node_names)
       end
 
       # optionally include demand nodes
       if include_demand_nodes
         demand_objects = loop.demandComponents(OpenStudio::Model::Node::iddObjectType)
-        node_names = addNodeNamestoArray(demand_objects, node_names)
+        node_names = add_node_names_to_array(demand_objects, node_names)
       end
     end
 
@@ -204,22 +202,30 @@ def straight_component_data_hash(comp, reporting_frequency, variable_names)
     comp_data['object_name'] = comp.name.to_s
     comp_data['object_type'] = comp.iddObjectType.valueName.to_s
     if comp.inletModelObject.is_initialized
-      # if !comp.inletModelObject.get.name.is_initialized
-      #   puts comp.name
-      #   puts comp.inletModelObject.get.iddObjectType.valueName.to_s
-      # end
       if comp.inletModelObject.get.name.is_initialized
-        comp_data['before_objects'] = [comp.inletModelObject.get.name.get]
+        inlet_object_name = comp.inletModelObject.get.name.get
+        if comp.loop.get.name.get.to_s == inlet_object_name
+          # don't log the air loop for the supply inlet node
+          comp_data['before_objects'] = []
+        else
+          comp_data['before_objects'] = [inlet_object_name]
+        end
       end
+    else
+      comp_data['before_objects'] = []
     end
     if comp.outletModelObject.is_initialized
-      # if !comp.outletModelObject.get.name.is_initialized
-      #   puts comp.name
-      #   puts comp.outletModelObject.get.iddObjectType.valueName.to_s
-      # end
       if comp.outletModelObject.get.name.is_initialized
-        comp_data['after_objects'] = [comp.outletModelObject.get.name.get]
+        outlet_object_name = comp.outletModelObject.get.name.get
+        if comp.loop.get.name.get.to_s == outlet_object_name
+          # don't log the air loop for the supply outlet node
+          comp_data['after_objects'] = []
+        else
+          comp_data['after_objects'] = [outlet_object_name]
+        end
       end
+    else
+      comp_data['after_objects'] = []
     end
     if comp.to_Node.is_initialized && !variable_names.empty?
       sql = comp.model.sqlFile.get
@@ -240,7 +246,7 @@ def straight_component_data_hash(comp, reporting_frequency, variable_names)
     return comp_data
   end
 
-  def addNodeNamestoArray(model_objects, node_names)
+  def add_node_names_to_array(model_objects, node_names)
     model_objects.each do |model_object|
       unless model_object.to_Node.empty?
         model_node = model_object.to_Node.get
@@ -252,6 +258,16 @@ def addNodeNamestoArray(model_objects, node_names)
     return node_names
   end
 
+  def loop_boundary_nodes(loop)
+    node_list = {}
+    node_list['supply_inlet'] = loop.supplyInletNode.name.get
+    node_list['supply_outlet'] = loop.supplyOutletNode.name.get
+    node_list['demand_inlet'] = loop.demandInletNode.name.get
+    node_list['demand_outlet'] = loop.demandOutletNode.name.get
+
+    return node_list
+  end
+
   # define what happens when the measure is run
   def run(runner, user_arguments)
     super(runner, user_arguments)
@@ -322,8 +338,9 @@ def run(runner, user_arguments)
     # get data from air loops
     model.getAirLoopHVACs.each do |air_loop|
       air_loop_data = {}
-      air_loop_data['object_name'] = air_loop.name.to_s
-      air_loop_data['object_type'] = air_loop.iddObjectType.valueName.to_s
+      air_loop_data['loop_name'] = air_loop.name.to_s
+      air_loop_data['loop_type'] = air_loop.iddObjectType.valueName.to_s
+      air_loop_data['boundary_nodes'] = loop_boundary_nodes(air_loop)
       air_loop_data['components'] = []
       air_loop.supplyComponents.each do |comp|
         if comp.to_StraightComponent.is_initialized
@@ -342,7 +359,9 @@ def run(runner, user_arguments)
           if comp.outboardOANode.is_initialized
             oa_node = comp.outboardOANode.get
             comp_data['before_objects'] << oa_node.name.get
-            air_loop_data['components'] << straight_component_data_hash(oa_node, reporting_frequency, variable_names)
+            temp_comp = straight_component_data_hash(oa_node, reporting_frequency, variable_names)
+            temp_comp['component_side'] = 'supply'
+            air_loop_data['components'] << temp_comp
           end
           if comp.returnAirModelObject.is_initialized
             comp_data['before_objects'] << comp.returnAirModelObject.get.name.get
@@ -350,14 +369,16 @@ def run(runner, user_arguments)
           if comp.outboardReliefNode.is_initialized
             relief_node = comp.outboardReliefNode.get
             comp_data['after_objects'] << relief_node.name.get
-            air_loop_data['components'] << straight_component_data_hash(relief_node, reporting_frequency, variable_names)
+            temp_comp = straight_component_data_hash(relief_node, reporting_frequency, variable_names)
+            temp_comp['component_side'] = 'supply'
+            air_loop_data['components'] << temp_comp
           end
           if comp.mixedAirModelObject.is_initialized
             comp_data['after_objects'] << comp.mixedAirModelObject.get.name.get
           end
         end
 
-        comp_data['component_type'] = 'supply'
+        comp_data['component_side'] = 'supply'
         air_loop_data['components'] << comp_data
       end
 
@@ -372,7 +393,7 @@ def run(runner, user_arguments)
           comp_data = {}
         end
 
-        comp_data['component_type'] = 'demand'
+        comp_data['component_side'] = 'demand'
         air_loop_data['components'] << comp_data
       end
 
@@ -382,8 +403,9 @@ def run(runner, user_arguments)
     # get data from plant loops
     model.getPlantLoops.each do |plant_loop|
       plant_loop_data = {}
-      plant_loop_data['object_name'] = plant_loop.name.to_s
-      plant_loop_data['object_type'] = plant_loop.iddObjectType.valueName.to_s
+      plant_loop_data['loop_name'] = plant_loop.name.to_s
+      plant_loop_data['loop_type'] = plant_loop.iddObjectType.valueName.to_s
+      plant_loop_data['boundary_nodes'] = loop_boundary_nodes(plant_loop)
       plant_loop_data['components'] = []
       plant_loop.supplyComponents.each do |comp|
         if comp.to_StraightComponent.is_initialized
@@ -392,7 +414,7 @@ def run(runner, user_arguments)
           comp_data = {}
         end
 
-        comp_data['component_type'] = 'supply'
+        comp_data['component_side'] = 'supply'
         plant_loop_data['components'] << comp_data
       end
 
@@ -407,7 +429,7 @@ def run(runner, user_arguments)
           comp_data = {}
         end
 
-        comp_data['component_type'] = 'demand'
+        comp_data['component_side'] = 'demand'
         plant_loop_data['components'] << comp_data
       end
 
@@ -417,7 +439,7 @@ def run(runner, user_arguments)
     # Convert the hash to a JSON string
     hvac_data = JSON.pretty_generate(hvac_data)
 
-    # # Write the JSON string to the file
+    # Write the JSON string to the file
     File.open('hvac_data.json', 'w') do |file|
       file.write(hvac_data)
     end
diff --git a/lib/measures/detailed_hvac_viewer/measure.xml b/lib/measures/detailed_hvac_viewer/measure.xml
index 5c7b4c7..10ce1e8 100644
--- a/lib/measures/detailed_hvac_viewer/measure.xml
+++ b/lib/measures/detailed_hvac_viewer/measure.xml
@@ -3,8 +3,8 @@
   <schema_version>3.1</schema_version>
   <name>detailed_hvac_viewer</name>
   <uid>416a484f-bd28-4db8-8926-7d70740390eb</uid>
-  <version_id>e516cae3-f0b4-484c-8b8f-964a2e0cc739</version_id>
-  <version_modified>2024-05-20T19:04:32Z</version_modified>
+  <version_id>e9420fc1-03ba-4447-8f21-406039655bbe</version_id>
+  <version_modified>2024-05-27T05:45:22Z</version_modified>
   <xml_checksum>C068F366</xml_checksum>
   <class_name>DetailedHVACViewer</class_name>
   <display_name>Detailed HVAC Viewer</display_name>
@@ -16,9 +16,7 @@
     * System Node Temperature
     * System Node Setpoint Temperature
     * System Node Mass Flow Rate
-    * etc.
-
-Developed as part of HackSimBuild 2024 by Matthew Dahlhausen and Ken Takahashi</modeler_description>
+    * etc.</modeler_description>
   <arguments>
     <argument>
       <name>include_demand_nodes</name>
@@ -44,7 +42,7 @@ Developed as part of HackSimBuild 2024 by Matthew Dahlhausen and Ken Takahashi</
       <type>Choice</type>
       <required>true</required>
       <model_dependent>false</model_dependent>
-      <default_value>Timestep</default_value>
+      <default_value>Hourly</default_value>
       <choices>
         <choice>
           <value>Detailed</value>
@@ -473,7 +471,7 @@ Developed as part of HackSimBuild 2024 by Matthew Dahlhausen and Ken Takahashi</
       <filename>README.md</filename>
       <filetype>md</filetype>
       <usage_type>readme</usage_type>
-      <checksum>6697ACCA</checksum>
+      <checksum>C4276244</checksum>
     </file>
     <file>
       <filename>README.md.erb</filename>
@@ -490,7 +488,7 @@ Developed as part of HackSimBuild 2024 by Matthew Dahlhausen and Ken Takahashi</
       <filename>measure.rb</filename>
       <filetype>rb</filetype>
       <usage_type>script</usage_type>
-      <checksum>A1217DB6</checksum>
+      <checksum>6DD34D66</checksum>
     </file>
     <file>
       <filename>README.md</filename>
@@ -523,17 +521,35 @@ Developed as part of HackSimBuild 2024 by Matthew Dahlhausen and Ken Takahashi</
       <checksum>FC079194</checksum>
     </file>
     <file>
-      <filename>images/OAMixer_left.png</filename>
+      <filename>images/OS_AirLoopHVAC_OutdoorAirSystem_Left.png</filename>
       <filetype>png</filetype>
       <usage_type>resource</usage_type>
       <checksum>44F75E3F</checksum>
     </file>
     <file>
-      <filename>images/OAMixer_right.png</filename>
+      <filename>images/OS_AirLoopHVAC_OutdoorAirSystem_Right.png</filename>
       <filetype>png</filetype>
       <usage_type>resource</usage_type>
       <checksum>00C310F5</checksum>
     </file>
+    <file>
+      <filename>images/OS_Coil_Cooling_DX_TwoSpeed.png</filename>
+      <filetype>png</filetype>
+      <usage_type>resource</usage_type>
+      <checksum>291533F7</checksum>
+    </file>
+    <file>
+      <filename>images/OS_Coil_Heating_Gas.png</filename>
+      <filetype>png</filetype>
+      <usage_type>resource</usage_type>
+      <checksum>95E0B87F</checksum>
+    </file>
+    <file>
+      <filename>images/OS_Fan_VariableVolume.png</filename>
+      <filetype>png</filetype>
+      <usage_type>resource</usage_type>
+      <checksum>9E4B5D6F</checksum>
+    </file>
     <file>
       <filename>images/air_cooled.png</filename>
       <filetype>png</filetype>
@@ -834,12 +850,6 @@ Developed as part of HackSimBuild 2024 by Matthew Dahlhausen and Ken Takahashi</
       <usage_type>resource</usage_type>
       <checksum>90EDB4DD</checksum>
     </file>
-    <file>
-      <filename>images/dxcoolingcoil_2stage_humidity.png</filename>
-      <filetype>png</filetype>
-      <usage_type>resource</usage_type>
-      <checksum>291533F7</checksum>
-    </file>
     <file>
       <filename>images/dxcoolingcoil_singlespeed.png</filename>
       <filetype>png</filetype>
@@ -912,12 +922,6 @@ Developed as part of HackSimBuild 2024 by Matthew Dahlhausen and Ken Takahashi</
       <usage_type>resource</usage_type>
       <checksum>22BBCE49</checksum>
     </file>
-    <file>
-      <filename>images/fan_variable.png</filename>
-      <filetype>png</filetype>
-      <usage_type>resource</usage_type>
-      <checksum>9E4B5D6F</checksum>
-    </file>
     <file>
       <filename>images/fan_zoneexhaust.png</filename>
       <filetype>png</filetype>
@@ -948,12 +952,6 @@ Developed as part of HackSimBuild 2024 by Matthew Dahlhausen and Ken Takahashi</
       <usage_type>resource</usage_type>
       <checksum>3249F600</checksum>
     </file>
-    <file>
-      <filename>images/furnace.png</filename>
-      <filetype>png</filetype>
-      <usage_type>resource</usage_type>
-      <checksum>95E0B87F</checksum>
-    </file>
     <file>
       <filename>images/furnace_multi_stage.png</filename>
       <filetype>png</filetype>
@@ -1510,7 +1508,7 @@ Developed as part of HackSimBuild 2024 by Matthew Dahlhausen and Ken Takahashi</
       <filename>report.html.erb</filename>
       <filetype>erb</filetype>
       <usage_type>resource</usage_type>
-      <checksum>36489548</checksum>
+      <checksum>47D8CA23</checksum>
     </file>
     <file>
       <filename>USA_IL_Chicago-OHare.Intl.AP.725300_TMY3.epw</filename>
diff --git a/lib/measures/detailed_hvac_viewer/resources/images/OAMixer_left.png b/lib/measures/detailed_hvac_viewer/resources/images/OS_AirLoopHVAC_OutdoorAirSystem_Left.png
similarity index 100%
rename from lib/measures/detailed_hvac_viewer/resources/images/OAMixer_left.png
rename to lib/measures/detailed_hvac_viewer/resources/images/OS_AirLoopHVAC_OutdoorAirSystem_Left.png
diff --git a/lib/measures/detailed_hvac_viewer/resources/images/OAMixer_right.png b/lib/measures/detailed_hvac_viewer/resources/images/OS_AirLoopHVAC_OutdoorAirSystem_Right.png
similarity index 100%
rename from lib/measures/detailed_hvac_viewer/resources/images/OAMixer_right.png
rename to lib/measures/detailed_hvac_viewer/resources/images/OS_AirLoopHVAC_OutdoorAirSystem_Right.png
diff --git a/lib/measures/detailed_hvac_viewer/resources/images/dxcoolingcoil_2stage_humidity.png b/lib/measures/detailed_hvac_viewer/resources/images/OS_Coil_Cooling_DX_TwoSpeed.png
similarity index 100%
rename from lib/measures/detailed_hvac_viewer/resources/images/dxcoolingcoil_2stage_humidity.png
rename to lib/measures/detailed_hvac_viewer/resources/images/OS_Coil_Cooling_DX_TwoSpeed.png
diff --git a/lib/measures/detailed_hvac_viewer/resources/images/furnace.png b/lib/measures/detailed_hvac_viewer/resources/images/OS_Coil_Heating_Gas.png
similarity index 100%
rename from lib/measures/detailed_hvac_viewer/resources/images/furnace.png
rename to lib/measures/detailed_hvac_viewer/resources/images/OS_Coil_Heating_Gas.png
diff --git a/lib/measures/detailed_hvac_viewer/resources/images/fan_variable.png b/lib/measures/detailed_hvac_viewer/resources/images/OS_Fan_VariableVolume.png
similarity index 100%
rename from lib/measures/detailed_hvac_viewer/resources/images/fan_variable.png
rename to lib/measures/detailed_hvac_viewer/resources/images/OS_Fan_VariableVolume.png
diff --git a/lib/measures/detailed_hvac_viewer/resources/report.html.erb b/lib/measures/detailed_hvac_viewer/resources/report.html.erb
index 47a32f3..d178ce1 100644
--- a/lib/measures/detailed_hvac_viewer/resources/report.html.erb
+++ b/lib/measures/detailed_hvac_viewer/resources/report.html.erb
@@ -10,7 +10,7 @@
 <style type="text/css">
 	body {
 		display: flex;
-		flex-direction: column;						 
+		flex-direction: column;
 		justify-content: center;
 		align-items: center;
 		height: 100vh;
@@ -45,7 +45,7 @@
     }
 	.line {
       fill: none;
-      stroke: steelblue;
+
       stroke-width: 2px;
     }
 	#plot {
@@ -54,73 +54,292 @@
 </style>
 </head>
 <body>
+<div>
+  <select id="airLoopDropdown">
+		<!-- Options will be dynamically populated -->
+  </select>
+  <select id="nodeAttributeDropdown">
+    <!-- Options will be dynamically populated -->
+  </select>
+</div>
 <div class="grid-container" id="grid-container">
 	<!-- Generate cells for the grid -->
 </div>
 
 <div id='plot'></div>
 
-<!-- Define the iconHash in a script tag. Need to automate from hvac_data-->
-<script id="gridData" type="application/json">
-	{
-		"columns": 11,
-		"rows": 3,
-		"iconHash": {
-			"2-5": "dxcoolingcoil_2stage_humidity.png",
-			"2-7": "heat_coil.png",
-			"2-9": "fan_variable.png",
-			"2-4": "h_node.png",
-			"2-6": "h_node.png",
-			"2-8": "h_node.png",
-			"2-2": "OAMixer_left.png",
-			"2-3": "OAMixer_right.png",
-			"1-2": "down_node.png",
-			"1-3": "down_node.png",
-			"2-1": "right_down.png",
-			"2-10": "h_line.png",
-			"2-11": "left_down.png",
-			"3-1": "v_node.png",
-			"3-11": "v_node.png"
-		},
-		"positionNodeHash": {
-			"1-2": "5 Zone PVAV Outdoor Air Node",
-			"1-3": "5 Zone PVAV Relief Air Node",
-			"2-4": "5 Zone PVAV Mixed Air Node",
-			"2-6": "5 Zone PVAV 2spd DX Clg Coil 354kBtu/hr 9.8EER Outlet Air Node",
-			"2-8": "5 Zone PVAV Main Gas Htg Coil Outlet Air Node",
-			"3-1": "5 Zone PVAV Supply Inlet Node",
-			"3-11": "5 Zone PVAV Supply Outlet Node"
-		}
-	}
-</script>
-
 <script>
-var hvac_data = [<%= hvac_data %>];
-
-function getTemperatureValues(hvac_data, airLoopName, nodeName) {
-  for (let i = 0; i < hvac_data[0].length; i++) {
-    let obj = hvac_data[0][i];
-    if (obj.object_name === airLoopName && obj.object_type === "OS_AirLoopHVAC") {
-      for (let j = 0; j < obj.components.length; j++) {
-        let component = obj.components[j];
-        if (component.object_name === nodeName && component.object_type === "OS_Node") {
-          return component.system_node_temperature;
+var hvac_data = <%= hvac_data %>;
+
+const activeNodes = {};
+
+function splitOutdoorAirSystemObjects(objects) {
+    const newObjects = [];
+    var oa_object_name = '';
+
+    objects.forEach(obj => {
+        if (obj.object_type === "OS_AirLoopHVAC_OutdoorAirSystem") {
+          oa_object_name = obj.object_name
+
+            const firstObject = {
+                object_name: obj.object_name + " Left",
+                original_name: obj.object_name,
+                object_type: obj.object_type,
+                image_name: 'OS_AirLoopHVAC_OutdoorAirSystem_Left.png',
+                before_objects: obj.before_objects.filter(name => !name.includes("Outdoor Air Node")),
+                after_objects: [obj.object_name + " Right"].concat(obj.after_objects.filter(name => name.includes("Relief Air Node"))),
+                component_side: obj.component_side
+            };
+
+            const secondObject = {
+                object_name: obj.object_name + " Right",
+                original_name: obj.object_name,
+                object_type: obj.object_type,
+                image_name: 'OS_AirLoopHVAC_OutdoorAirSystem_Right.png',
+                before_objects: [obj.object_name + " Left"].concat(obj.before_objects.filter(name => name.includes("Outdoor Air Node"))),
+                after_objects: obj.after_objects.filter(name => !name.includes("Relief Air Node")),
+                component_side: obj.component_side
+            };
+
+            newObjects.push(firstObject, secondObject);
+        } else {
+            newObjects.push(obj);
+        }
+    });
+
+    newObjects.forEach(obj => {
+        if (obj.after_objects) {
+            obj.after_objects = obj.after_objects.map(name => {
+                if (name === oa_object_name) {
+                  if (obj.object_name.includes("Outdoor Air Node")) {
+                        return oa_object_name + " Right"
+                    } else {
+                        return oa_object_name + " Left"
+                    }
+                } else {
+                    return name
+                }
+            })
+        };
+
+        if (obj.before_objects) {
+            obj.before_objects = obj.before_objects.map(name => {
+                if (name === oa_object_name) {
+                    if (obj.object_name.includes("Relief Air Node")) {
+                        return oa_object_name + " Left"
+                    } else {
+                        return oa_object_name + " Right"
+                    }
+                } else {
+                    return name
+                }
+            })
+        };
+    });
+
+    return newObjects;
+}
+
+function assignImage(obj){
+    if (obj.object_type === 'OS_Node') {
+        if (obj.object_name.includes("Relief Air Node") || obj.object_name.includes("Outdoor Air Node")) {
+            return "down_node.png"
+        } else if (obj.object_name.includes("Supply Inlet Node") || obj.object_name.includes(" Supply Outlet Node")) {
+            return "v_node.png"
+        } else {
+            return "h_node.png"
+        }
+    } else if (obj.object_type === 'OS_AirLoopHVAC_OutdoorAirSystem') {
+        if (obj.object_name.includes(" Left")) {
+            return 'OS_AirLoopHVAC_OutdoorAirSystem_Left.png'
+        } else {
+            return 'OS_AirLoopHVAC_OutdoorAirSystem_Right.png'
         }
-      }
+    } else {
+          return obj.object_type + ".png"
     }
-  }
-  return null; // Return null if no matching node is found
+};
+
+function createGrid(objects) {
+    // Helper function to find the depth of each object
+    function findDepth(obj, objectMap, memo) {
+        if (memo[obj.object_name] !== undefined) {
+            return memo[obj.object_name];
+        }
+        if (!obj.before_objects || obj.before_objects.length === 0) {
+            return memo[obj.object_name] = 0;
+        }
+        let maxDepth = 0;
+        for (let before of obj.before_objects) {
+            maxDepth = Math.max(maxDepth, findDepth(objectMap[before], objectMap, memo) + 1);
+        }
+        return memo[obj.object_name] = maxDepth;
+    }
+
+    // Create a map of objects by their names for easy lookup
+    const objectMap = {};
+    objects.forEach(obj => objectMap[obj.object_name] = obj);
+
+    // Find depth for each object
+    const depthMap = {};
+    objects.forEach(obj => findDepth(obj, objectMap, depthMap));
+
+    // Sort objects by depth
+    objects.sort((a, b) => depthMap[a.object_name] - depthMap[b.object_name]);
+
+    // Initialize the grid
+    const grid = [];
+    let maxDepth = 0;
+    objects.forEach(obj => {
+        maxDepth = Math.max(maxDepth, depthMap[obj.object_name]);
+    });
+
+    for (let i = 0; i <= maxDepth; i++) {
+        grid[i] = [];
+    }
+
+    // get the name of the outdoor air system
+    var oa_object_name = ''
+    objects.forEach(obj => {
+      if (obj.object_type === "OS_AirLoopHVAC_OutdoorAirSystem") {
+        oa_object_name = obj.original_name
+      };
+    });
+
+    // Assign positions on the grid
+    const assignedPositions = new Set();
+    objects.forEach(obj => {
+        let y = 2;
+        // set relief and outdoor air nodes to the same depth as the outdoor air system
+        if (obj.object_name.includes('Relief Air Node')) {
+            depthMap[obj.object_name] = depthMap[oa_object_name + " Left"]
+            y = 1;
+        } else if (obj.object_name.includes('Outdoor Air Node')){
+            depthMap[obj.object_name] = depthMap[oa_object_name + " Right"]
+            y = 1;
+        }
+        let depth = depthMap[obj.object_name];
+
+        // supply inlet and outlet are 1 row below
+        if (obj.object_name.includes('Supply Inlet Node') || obj.object_name.includes('Supply Outlet Node')) {
+          y = 3;
+        }
+
+        // Otherwise, allocate one space
+        while (assignedPositions.has(`${depth},${y}`)) {
+            y++;
+        }
+        grid[depth][y] = obj.object_name;
+        assignedPositions.add(`${depth},${y}`);
+    });
+
+    // Format the result to include x and y positions
+    const result = objects.map(obj => {
+        let depth = depthMap[obj.object_name];
+        let y = grid[depth].indexOf(obj.object_name);
+        return {
+            name: obj.object_name,
+            object_type: obj.object_type,
+            x: depth + 1,
+            y: y,
+            image_name: obj.image_name
+        };
+    });
+
+    return result;
+}
+
+function populateGridData(hvacData, loopName) {
+    selectedLoopData = hvacData.find(hash => hash.loop_name === loopName)
+    supplyComponents = selectedLoopData["components"].filter(hash => hash.component_side === 'supply')
+    // console.log('supplyComponents');
+    // console.log(supplyComponents);
+    // console.log('split object names');
+    supplyComponents = splitOutdoorAirSystemObjects(supplyComponents);
+    // console.log(supplyComponents);
+    supplyComponents.forEach(obj => obj.image_name = assignImage(obj));
+    // console.log('image names');
+    // console.log(supplyComponents);
+    gridPositions = createGrid(supplyComponents);
+    console.log('gridPositions');
+    console.log(gridPositions);
+
+    // populate gridData
+    iconHash = {}
+    positionNodeHash = {}
+    gridPositions.forEach(obj => {
+        iconHash[`${obj.y}-${obj.x}`] = obj.image_name;
+        if (obj.object_type == 'OS_Node') {
+          positionNodeHash[`${obj.y}-${obj.x}`] = obj.name
+        }
+    });
+    gridData = {}
+    gridData["columns"] = Math.max(...gridPositions.map(obj => obj.x));
+    gridData["rows"] = Math.max(...gridPositions.map(obj => obj.y));
+
+    // add angled sections
+    iconHash['2-1'] = "right_down.png"
+    iconHash[`2-${gridData["columns"]}`] = 'left_down.png'
+
+    gridData["iconHash"] = iconHash
+    gridData["positionNodeHash"] = positionNodeHash
+    console.log('gridData');
+    console.log(gridData);
+
+    return gridData
+};
+
+function populateLoopDropdown() {
+  const dropdown = document.getElementById('airLoopDropdown');
+  const attributes = new Set();
+  hvac_data.forEach( loop => attributes.add(loop.loop_name) );
+
+attributes.forEach(attribute => {
+    const option = document.createElement('option');
+    option.value = option.textContent = attribute;
+    dropdown.appendChild(option);
+  });
+}
+populateLoopDropdown();
+
+function populateNodeAttributeDropdown() {
+  const dropdown = document.getElementById('nodeAttributeDropdown');
+  const attributes = new Set();
+
+  hvac_data.forEach(airLoop => {
+    airLoop.components.forEach(component => {
+      Object.keys(component).forEach(key => {
+        if (key.startsWith('system_node')) {
+          attributes.add(key);
+        }
+      });
+    });
+  });
+
+  attributes.forEach(attribute => {
+    const option = document.createElement('option');
+    option.value = option.textContent = attribute;
+    dropdown.appendChild(option);
+  });
 }
-				 
+populateNodeAttributeDropdown();
+
+function getNodeValues(hvac_data, loopName, nodeName, selectedKey) {
+  selectedLoopData = hvac_data.find(hash => hash.loop_name === loopName);
+  selectedNode = selectedLoopData.components.find(hash => hash.object_name === nodeName);
+  return selectedNode[selectedKey];
+}
+
 function createGridWithIcons() {
 	const gridContainer = document.getElementById('grid-container');
 	const gridDataScript = document.getElementById('gridData');
-	const gridData = JSON.parse(gridDataScript.textContent);
+	const loopName = document.getElementById('airLoopDropdown').value;
+	const gridData = populateGridData(hvac_data, loopName);
 
 	const columns = gridData.columns;
 	const rows = gridData.rows;
 	const iconHash = gridData.iconHash;
-	const positionNodeHash = gridData.positionNodeHash;													
+	const positionNodeHash = gridData.positionNodeHash;
 
 	// Set grid template columns and rows dynamically
 	gridContainer.style.gridTemplateColumns = `repeat(${columns}, 100px)`;
@@ -135,25 +354,49 @@ function createGridWithIcons() {
 
 		if (iconHash[position]) {
 			const img = document.createElement('img');
+			let alternateDirectoryTried = false;
+			img.onerror = function () {
+				console.log("Image not found in measure directory path; trying an alternate path for tests.");
+				if (!alternateDirectoryTried) {
+					alternateDirectoryTried = true;
+					img.src = `../../../resources/images/${iconHash[position]}`;
+				} else {
+					console.log("Image not found in the alternate path as well.");
+					// Handle the case where the image is not found in both paths
+				}
+			}
 			img.src = `../../measures/detailed_hvac_viewer/resources/images/${iconHash[position]}`;
 			img.className = 'grid-icon';
 			gridItem.appendChild(img);
 
 			// Add hover effect only if the cell has an icon
 			gridItem.addEventListener('mouseover', () => {
-				gridItem.style.backgroundColor = '#888';
+				if (!activeNodes[position]) {
+					gridItem.style.backgroundColor = '#888';
+				}
 			});
 			gridItem.addEventListener('mouseout', () => {
-				gridItem.style.backgroundColor = '#ccc';
+				if (!activeNodes[position]) {
+					gridItem.style.backgroundColor = '#ccc';
+				}
 			});
 
 			// Add click event listener for relevant nodes
 			if (positionNodeHash[position]) {
 				gridItem.addEventListener('click', () => {
 					const nodeName = positionNodeHash[position];
-					const tempValues = getTemperatureValues(hvac_data, "5 Zone PVAV", nodeName);
-					if (tempValues) {
-						plotTemperatureValues(tempValues);
+					const attributeName = document.getElementById('nodeAttributeDropdown').value;
+					const NodeValues = getNodeValues(hvac_data, loopName, nodeName, attributeName);
+					if (NodeValues) {
+						if (activeNodes[position]) {
+							delete activeNodes[position];
+							gridItem.style.backgroundColor = '#ccc';
+						} else {
+							const color = getRandomColor();
+							activeNodes[position] = { nodeName, NodeValues, color };
+							gridItem.style.backgroundColor = color;
+						}
+						plotNodeValues();
 					}
 				});
 			}
@@ -162,10 +405,31 @@ function createGridWithIcons() {
 	}
 }
 
-	// Call the function to create the grid with icons
-	createGridWithIcons();
+// Call the function to create the grid with icons
+createGridWithIcons();
+
+function selectLoopEvent() {
+  var dropdown = document.getElementById('loopDropdown');
+
+  // Add change event listener to the dropdown
+  dropdown.addEventListener('change', function() {
+      // Get the selected option value
+      var selectedOption = dropdown.options[dropdown.selectedIndex].value;
+      console.log("Regenerating grid with option value:", selectedOption);
+
+      // Clear the content of the div
+      gridContainer = document.getElementById('grid-container');
+      gridContainer.innerHTML = "";
 
-function plotTemperatureValues(data) {
+      // Call function to regenerate the grid
+      createGridWithIcons();
+  });
+}
+
+// Call function to attach event listener when the DOM is fully loaded
+document.addEventListener('DOMContentLoaded', selectLoopEvent);
+
+function plotNodeValues(data) {
     d3.select("#plot").html(""); // Clear any existing plot
 
     const margin = {top: 20, right: 20, bottom: 30, left: 50};
@@ -176,15 +440,21 @@ function plotTemperatureValues(data) {
     const startDate = new Date(2023, 0, 1);
     const endDate = new Date(2024, 0, 1);
 
-    // Create a time scale for the x-axis
-    const x = d3.scaleTime().domain([startDate, endDate]).range([0, width]);
+	// Create a time scale for the x-axis
+    const x = d3.scaleTime()
+				.domain([startDate, endDate])
+				.range([0, width]);
+
+    const yMax = d3.max(Object.values(activeNodes), d => d3.max(d.NodeValues));
+    const yMin = d3.min(Object.values(activeNodes), d => d3.min(d.NodeValues));
 
-    // Create a linear scale for the y-axis
-    const y = d3.scaleLinear().domain([d3.min(data), d3.max(data)]).range([height, 0]);
+    const y = d3.scaleLinear()
+                .domain([yMin, yMax])
+                .range([height, 0]);
 
     // Define the line function
     const line = d3.line()
-        .x((d, i) => x(new Date(startDate.getTime() + i * (endDate - startDate) / (data.length - 1))))
+        .x((d, i) => x(new Date(2023, 0, 1, i + 1)))
         .y(d => y(d));
 
     // Create the SVG container
@@ -199,15 +469,26 @@ function plotTemperatureValues(data) {
         .attr("transform", `translate(0,${height})`)
         .call(d3.axisBottom(x).ticks(d3.timeMonth.every(1)).tickFormat(d3.timeFormat("%b")));
 
-    // Add the y-axis
+
     svg.append("g")
-        .call(d3.axisLeft(y));
+		.call(d3.axisLeft(y));
+
+	Object.values(activeNodes).forEach(node => {
+		svg.append("path")
+			.data([node.NodeValues])
+			.attr("class", "line")
+			.attr("d", line)
+			.attr("stroke", node.color);
+	});
+}
 
-    // Add the line path
-    svg.append("path")
-        .data([data])
-        .attr("class", "line")
-        .attr("d", line);
+function getRandomColor() {
+	const letters = '0123456789ABCDEF';
+	let color = '#';
+	for (let i = 0; i < 6; i++) {
+		color += letters[Math.floor(Math.random() * 16)];
+	}
+	return color;
 }
 </script>