Skip to content

refactor(well-show): unify floating-label info cards #230

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jirhiker wants to merge 5 commits into from
Closed

refactor(well-show): unify floating-label info cards #230

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e0240d4
refactor(well-info): Simplify layout and enhance FieldRow component f…
jirhiker Mar 30, 2026
18c6c01
refactor(ocotillo): Update dataset icon to use DatasetOutlined for co…
jirhiker Mar 30, 2026
00789ba
refactor(core-well-info): Simplify InfoRow component usage for latitu…
jirhiker Mar 30, 2026
f4687ce
refactor(equipment): Replace DetailRow with DetailField for improved …
jirhiker Mar 30, 2026
7b5b9c4
Merge branch 'staging' into core-well-information
jirhiker Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 32 additions & 7 deletions src/components/WellShow/ConstructionInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,16 +54,41 @@ const Section = ({ children }: { children: React.ReactNode }) => (
const FieldRow = ({ label, value }: { label: string; value: string }) => (
<Box
sx={{
display: 'grid',
gridTemplateColumns: { xs: '1fr', sm: '170px 1fr' },
gap: 0.75,
alignItems: 'start',
position: 'relative',
border: 1,
borderColor: 'divider',
borderRadius: 1.5,
px: 1.5,
pt: 1.75,
pb: 1.25,
backgroundColor: 'background.paper',
}}
>
<Typography variant="caption" color="text.secondary" fontWeight={700}>
<Typography
variant="caption"
color="text.secondary"
fontWeight={700}
sx={{
position: 'absolute',
top: 0,
left: 10,
px: 0.5,
transform: 'translateY(-50%)',
backgroundColor: 'background.paper',
lineHeight: 1,
}}
>
{label}
</Typography>
<Typography variant="body2">{value}</Typography>
<Typography
variant="body2"
sx={{
whiteSpace: 'pre-line',
minHeight: '1.25rem',
}}
>
{value}
</Typography>
</Box>
)

Expand All @@ -78,7 +103,7 @@ const FieldGroup = ({
}) => (
<Box>
<FieldRow label={label} value={value} />
<Box sx={{ pl: { xs: 0, sm: '170px' }, pt: 0.5 }}>
<Box sx={{ px: 1.5, pt: 0.5 }}>
<Typography
variant="body2"
color="text.secondary"
Expand Down
61 changes: 40 additions & 21 deletions src/components/WellShow/Equipment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,31 +223,31 @@ export const EquipmentAccordion = ({
}}
>
<DetailSection title="Sensor Details">
<DetailRow
<DetailField
label="Model"
value={selectedEquipment.sensor_model}
/>
<DetailRow
<DetailField
label="Serial No"
value={selectedEquipment.serial_no}
/>
</DetailSection>

<DetailSection title="Deployment">
<DetailRow
<DetailField
label="Install"
value={
formatAppDate(selectedEquipment.installation_date) ||
'N/A'
}
/>
<DetailRow
<DetailField
label="Remove"
value={
formatAppDate(selectedEquipment.removal_date) || 'N/A'
}
/>
<DetailRow
<DetailField
label="Cable Len."
value={
selectedEquipment.hanging_cable_length != null
Expand All @@ -258,7 +258,7 @@ export const EquipmentAccordion = ({
</DetailSection>

<DetailSection title="Recording">
<DetailRow
<DetailField
label="Interval"
value={
selectedEquipment.recording_interval_display || 'N/A'
Expand All @@ -267,12 +267,15 @@ export const EquipmentAccordion = ({
</DetailSection>

<DetailSection title="Notes">
<Typography variant="body2" color="text.secondary">
{selectedEquipment.notes &&
selectedEquipment.notes !== '-'
? selectedEquipment.notes
: 'N/A'}
</Typography>
<DetailField
label="Notes"
value={
selectedEquipment.notes &&
selectedEquipment.notes !== '-'
? selectedEquipment.notes
: 'N/A'
}
/>
</DetailSection>
</Box>
</Stack>
Expand Down Expand Up @@ -303,25 +306,41 @@ const DetailSection = ({
</Box>
)

const DetailRow = ({ label, value }: { label: string; value: string }) => (
const DetailField = ({ label, value }: { label: string; value: string }) => (
<Box
sx={{
display: 'grid',
gridTemplateColumns: '1fr',
gap: 0.75,
alignItems: 'start',
position: 'relative',
border: 1,
borderColor: 'divider',
borderRadius: 1.5,
px: 1.5,
pt: 1.75,
pb: 1.25,
backgroundColor: 'background.paper',
minWidth: 0,
}}
>
<Typography variant="caption" color="text.secondary" fontWeight={700}>
<Typography
variant="caption"
color="text.secondary"
fontWeight={700}
sx={{
position: 'absolute',
top: 0,
left: 10,
px: 0.5,
transform: 'translateY(-50%)',
backgroundColor: 'background.paper',
lineHeight: 1,
}}
>
{label}
</Typography>
<Typography
variant="body2"
sx={{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'pre-line',
minHeight: '1.25rem',
minWidth: 0,
}}
>
Expand Down
91 changes: 61 additions & 30 deletions src/components/WellShow/GeologyInformation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,40 +10,71 @@ export const GeologyInformationAccordion = ({ well }: { well?: IWell }) => {
</Typography>
</Box>
<Box sx={{ p: 2 }}>
<Stack spacing={2}>
<Box sx={{ display: 'flex', gap: 1, alignItems: 'baseline' }}>
<Typography variant="body2" component="span">
Formation Completion Code:
</Typography>
<Typography variant="body2" color="text.secondary" component="span">
{well?.formation_completion_code || 'N/A'}
</Typography>
</Box>
<Box sx={{ display: 'flex', gap: 1, alignItems: 'baseline', flexWrap: 'wrap' }}>
<Typography variant="body2" component="span">
Aquifer Systems:
</Typography>
<Typography variant="body2" color="text.secondary" component="span">
{(well?.aquifers ?? [])
<Stack spacing={1.25}>
<FieldRow
label="Formation Completion Code"
value={well?.formation_completion_code || 'N/A'}
/>
<FieldRow
label="Aquifer Systems"
value={
(well?.aquifers ?? [])
?.map((a) => a?.aquifer_system)
?.filter(Boolean)
?.join(', ') || 'N/A'}
</Typography>
</Box>
<Box sx={{ display: 'flex', gap: 1, alignItems: 'baseline', flexWrap: 'wrap' }}>
<Typography variant="body2" component="span">
Aquifer Types:
</Typography>
<Typography variant="body2" color="text.secondary" component="span">
{well?.aquifers && well.aquifers.length > 0
? [
...new Set(well.aquifers.flatMap((a) => a.aquifer_types)),
].join(', ')
: 'N/A'}
</Typography>
</Box>
?.join(', ') || 'N/A'
}
/>
<FieldRow
label="Aquifer Types"
value={
well?.aquifers && well.aquifers.length > 0
? [...new Set(well.aquifers.flatMap((a) => a.aquifer_types))].join(', ')
: 'N/A'
}
/>
</Stack>
</Box>
</Paper>
)
}

const FieldRow = ({ label, value }: { label: string; value: string }) => (
<Box
sx={{
position: 'relative',
border: 1,
borderColor: 'divider',
borderRadius: 1.5,
px: 1.5,
pt: 1.75,
pb: 1.25,
backgroundColor: 'background.paper',
}}
>
<Typography
variant="caption"
color="text.secondary"
fontWeight={700}
sx={{
position: 'absolute',
top: 0,
left: 10,
px: 0.5,
transform: 'translateY(-50%)',
backgroundColor: 'background.paper',
lineHeight: 1,
}}
>
{label}
</Typography>
<Typography
variant="body2"
sx={{
whiteSpace: 'pre-line',
minHeight: '1.25rem',
}}
>
{value}
</Typography>
</Box>
)
Loading
Loading