Skip to content

Commit 2ad0d61

Browse files
andchiindandchiind
committed
Use analysis id in the URL
1 parent 8abc62b commit 2ad0d61

File tree

5 files changed

+95
-33
lines changed

5 files changed

+95
-33
lines changed

‎frontend/src/pages/InspectionReportPage/SetInspectionIdHook.tsx‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,26 @@ export const useInspectionId = () => {
55
const [searchParams, setSearchParams] = useSearchParams()
66

77
const switchSelectedInspectionId = (inspectionId: string | undefined) => {
8-
setSearchParams((prev) => {
9-
if (inspectionId) prev.set('inspectionId', inspectionId)
10-
else prev.delete('inspectionId')
11-
return prev
12-
})
8+
setSearchParams(
9+
(prev) => {
10+
if (inspectionId) prev.set('inspectionId', inspectionId)
11+
else prev.delete('inspectionId')
12+
return prev
13+
},
14+
{ replace: true }
15+
)
1316
}
1417

15-
return { switchSelectedInspectionId }
18+
const switchSelectedAnalysisId = (analysisId: string | undefined) => {
19+
setSearchParams(
20+
(prev) => {
21+
if (analysisId) prev.set('analysisId', analysisId)
22+
else prev.delete('analysisId')
23+
return prev
24+
},
25+
{ replace: true }
26+
)
27+
}
28+
29+
return { switchSelectedInspectionId, switchSelectedAnalysisId }
1630
}

‎frontend/src/pages/MissionPage/AnalysisResultView.tsx‎

Lines changed: 34 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,11 @@ import {
1818
LargeImagePendingPlaceholder,
1919
} from 'pages/InspectionReportPage/InspectionReportImage'
2020
import styled from 'styled-components'
21+
import { useInspectionId } from 'pages/InspectionReportPage/SetInspectionIdHook'
2122

