changed up the scan dispaly to show expanders properly rather than just as another sensor with no expansion line, and added the lines to the port info in the component cards

src/device/autoDetect/DeviceScannedComponents.tsx

@@ -12,6 +12,7 @@ import ResponsiveDialog from "common/ResponsiveDialog";
 import { useComponentAPI, useDeviceAPI, useSnackbar } from "hooks";
 import { ConfigurablePin } from "pbHelpers/AddressTypes";
 import ScannedOneWirePort from "./OneWire/ScannedOneWirePort";
+import I2CExpander from "./I2CExpander";
 
 interface Props {
   scannedComponents: pond.ComponentAddressMap
@@ -27,6 +28,7 @@ interface CompStep {
 }
 
 let i2cBlacklistAddresses: number[] = [0x70]
+let i2cExpanderAddresses: number[] = [0x71]
 
 export default function DeviceScannedComponents(props: Props){
   const {scannedComponents, device, availablePositions, availableOffsets, refreshCallback} = props
@@ -35,6 +37,7 @@ export default function DeviceScannedComponents(props: Props){
   const [scannedI2C, setScannedI2C] = useState<pond.DetectI2C>() //the unmodified scan of addresses
   const [scannedOneWire, setScannedOneWire] = useState<pond.DetectOneWire[]>([])
   const [validI2CCompAddresses, setValidI2CComponentAddresses] = useState<quack.AddressData[]>([]) //the filtered array of address data
+  const [expanderAddresses, setExpanderAddresses] = useState<quack.AddressData[]>([])
   const [components, setComponents] = useState<Component[]>([])
   const [steps, setSteps] = useState<CompStep[]>([]);
   const { error, success } = useSnackbar();
@@ -69,17 +72,23 @@ export default function DeviceScannedComponents(props: Props){
 
   useEffect(()=>{
     let valid: quack.AddressData[] = []
+    let expanders: quack.AddressData[] = []
     //filter the address data
     let addr = scannedI2C?.settings?.foundAddresses
+    console.log(addr)
     if(addr){
       addr.forEach(addrData => {
         if(!i2cBlacklistAddresses.includes(addrData.address)){
-          if(!(addrData.address === 0x71 && addrData.expansionLine === undefined)){
-            valid.push(addrData)
-          }
+            if(i2cExpanderAddresses.includes(addrData.address) && addrData.expansionLine === 0){
+              expanders.push(addrData)
+            }else{
+              valid.push(addrData)
+            }
         }
       })
     }
+    console.log(valid)
+    setExpanderAddresses(expanders)
     setValidI2CComponentAddresses(valid)
   },[scannedI2C])
 
@@ -256,33 +265,49 @@ export default function DeviceScannedComponents(props: Props){
         {scannedI2C !== undefined && 
           <Box marginBottom={5}>
           <Box justifyContent="space-between" display="flex">
-            <Typography sx={{fontWeight: 650}}>
-              I2C Sensors
+            <Typography sx={{fontWeight: 650, fontSize: 20}}>
+              I2C Scan
             </Typography>
             <Button variant="contained" color="primary" onClick={()=>{removeScan(scannedI2C.key, pond.ObjectType.OBJECT_TYPE_DETECT_I2C)}}>Clear Scan</Button>
           </Box>
-          {validI2CCompAddresses.length > 0 ? validI2CCompAddresses.map((addr, index) => {
-            return (
-              <ScannedI2C key={index} sensorNum={index+1} addressData={addr} deviceProduct={device.settings.product} componentSelectionCallback={componentSelection} availablePositions={availablePositions.get(quack.AddressType.ADDRESS_TYPE_I2C) ?? new Map<quack.ComponentType, number[]>()}/>
-            )
-          }) :
-            <Box sx={{
-              margin: 1,
-              display: "flex",
-              justifyContent: "center"
-            }}>
-              <Typography>
-                No Sensors Found  
-              </Typography>
+          {expanderAddresses.length > 0 && 
+            <Box marginBottom={3}>
+              <Typography fontWeight={650}>Detected Expanders</Typography>
+              {expanderAddresses.map((expAddr, index) => {
+                return (
+                  <I2CExpander key={index} address={expAddr}/>
+                )
+              })}
+            </Box>
+          }
+
+          {validI2CCompAddresses.length > 0 ?
+            <Box>
+              <Typography fontWeight={650}>Detected Sensors</Typography>
+              {validI2CCompAddresses.map((addr, index) => {
+                return (
+                  <ScannedI2C key={index} sensorNum={index+1} addressData={addr} deviceProduct={device.settings.product} componentSelectionCallback={componentSelection} availablePositions={availablePositions.get(quack.AddressType.ADDRESS_TYPE_I2C) ?? new Map<quack.ComponentType, number[]>()}/>
+                )
+              })}
+            </Box>
+          :
+            <Box sx={{
+                margin: 1,
+                display: "flex",
+                justifyContent: "center"
+              }}>
+                <Typography>
+                  No Sensors Found  
+                </Typography>
+              </Box>
+            }
             </Box>
           }
-          </Box>
-        }
         {scannedOneWire.length > 0 &&
           <Box>
             <Box justifyContent="space-between" display="flex">
               <Typography sx={{fontWeight: 650}}>
-                Pin Port Sensors
+                Pin Port Scan
               </Typography>
             </Box>
             {scannedOneWire.map((scan,i) => {