From 487c8617e4fe2ba2d514a2f76c3264a18cfb8600 Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Mon, 3 Nov 2025 16:41:26 -0600
Subject: [PATCH 1/5] first iteration of basic layout

---
 src/device/DeviceWizard.tsx                   |  4 +-
 .../autoDetect/DeviceScannedComponents.tsx    | 10 +--
 .../autoDetect/OneWire/PortComponent.tsx      | 89 ++++++++++++++++---
 .../autoDetect/OneWire/ScannedOneWirePort.tsx |  9 +-
 src/pages/Device.tsx                          | 11 ++-
 5 files changed, 100 insertions(+), 23 deletions(-)

diff --git a/src/device/DeviceWizard.tsx b/src/device/DeviceWizard.tsx
index 6c8f361..cf0a061 100644
--- a/src/device/DeviceWizard.tsx
+++ b/src/device/DeviceWizard.tsx
@@ -142,8 +142,8 @@ export default function DeviceWizard(props: Props) {
           </Tooltip>
         )}
         {selectedPort && 
-          // selectedPort.addressType === quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY && 
-          // device.featureSupported("detectOneWire") && 
+          selectedPort.addressType === quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY && 
+          device.featureSupported("detectOneWire") && 
           selectedPort.autoDetectable && (
           <Tooltip title="Used to tell the Device to scan this port for any plugged in sensors">
             <MenuItem
diff --git a/src/device/autoDetect/DeviceScannedComponents.tsx b/src/device/autoDetect/DeviceScannedComponents.tsx
index e1fc020..d666264 100644
--- a/src/device/autoDetect/DeviceScannedComponents.tsx
+++ b/src/device/autoDetect/DeviceScannedComponents.tsx
@@ -222,7 +222,7 @@ export default function DeviceScannedComponents(props: Props){
     <React.Fragment>
       <Card raised sx={{padding: 1}}>
         {scannedI2C !== undefined && 
-          <React.Fragment>
+          <Box marginBottom={5}>
           <Box justifyContent="space-between" display="flex">
             <Typography sx={{fontWeight: 650}}>
               I2C Sensors
@@ -244,10 +244,10 @@ export default function DeviceScannedComponents(props: Props){
               </Typography>
             </Box>
           }
-          </React.Fragment>
+          </Box>
         }
         {scannedOneWire.length > 0 &&
-          <Box marginTop={10}>
+          <Box>
             <Box justifyContent="space-between" display="flex">
               <Typography sx={{fontWeight: 650}}>
                 Pin Port Sensors
@@ -265,8 +265,8 @@ export default function DeviceScannedComponents(props: Props){
                 }
               })
               return(
-                <Box key={i} padding={2} paddingBottom={0}>
-                  <Box  display="flex" justifyContent="space-between">
+                <Box key={i} paddingX={2}>
+                  <Box  display="flex" justifyContent="space-between" alignItems={"center"}>
                     <Typography>Port: {portLabel}</Typography>
                     <Button variant="contained" color="primary" onClick={()=>{
                       removeScan(scan.key)
diff --git a/src/device/autoDetect/OneWire/PortComponent.tsx b/src/device/autoDetect/OneWire/PortComponent.tsx
index ee2ab3f..b1e26e1 100644
--- a/src/device/autoDetect/OneWire/PortComponent.tsx
+++ b/src/device/autoDetect/OneWire/PortComponent.tsx
@@ -1,4 +1,5 @@
-import { Box, Checkbox, MenuItem, TextField, Tooltip } from "@mui/material"
+import { Box, Checkbox, Grid2, MenuItem, TextField, Tooltip, Typography } from "@mui/material"
+import { useMobile } from "hooks"
 import { getFriendlyName, getSubtypes, Subtype } from "pbHelpers/ComponentType"
 import { quack } from "protobuf-ts/quack"
 import React, { useEffect, useState } from "react"
@@ -11,20 +12,21 @@ interface Props {
 export default function PortComponent(props: Props){
   const {compData, componentSelect} = props
   // const [selectedSubtype, setSelectedSubtype] = useState<number>(0)
-  const [subtypeVal, setSubtypeVal] = useState("none")//note that this is the friendly name and not the key or the value because it needs to be different from the other alias options
+  const [subtypeVal, setSubtypeVal] = useState("no subtype")//note that this is the friendly name and not the key or the value because it needs to be different from the other alias options
   const [subtypeMap, setSubtypeMap] = useState<Map<string, number>>(new Map())
   const [subtypeOptions, setSubtypeOptions] = useState<Subtype[]>([])
   const [added, setAdded] = useState(false)
+  const isMobile = useMobile()
 
   useEffect(()=>{
     // setSelectedSubtype(compData.subtype)
     let validSubtypes: Subtype[] = []
     let subMap: Map<string, number> = new Map()
-    let subVal: string = "none"
+    let subVal: string = "no subtype"
     getSubtypes(compData.type).forEach(option => {
       if(compData.subtype === option.key || compData.subtype === 0){
         validSubtypes.push(option)
-        if(subVal === "none"){
+        if(subVal === "no subtype"){
           subVal = option.friendlyName
         }
       }
@@ -40,13 +42,14 @@ export default function PortComponent(props: Props){
       <TextField
         value={subtypeVal}
         disabled={added}
+        fullWidth
         onChange={(event) => {
           setSubtypeVal(event.target.value)
           // setSelectedSubtype(subtypeMap.get(event.target.value) ?? 0)
           compData.subtype = subtypeMap.get(event.target.value) ?? 0
         }}
         select>
-          <MenuItem key={-1} value={"none"}>Select the Component Subtype</MenuItem>
+          <MenuItem key={-1} value={"no subtype"}>Select the Component Subtype</MenuItem>
         {subtypeOptions.map((s, i) => (
           <MenuItem key={i} value={s.friendlyName}>{s.friendlyName}</MenuItem>
       ))}
@@ -71,15 +74,77 @@ export default function PortComponent(props: Props){
     )
   }
 
+  const desktopDisplay = () => {
+    return (
+      <Box padding={2}>
+        <Grid2 container spacing={2} direction="row" wrap="nowrap" alignContent="center" alignItems="center" justifyContent="space-between">
+        <Grid2 size={3}>
+          <Typography>
+            {getFriendlyName(compData.type)}
+          </Typography>
+        </Grid2>
+        <Grid2 size={3}>
+          {subtypeOptions.length < 2 
+            ? 
+              <Typography>
+                {subtypeVal}
+              </Typography> 
+            : 
+              subtypeSelector()}
+        </Grid2>
+        <Grid2 size={2}>
+          <Typography>
+            Cable ID: {compData.cableId}
+          </Typography> 
+        </Grid2>
+        <Grid2 size={2}>
+          <Typography>
+            Nodes: {compData.nodeCount}
+          </Typography>
+        </Grid2>
+        <Grid2 size={1}>
+        {selectCompCheckbox()}
+        </Grid2>
+      </Grid2>
+      </Box>
+    )
+  }
+
+  const mobileDisplay = () => {
+    return(
+      <Box padding={2}>
+        <Grid2 container spacing={2} direction="row" wrap="nowrap" alignContent="center" alignItems="center" justifyContent="space-between">
+          <Grid2 size={5}>
+            <Typography>
+              {getFriendlyName(compData.type)}
+            </Typography>
+            <Typography>
+              Cable ID: {compData.cableId}
+            </Typography>
+            <Typography>
+              Nodes: {compData.nodeCount}
+            </Typography>
+          </Grid2>
+          <Grid2 size={5}>
+            {subtypeOptions.length < 2 
+              ? 
+                <Typography>
+                  {subtypeVal}
+                </Typography> 
+              : 
+                subtypeSelector()}
+          </Grid2>
+          <Grid2 size={2}>
+            {selectCompCheckbox()}
+          </Grid2>
+        </Grid2>
+      </Box>
+    )
+  }
+
   return (
     <React.Fragment>
-          <Box>
-            {getFriendlyName(compData.type)}
-            Cable ID: {compData.cableId}
-            Number of nodes: {compData.nodeCount}
-            {subtypeOptions.length < 2 ? subtypeVal : subtypeSelector()}
-            {selectCompCheckbox()}
-          </Box>
+      {isMobile ? mobileDisplay() : desktopDisplay()}
     </React.Fragment>
   )
 }
\ No newline at end of file
diff --git a/src/device/autoDetect/OneWire/ScannedOneWirePort.tsx b/src/device/autoDetect/OneWire/ScannedOneWirePort.tsx
index 4fd99d8..e035660 100644
--- a/src/device/autoDetect/OneWire/ScannedOneWirePort.tsx
+++ b/src/device/autoDetect/OneWire/ScannedOneWirePort.tsx
@@ -1,4 +1,4 @@
-import { Box, MenuItem, TextField } from "@mui/material"
+import { Box, MenuItem, TextField, Typography } from "@mui/material"
 import { extension, getFriendlyName, getSubtypes, Subtype } from "pbHelpers/ComponentType"
 import { pond } from "protobuf-ts/pond"
 import { quack } from "protobuf-ts/quack"
@@ -42,13 +42,16 @@ export default function ScannedOneWirePort(props: Props){
 
   return (
     <React.Fragment>
-      {portComponents.map((compData, i) => {
+      {portComponents.length > 0 ? portComponents.map((compData, i) => {
         return (
           <PortComponent key={i} compData={compData} componentSelect={(checked, component) => {
             componentSelected(checked, component)
           }}/>
         )
-      })}
+      }):
+      <Box>
+        <Typography>No Components Found</Typography>  
+      </Box>}
     </React.Fragment>
   )
 }
\ No newline at end of file
diff --git a/src/pages/Device.tsx b/src/pages/Device.tsx
index e444a83..0a4e89a 100644
--- a/src/pages/Device.tsx
+++ b/src/pages/Device.tsx
@@ -412,7 +412,16 @@ export default function DevicePage() {
                         />
                       </Grid>
                       {/* add grid card here for I2C detected components */}
-
+                      {(scannedAddresses?.i2c || scannedAddresses?.oneWire) &&
+                        <Grid size={{ xs: 12 }}>
+                          <DeviceScannedComponents 
+                            scannedComponents={scannedAddresses} 
+                            device={device} 
+                            availablePositions={availablePositions}
+                            availableOffsets={availableOffsets}
+                            refreshCallback={loadDevice}/>
+                        </Grid>
+                      }
                       {diagnosticComponents.map(comp => (
                         <Grid size={{ xs: 12 }} key={comp.key()}>
                           <ComponentDiagnostics

From 10308942ac9226e6d226f8b9b57d78c98dc5235e Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Tue, 4 Nov 2025 12:27:10 -0600
Subject: [PATCH 2/5] now passing the type to the remove function for scans

---
 src/device/autoDetect/DeviceScannedComponents.tsx | 8 ++++----
 src/providers/pond/deviceAPI.tsx                  | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/device/autoDetect/DeviceScannedComponents.tsx b/src/device/autoDetect/DeviceScannedComponents.tsx
index d666264..3448b86 100644
--- a/src/device/autoDetect/DeviceScannedComponents.tsx
+++ b/src/device/autoDetect/DeviceScannedComponents.tsx
@@ -207,8 +207,8 @@ export default function DeviceScannedComponents(props: Props){
     setComponents(cloneList)
   }
 
-  const removeScan = (key: string) => {
-    deviceAPI.removeFoundComponents(device.settings.deviceId, key)
+  const removeScan = (key: string, type: pond.ObjectType) => {
+    deviceAPI.removeFoundComponents(device.settings.deviceId, key, type)
     .then(resp => {
       console.log("Cleared this scan")
     }).catch(err => {
@@ -227,7 +227,7 @@ export default function DeviceScannedComponents(props: Props){
             <Typography sx={{fontWeight: 650}}>
               I2C Sensors
             </Typography>
-            <Button variant="contained" color="primary" onClick={()=>{removeScan(scannedI2C.key)}}>Clear Scan</Button>
+            <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 (
@@ -269,7 +269,7 @@ export default function DeviceScannedComponents(props: Props){
                   <Box  display="flex" justifyContent="space-between" alignItems={"center"}>
                     <Typography>Port: {portLabel}</Typography>
                     <Button variant="contained" color="primary" onClick={()=>{
-                      removeScan(scan.key)
+                      removeScan(scan.key, pond.ObjectType.OBJECT_TYPE_DETECT_ONEWIRE)
                     }}>Clear Port Scan</Button>
                   </Box>
                     <ScannedOneWirePort scan={scan} componentSelectionCallback={componentSelection}/>
diff --git a/src/providers/pond/deviceAPI.tsx b/src/providers/pond/deviceAPI.tsx
index f967774..56a0c0f 100644
--- a/src/providers/pond/deviceAPI.tsx
+++ b/src/providers/pond/deviceAPI.tsx
@@ -149,7 +149,7 @@ export interface IDeviceAPIContext {
     keys?: string[],
     types?: string[]
   ) => Promise<any>;
-  removeFoundComponents: (id: number, key: string, otherTeam?: string) => Promise<AxiosResponse<pond.RemoveFoundComponentsResponse>>;
+  removeFoundComponents: (id: number, key: string, type: pond.ObjectType, otherTeam?: string) => Promise<AxiosResponse<pond.RemoveFoundComponentsResponse>>;
 }
 
 export const DeviceAPIContext = createContext<IDeviceAPIContext>({} as IDeviceAPIContext);
@@ -989,7 +989,7 @@ export default function DeviceProvider(props: PropsWithChildren<Props>) {
     })
   }
 
-  const removeFoundComponents = (id: number, key: string, otherTeam?: string) => {
+  const removeFoundComponents = (id: number, key: string, type: pond.ObjectType, otherTeam?: string) => {
         let url = "/devices/" + id + "/removeFoundComponents/" + key;
     const view = otherTeam ? otherTeam : as
     if(view) url = url + "?as=" + view

From 8dcc0405581c9d359a5be695bbc8a88df39b6ca9 Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Tue, 4 Nov 2025 12:28:21 -0600
Subject: [PATCH 3/5] fixing the url for the api call

---
 src/providers/pond/deviceAPI.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/providers/pond/deviceAPI.tsx b/src/providers/pond/deviceAPI.tsx
index 56a0c0f..391caf7 100644
--- a/src/providers/pond/deviceAPI.tsx
+++ b/src/providers/pond/deviceAPI.tsx
@@ -990,9 +990,9 @@ export default function DeviceProvider(props: PropsWithChildren<Props>) {
   }
 
   const removeFoundComponents = (id: number, key: string, type: pond.ObjectType, otherTeam?: string) => {
-        let url = "/devices/" + id + "/removeFoundComponents/" + key;
+        let url = "/devices/" + id + "/removeFoundComponents/" + key + "?type=" + type;
     const view = otherTeam ? otherTeam : as
-    if(view) url = url + "?as=" + view
+    if(view) url = url + "&as=" + view
     return new Promise<AxiosResponse<pond.RemoveFoundComponentsResponse>>((resolve, reject) => {
       del<pond.RemoveFoundComponentsResponse>(pondURL(url)).then(resp => {
         return resolve(resp)

From efb3c9eb59d5413de77f7b366dc95bbd6a9fa91b Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Tue, 4 Nov 2025 12:29:08 -0600
Subject: [PATCH 4/5] use scanType instead of type

---
 src/providers/pond/deviceAPI.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/providers/pond/deviceAPI.tsx b/src/providers/pond/deviceAPI.tsx
index 391caf7..4a90b85 100644
--- a/src/providers/pond/deviceAPI.tsx
+++ b/src/providers/pond/deviceAPI.tsx
@@ -990,7 +990,7 @@ export default function DeviceProvider(props: PropsWithChildren<Props>) {
   }
 
   const removeFoundComponents = (id: number, key: string, type: pond.ObjectType, otherTeam?: string) => {
-        let url = "/devices/" + id + "/removeFoundComponents/" + key + "?type=" + type;
+        let url = "/devices/" + id + "/removeFoundComponents/" + key + "?scanType=" + type;
     const view = otherTeam ? otherTeam : as
     if(view) url = url + "&as=" + view
     return new Promise<AxiosResponse<pond.RemoveFoundComponentsResponse>>((resolve, reject) => {

From 14126fd7c5e60b41562d5cfbe57ada0a00f9138f Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Tue, 4 Nov 2025 14:16:40 -0600
Subject: [PATCH 5/5] adding button for clearing all of the scans, including
 ones that were replaced by new scans

---
 package-lock.json                             |  2 +-
 .../autoDetect/DeviceScannedComponents.tsx    | 28 +++++++++++++++++++
 src/pages/Device.tsx                          |  2 +-
 src/providers/pond/deviceAPI.tsx              | 19 +++++++++++--
 4 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f60c304..1bef6b0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10953,7 +10953,7 @@
     },
     "node_modules/protobuf-ts": {
       "version": "1.0.0",
-      "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#9dcc83dddad31d4a4d8a002ec31475cbb83f0689",
+      "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#910e6c4dd322a52a7f0c82d5bde650d8ccfff548",
       "dependencies": {
         "protobufjs": "^6.8.8"
       }
diff --git a/src/device/autoDetect/DeviceScannedComponents.tsx b/src/device/autoDetect/DeviceScannedComponents.tsx
index 3448b86..cda95ae 100644
--- a/src/device/autoDetect/DeviceScannedComponents.tsx
+++ b/src/device/autoDetect/DeviceScannedComponents.tsx
@@ -41,6 +41,7 @@ export default function DeviceScannedComponents(props: Props){
   const [currentStep, setCurrentStep] = useState(0)
   const [settingsValid, setSettingsValid] = useState(false);
   const [openDialog, setOpenDialog] = useState(false);
+  const [clearOpen, setClearOpen] = useState(false);
 
   useEffect(()=>{
     if (scannedComponents.i2c) setScannedI2C(scannedComponents.i2c)
@@ -216,11 +217,38 @@ export default function DeviceScannedComponents(props: Props){
     })
   }
 
+  const removeAllScans = () => {
+    deviceAPI.removeAllFoundComponents(device.settings.deviceId)
+    .then(resp => {
+      console.log("Cleared all scans")
+    }).catch(err => {
+      console.log("There was a problem clearing scans")
+    })
+  }
+
+  const clearWarning = () => {
+    return (
+      <ResponsiveDialog open={clearOpen} onClose={()=>{setClearOpen(false)}}>
+        <DialogTitle>Clear All Scans</DialogTitle>
+        <DialogContent>This action will clear all scans for this device.</DialogContent>
+        <DialogActions>
+          <Button variant="contained" onClick={()=>{setClearOpen(false)}}>Close</Button>
+          <Button variant="contained" color="primary" onClick={()=>{removeAllScans()}}>Continue</Button>
+        </DialogActions>
+      </ResponsiveDialog>
+    )
+  }
+
 
 
   return (
     <React.Fragment>
+      {clearWarning()}
       <Card raised sx={{padding: 1}}>
+        <Box display="flex" flexDirection="row" justifyContent="space-between" alignItems="center">
+          <Typography sx={{fontWeight: 650, fontSize: 25}}>Sensor Scan</Typography>
+          <Button variant="contained" color="primary" onClick={()=>{setClearOpen(true)}}>Clear</Button>
+        </Box>
         {scannedI2C !== undefined && 
           <Box marginBottom={5}>
           <Box justifyContent="space-between" display="flex">
diff --git a/src/pages/Device.tsx b/src/pages/Device.tsx
index 0a4e89a..7344659 100644
--- a/src/pages/Device.tsx
+++ b/src/pages/Device.tsx
@@ -170,7 +170,7 @@ export default function DevicePage() {
     deviceAPI.listFoundComponents(parseInt(deviceID))
       .then(resp => {
         console.log(resp.data)
-        if (resp.data.foundComponents){
+        if (resp.data.foundComponents?.i2c || resp.data.foundComponents?.oneWire){
           setScannedAddresses(pond.ListFoundComponentsResponse.fromObject(resp.data).foundComponents ?? undefined)
         }
       })
diff --git a/src/providers/pond/deviceAPI.tsx b/src/providers/pond/deviceAPI.tsx
index 4a90b85..241781b 100644
--- a/src/providers/pond/deviceAPI.tsx
+++ b/src/providers/pond/deviceAPI.tsx
@@ -149,6 +149,7 @@ export interface IDeviceAPIContext {
     keys?: string[],
     types?: string[]
   ) => Promise<any>;
+  removeAllFoundComponents: (id: number,otherTeam?: string) => Promise<AxiosResponse<pond.RemoveAllFoundComponentsResponse>>;
   removeFoundComponents: (id: number, key: string, type: pond.ObjectType, otherTeam?: string) => Promise<AxiosResponse<pond.RemoveFoundComponentsResponse>>;
 }
 
@@ -990,7 +991,7 @@ export default function DeviceProvider(props: PropsWithChildren<Props>) {
   }
 
   const removeFoundComponents = (id: number, key: string, type: pond.ObjectType, otherTeam?: string) => {
-        let url = "/devices/" + id + "/removeFoundComponents/" + key + "?scanType=" + type;
+    let url = "/devices/" + id + "/removeFoundComponents/" + key + "?scanType=" + type;
     const view = otherTeam ? otherTeam : as
     if(view) url = url + "&as=" + view
     return new Promise<AxiosResponse<pond.RemoveFoundComponentsResponse>>((resolve, reject) => {
@@ -1002,6 +1003,19 @@ export default function DeviceProvider(props: PropsWithChildren<Props>) {
     })
   }
 
+  const removeAllFoundComponents = (id: number, otherTeam?: string) => {
+    let url = "/devices/" + id + "/removeAllFoundComponents";
+    const view = otherTeam ? otherTeam : as
+    if(view) url = url + "?as=" + view
+    return new Promise<AxiosResponse<pond.RemoveAllFoundComponentsResponse>>((resolve, reject) => {
+      del<pond.RemoveAllFoundComponentsResponse>(pondURL(url)).then(resp => {
+        return resolve(resp)
+      }).catch(err => {
+        return reject(err)
+      })
+    })
+  }
+
   return (
     <DeviceAPIContext.Provider
       value={{
@@ -1051,7 +1065,8 @@ export default function DeviceProvider(props: PropsWithChildren<Props>) {
         detectI2C,
         detectOneWire,
         listFoundComponents,
-        removeFoundComponents
+        removeFoundComponents,
+        removeAllFoundComponents
       }}>
       {children}
     </DeviceAPIContext.Provider>