2223
interface InspectionDialogViewProps {
23-
selectedTask: Task
24-
onClose: () => void
24+
selectedAnalysisId: string
25+
tasks: Task[]
2526
}
2627
const StyledImage = styled.img<{ $otherContentHeight?: string }>`
2728
max-height: calc(60vh - ${(props) => props.$otherContentHeight});
@@ -38,60 +39,77 @@ const AnalysisImage = ({ inspectionId }: { inspectionId: string }) => {
3839
return <StyledImage $otherContentHeight="0px" src={data} />
3940
}
4041

41-
export const AnalysisResultDialogView = ({ selectedTask, onClose }: InspectionDialogViewProps) => {
42+
export const AnalysisResultDialogView = ({ selectedAnalysisId, tasks }: InspectionDialogViewProps) => {
4243
const { TranslateText } = useLanguageContext()
44+
const { switchSelectedAnalysisId } = useInspectionId()
45+
46+
const onClose = () => switchSelectedAnalysisId(undefined)
47+
48+
const currentTask = tasks.find((t) => t.inspection.id == selectedAnalysisId)
49+
50+
if (!currentTask) {
51+
return (
52+
<StyledDialog open={true} isDismissable onClose={onClose}>
53+
<StyledDialogContent>
54+
<StyledDialogInspectionView>
55+
<LargeImageErrorPlaceholder errorMessage="No analysis could be found" />
56+
</StyledDialogInspectionView>
57+
</StyledDialogContent>
58+
</StyledDialog>
59+
)
60+
}
4361

4462
return (
4563
<StyledDialog open={true} isDismissable onClose={onClose}>
4664
<StyledDialogContent>
4765
<StyledDialogHeader>
4866
<Typography variant="accordion_header" group="ui">
49-
{TranslateText('Analysis result for task') + ' ' + (selectedTask.taskOrder + 1)}
67+
{TranslateText('Analysis result for task') + ' ' + (currentTask.taskOrder + 1)}
5068
</Typography>
5169
<StyledCloseButton variant="ghost" onClick={onClose}>
5270
<Icon name={Icons.Clear} size={24} />
5371
</StyledCloseButton>
5472
</StyledDialogHeader>
5573
<StyledDialogInspectionView>
5674
<div>
57-
{selectedTask.inspection.analysisResult?.storageAccount ? (
58-
<AnalysisImage inspectionId={selectedTask.inspection.isarInspectionId} />
75+
{currentTask.inspection.analysisResult?.storageAccount ? (
76+
<AnalysisImage inspectionId={currentTask.inspection.isarInspectionId} />
5977
) : (
6078
<>{/* No image to display*/}</>
6179
)}
6280
<StyledBottomContent>
6381
<StyledInfoContent>
6482
<Typography variant="caption">{TranslateText('Tag') + ':'}</Typography>
65-
<Typography variant="body_short">{selectedTask.tagId}</Typography>
83+
<Typography variant="body_short">{currentTask.tagId}</Typography>
6684
</StyledInfoContent>
67-
{selectedTask.description && (
85+
{currentTask.description && (
6886
<StyledInfoContent>
6987
<Typography variant="caption">{TranslateText('Description') + ':'}</Typography>
70-
<Typography variant="body_short">{selectedTask.description}</Typography>
88+
<Typography variant="body_short">{currentTask.description}</Typography>
7189
</StyledInfoContent>
7290
)}
73-
{selectedTask.endTime && (
91+
{currentTask.endTime && (
7492
<StyledInfoContent>
7593
<Typography variant="caption">{TranslateText('Timestamp') + ':'}</Typography>
7694
<Typography variant="body_short">
77-
{formatDateTime(selectedTask.endTime, 'dd.MM.yy - HH:mm')}
95+
{formatDateTime(currentTask.endTime, 'dd.MM.yy - HH:mm')}
7896
</Typography>
7997
</StyledInfoContent>
8098
)}
81-
{selectedTask.inspection.analysisResult?.warning && (
99+
{currentTask.inspection.analysisResult?.warning && (
82100
<StyledInfoContent>
83101
<Typography variant="caption">{TranslateText('Warning') + ':'}</Typography>
84102
<Typography variant="body_short">
85-
{selectedTask.inspection.analysisResult.warning}
103+
{currentTask.inspection.analysisResult.warning}
86104
</Typography>
87105
</StyledInfoContent>
88106
)}
89-
{selectedTask.inspection.analysisResult?.confidence &&
90-
selectedTask.inspection.analysisResult?.unit && (
107+
{currentTask.inspection.analysisResult?.confidence &&
108+
currentTask.inspection.analysisResult?.unit && (
91109
<StyledInfoContent>
92110
<Typography variant="caption">{TranslateText('Confidence') + ':'}</Typography>
93111
<Typography variant="body_short">
94-
{selectedTask.inspection.analysisResult.confidence + '%'}
112+
{currentTask.inspection.analysisResult.confidence + '%'}
95113
</Typography>
96114
</StyledInfoContent>
97115
)}

‎frontend/src/pages/MissionPage/MissionPage.tsx‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { StyledPage } from 'components/Styles/StyledComponents'
1616
import { InspectionDialogView } from '../InspectionReportPage/InspectionView'
1717
import { InspectionOverviewSection } from '../InspectionReportPage/InspectionOverview'
1818
import { TaskTableAndMap } from './TaskTableAndMap'
19+
import { AnalysisResultDialogView } from './AnalysisResultView'
1920

2021
const StyledMissionPageContent = styled.div`
2122
display: flex;
@@ -35,7 +36,15 @@ export const VideoStreamSection = styled.div`
3536
gap: 1rem;
3637
`
3738

