put in all the data that will be displayed

src/device/autoDetect/DeviceScannedComponents.tsx

@@ -7,9 +7,11 @@ import { useEffect, useState } from "react";
 import ScannedI2C from "./ScannedI2C";
 import ComponentForm from "component/ComponentForm";
 import { Component, Device } from "models";
-import { DeviceAvailabilityMap, OffsetAvailabilityMap } from "pbHelpers/DeviceAvailability";
+import { DeviceAvailabilityMap, FindAvailablePositions, OffsetAvailabilityMap } from "pbHelpers/DeviceAvailability";
 import ResponsiveDialog from "common/ResponsiveDialog";
 import { useComponentAPI, useDeviceAPI, useSnackbar } from "hooks";
+import { ConfigurablePin } from "pbHelpers/AddressTypes";
+import ScannedOneWirePort from "./OneWire/ScannedOneWirePort";
 
 interface Props {
   scannedComponents: pond.ComponentAddressMap
@@ -251,10 +253,21 @@ export default function DeviceScannedComponents(props: Props){
               </Typography>
               <Button variant="contained" color="primary" onClick={()=>{}}>Clear Scan</Button>
             </Box>
-            {scannedOneWire.map(scan => {
+            {scannedOneWire.map((scan,i) => {
+              let map = FindAvailablePositions([], device.settings.product).availability.get(quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY)
+              let portAddress = scan.settings?.oneWireData?.port
+              let portLabel = ""
+
+              map?.forEach(entry => {
+                let pin = entry as ConfigurablePin
+                if (pin.address && pin.address === portAddress) {
+                  portLabel = pin.label
+                }
+              })
               return(
-                <Box>
-                  
+                <Box key={i}>
+                  <Typography>Port: {portLabel}</Typography>
+                  <ScannedOneWirePort scan={scan}/>
                 </Box>
               )
             })}

src/device/autoDetect/OneWire/PortComponent.tsx

@@ -0,0 +1,47 @@
+import { Box, MenuItem, TextField } from "@mui/material"
+import { getFriendlyName, getSubtypes, Subtype } from "pbHelpers/ComponentType"
+import { quack } from "protobuf-ts/quack"
+import React, { useEffect, useState } from "react"
+
+interface Props {
+  compData: quack.OneWireComponentData
+}
+
+export default function PortComponent(props: Props){
+  const {compData} = props
+  const [selectedSubtype, setSelectedSubtype] = useState<number>(-1)
+
+  useEffect(()=>{
+    setSelectedSubtype(compData.subtype)
+  },[compData])
+
+  const subtypeSelector = (compData: quack.OneWireComponentData) => {
+    let validSubtypes: Subtype[] = []
+    getSubtypes(compData.type).forEach(option => {
+      if(compData.subtype === option.key || compData.subtype === 0){
+        validSubtypes.push(option)
+      }
+    })
+    return (
+      <TextField
+        value={selectedSubtype}
+        select>
+          <MenuItem key={-1} value={-1}>Select the Component Subtype</MenuItem>
+        {validSubtypes.map((s, i) => (
+          <MenuItem key={i} value={s.key}>{s.friendlyName}</MenuItem>
+      ))}
+      </TextField>
+    )
+  }
+
+  return (
+    <React.Fragment>
+          <Box>
+            {getFriendlyName(compData.type)}
+            Cable ID: {compData.cableId}
+            Number of nodes: {compData.nodeCount}
+            {subtypeSelector(compData)}
+          </Box>
+    </React.Fragment>
+  )
+}

src/device/autoDetect/OneWire/ScannedOneWirePort.tsx

@@ -0,0 +1,31 @@
+import { Box, MenuItem, TextField } from "@mui/material"
+import { extension, getFriendlyName, getSubtypes, Subtype } from "pbHelpers/ComponentType"
+import { pond } from "protobuf-ts/pond"
+import { quack } from "protobuf-ts/quack"
+import React, { useEffect, useState } from "react"
+import PortComponent from "./PortComponent"
+
+interface Props {
+  scan: pond.DetectOneWire
+}
+
+export default function ScannedOneWirePort(props: Props){
+  const {scan} = props
+  const [portComponents, setPortComponents] = useState<quack.OneWireComponentData[]>([])
+
+  useEffect(()=>{
+    setPortComponents(scan.settings?.oneWireData?.components ?? [])
+  },[scan])
+
+  return (
+    <React.Fragment>
+      {portComponents.map((compData, i) => {
+        // let ext = extension(compData.type, compData.subtype)
+        // console.log(ext)
+        return (
+          <PortComponent compData={compData}/>
+        )
+      })}
+    </React.Fragment>
+  )
+}

src/device/autoDetect/ScannedOneWirePort.tsx

@@ -1,7 +0,0 @@
-import React from "react"
-
-export default function ScannedOneWirePort(){
-  return (
-    <React.Fragment></React.Fragment>
-  )
-}

src/pages/Device.tsx

@@ -171,7 +171,7 @@ export default function DevicePage() {
       .then(resp => {
         console.log(resp.data)
         if (resp.data.foundComponents){
-          setScannedAddresses(resp.data.foundComponents ?? undefined)
+          setScannedAddresses(pond.ListFoundComponentsResponse.fromObject(resp.data).foundComponents ?? undefined)
         }
       })
       .catch(err => {