38-
export const MissionPage = ({ missionId, inspectionId }: { missionId: string; inspectionId: string | undefined }) => {
39+
export const MissionPage = ({
40+
missionId,
41+
inspectionId,
42+
analysisId,
43+
}: {
44+
missionId: string
45+
inspectionId: string | undefined
46+
analysisId: string | undefined
47+
}) => {
3948
const { TranslateText } = useLanguageContext()
4049
const { setAlert, setListAlert } = useAlertContext()
4150
const [videoMediaStreams, setVideoMediaStreams] = useState<MediaStreamTrack[]>([])
@@ -110,6 +119,12 @@ export const MissionPage = ({ missionId, inspectionId }: { missionId: string; in
110119
tasks={selectedMission.tasks}
111120
/>
112121
)}
122+
{analysisId && (
123+
<AnalysisResultDialogView
124+
selectedAnalysisId={analysisId}
125+
tasks={selectedMission.tasks}
126+
/>
127+
)}
113128
<InspectionOverviewSection tasks={selectedMission.tasks} />
114129
</StyledCardsWidth>
115130
</StyledMissionPageContent>
@@ -122,9 +137,11 @@ export const MissionPage = ({ missionId, inspectionId }: { missionId: string; in
122137
export const SimpleMissionPage = ({
123138
missionId,
124139
inspectionId,
140+
analysisId,
125141
}: {
126142
missionId: string
127143
inspectionId: string | undefined
144+
analysisId: string | undefined
128145
}) => {
129146
const { TranslateText } = useLanguageContext()
130147
const { setAlert } = useAlertContext()
@@ -188,6 +205,9 @@ export const SimpleMissionPage = ({
188205
{inspectionId && (
189206
<InspectionDialogView selectedInspectionId={inspectionId} tasks={selectedMission.tasks} />
190207
)}
208+
{analysisId && (
209+
<AnalysisResultDialogView selectedAnalysisId={analysisId} tasks={selectedMission.tasks} />
210+
)}
191211
<InspectionOverviewSection tasks={selectedMission.tasks} />
192212
</StyledCardsWidth>
193213
</StyledMissionPageContent>

‎frontend/src/pages/MissionPage/TaskOverview/TaskAnalysisDisplay.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { Button, Typography } from '@equinor/eds-core-react'
2-
import { useState } from 'react'
32
import { Task } from 'models/Task'
4-
import { AnalysisResultDialogView } from '../AnalysisResultView'
53
import { useLanguageContext } from 'components/Contexts/LanguageContext'
64
import styled from 'styled-components'
5+
import { useInspectionId } from 'pages/InspectionReportPage/SetInspectionIdHook'
76

87
const Styledbutton = styled(Button)`
98
&:hover {
@@ -13,24 +12,24 @@ const Styledbutton = styled(Button)`
1312
`
1413

1514
export const TaskAnalysisDisplay = ({ task }: { task: Task }) => {
16-
const [dialogOpen, setDialogOpen] = useState(false)
1715
const { TranslateText } = useLanguageContext()
16+
const { switchSelectedAnalysisId } = useInspectionId()
1817

1918
const analysis = task.inspection.analysisResult
2019

21-
const handleOpenDialog = () => setDialogOpen(true)
22-
const handleCloseDialog = () => setDialogOpen(false)
23-
2420
return (
2521
<>
2622
{analysis?.analysisType && (
27-
<Styledbutton variant="ghost" color="danger" onClick={handleOpenDialog}>
23+
<Styledbutton
24+
variant="ghost"
25+
color="danger"
26+
onClick={() => switchSelectedAnalysisId(task.inspection.id)}
27+
>
2828
<Typography link color="danger">
2929
{TranslateText('Result')}
3030
</Typography>
3131
</Styledbutton>
3232
)}
33-
{dialogOpen && <AnalysisResultDialogView selectedTask={task} onClose={handleCloseDialog} />}
3433
</>
3534
)
3635
}

‎frontend/src/pages/PageRouter.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const PageRouter = ({ prefix }: PageRouterProps) => {
2222
const [searchParams, setSearchParams] = useSearchParams()
2323
const [id, setId] = useState<string | undefined>(undefined)
2424
const [inspectionId, setInspectionId] = useState<string | undefined>(undefined)
25+
const [analysisId, setAnalysisId] = useState<string | undefined>(undefined)
2526

2627
useEffect(() => {
2728
if (!searchParams || searchParams.size < 1) {
@@ -31,6 +32,7 @@ const PageRouter = ({ prefix }: PageRouterProps) => {
3132

3233
const id = searchParams.get('id')
3334
const inspectionId = searchParams.get('inspectionId')
35+
const analysisId = searchParams.get('analysisId')
3436
if (!id || !ValidateUUID(id)) {
3537
navigate(`${config.FRONTEND_BASE_ROUTE}/page-not-found`)
3638
return
@@ -44,16 +46,25 @@ const PageRouter = ({ prefix }: PageRouterProps) => {
4446
} else {
4547
setInspectionId(undefined)
4648
}
49+
if (analysisId) {
50+
if (!ValidateUUID(analysisId)) {
51+
navigate(`${config.FRONTEND_BASE_ROUTE}/page-not-found`)
52+
return
53+
}
54+
setAnalysisId(analysisId)
55+
} else {
56+
setAnalysisId(undefined)
57+
}
4758
setId(id)
4859
}, [searchParams])
4960

5061
if (!id) return <></>
5162

5263
switch (prefix) {
5364
case PageRouterPrefixes.SimpleMission:
54-
return <SimpleMissionPage missionId={id} inspectionId={inspectionId} />
65+
return <SimpleMissionPage missionId={id} inspectionId={inspectionId} analysisId={analysisId} />
5566
case PageRouterPrefixes.Mission:
56-
return <MissionPage missionId={id} inspectionId={inspectionId} />
67+
return <MissionPage missionId={id} inspectionId={inspectionId} analysisId={analysisId} />
5768
case PageRouterPrefixes.MissionDefinition:
5869
return <MissionDefinitionPage missionId={id} />
5970
case PageRouterPrefixes.Robot:

0 commit comments

Comments
 (0)