Visual indexing for the mission queue

frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueCard.tsx

@@ -1,14 +1,15 @@
-import { Button, Card, Checkbox, Dialog, Icon, Typography, DotProgress } from '@equinor/eds-core-react'
+import { Button, Card, Dialog, Icon, Typography, DotProgress } from '@equinor/eds-core-react'
 import { config } from 'config'
 import { tokens } from '@equinor/eds-tokens'
-import { Mission, dummyMission } from 'models/Mission'
+import { Mission, placeholderMission } from 'models/Mission'
 import styled from 'styled-components'
 import { useNavigate } from 'react-router-dom'
 import { useState } from 'react'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { Icons } from 'utils/icons'
 
 interface MissionQueueCardProps {
+    order: number
     mission: Mission
     onDeleteMission: (mission: Mission) => void
 }
@@ -18,7 +19,7 @@ interface MissionDisplayProps {
 }
 
 const StyledMissionCard = styled(Card)`
-    width: 900px;
+    width: 880px;
     display: flex;
 `
 const HorizontalContent = styled.div`
@@ -28,8 +29,9 @@ const HorizontalContent = styled.div`
 `
 const HorizontalNonButtonContent = styled.div`
     display: grid;
-    grid-template-columns: 50px 400px auto 90px 180px;
+    grid-template-columns: 20px 400px auto 90px 180px;
     align-items: center;
+    padding-left: 10px;
 `
 
 const StyledConfirmDialog = styled.div`
@@ -41,24 +43,41 @@ const StyledButtonSection = styled.div`
     grid-template-columns: auto auto;
 `
 
-export function MissionQueueCard({ mission, onDeleteMission }: MissionQueueCardProps) {
+const PaddingLeft = styled.div`
+    padding-left: 20px;
+`
+
+const CircularCard = styled(Card)`
+    height: 24px;
+    width: 24px;
+    border-radius: 50%;
+    justify-content: center;
+    align-items: center;
+`
+
+export function MissionQueueCard({ order, mission, onDeleteMission }: MissionQueueCardProps) {
     const { TranslateText } = useLanguageContext()
     let navigate = useNavigate()
     const routeChange = () => {
         const path = `${config.FRONTEND_BASE_ROUTE}/mission/${mission.id}`
         navigate(path)
     }
     const [confirmDeleteDialogOpen, setConfirmDeleteDialogOpen] = useState<boolean>(false)
+    const fillColor = tokens.colors.infographic.primary__energy_red_21.hex
     let numberOfTasks = 0
     mission.tasks.forEach((task) => (numberOfTasks += task.inspections.length))
     return (
         <StyledMissionCard key={mission.id} variant="default" style={{ boxShadow: tokens.elevation.raised }}>
             <HorizontalContent>
                 <HorizontalNonButtonContent onClick={routeChange}>
-                    <Checkbox />
+                    <CircularCard style={{ background: fillColor }}>
+                        <Typography variant="body_short_bold">{order}</Typography>
+                    </CircularCard>
 
-                    {mission === dummyMission ? (
-                        <DotProgress size={64} color="primary" />
+                    {mission === placeholderMission ? (
+                        <PaddingLeft>
+                            <DotProgress size={48} color="primary" />
+                        </PaddingLeft>
                     ) : (
                         <Button variant="ghost" fullWidth>
                             <Typography variant="body_short_bold">{mission.name}</Typography>

frontend/src/components/Pages/FrontPage/MissionOverview/MissionQueueView.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { MissionQueueCard } from './MissionQueueCard'
 import { BackendAPICaller } from 'api/ApiCaller'
 import { useEffect, useState } from 'react'
-import { Mission, dummyMission } from 'models/Mission'
+import { Mission, placeholderMission } from 'models/Mission'
 import { EmptyMissionQueuePlaceholder } from './NoMissionPlaceholder'
 import { ScheduleMissionDialog } from './ScheduleMissionDialog'
 import { Robot } from 'models/Robot'
@@ -132,22 +132,27 @@ export function MissionQueueView({ refreshInterval }: RefreshProps) {
         })
     }, [missionQueue, ongoingMissions])
 
-    const missionQueueDisplay = missionQueue.map(function (mission, index) {
-        return <MissionQueueCard key={index} mission={mission} onDeleteMission={onDeleteMission} />
-    })
-
-    const loadingQueueDisplay = () => {
-        return <MissionQueueCard key={'test'} mission={dummyMission} onDeleteMission={() => {}} />
-    }
+    const missionQueueDisplay = missionQueue.map((mission, index) => (
+        <MissionQueueCard key={index} order={index + 1} mission={mission} onDeleteMission={onDeleteMission} />
+    ))
+
+    const loadingQueueDisplay = (
+        <MissionQueueCard
+            key={'placeholder'}
+            order={missionQueue.length + 1}
+            mission={placeholderMission}
+            onDeleteMission={() => {}}
+        />
+    )
 
     return (
         <StyledMissionView>
             <Typography variant="h1" color="resting">
                 {TranslateText('Mission Queue')}
             </Typography>
             <MissionTable>
-                {loadingMissionNames.size > 0 && loadingQueueDisplay()}
                 {missionQueue.length > 0 && missionQueueDisplay}
+                {loadingMissionNames.size > 0 && loadingQueueDisplay}
                 {loadingMissionNames.size === 0 && missionQueue.length === 0 && <EmptyMissionQueuePlaceholder />}
             </MissionTable>
             <MissionButtonView>

frontend/src/models/Mission.ts

@@ -1,5 +1,5 @@
 import { MapMetadata } from './MapMetadata'
-import { Robot, dummyRobot } from './Robot'
+import { Robot, placeholderRobot } from './Robot'
 import { Task } from './Task'
 
 export enum MissionStatus {
@@ -41,10 +41,10 @@ export interface Mission {
     tasks: Task[]
     map?: MapMetadata
 }
-export const dummyMission: Mission = {
-    id: 'dummyId',
-    name: 'dummyMission',
-    robot: dummyRobot,
+export const placeholderMission: Mission = {
+    id: 'placeholderId',
+    name: 'placeholderMission',
+    robot: placeholderRobot,
     status: MissionStatus.Pending,
     isCompleted: false,
     desiredStartTime: new Date(),

frontend/src/models/Robot.ts

@@ -1,7 +1,7 @@
 import { Area } from './Area'
 import { BatteryStatus } from './Battery'
 import { Pose } from './Pose'
-import { RobotModel, dummyRobotModel } from './RobotModel'
+import { RobotModel, placeholderRobotModel } from './RobotModel'
 import { VideoStream } from './VideoStream'
 
 export enum RobotStatus {
@@ -29,9 +29,9 @@ export interface Robot {
     isarUri?: string
     currentArea?: Area
 }
-export const dummyRobot: Robot = {
-    id: 'dummyRobotId',
-    model: dummyRobotModel,
-    currentInstallation: 'DummyInstallation',
+export const placeholderRobot: Robot = {
+    id: 'placeholderRobotId',
+    model: placeholderRobotModel,
+    currentInstallation: 'PlaceholderInstallation',
     status: RobotStatus.Available,
 }

frontend/src/models/RobotModel.ts

@@ -16,8 +16,8 @@ export interface RobotModel {
     upperPressureWarningThreshold: number
     lowerPressureWarningThreshold: number
 }
-export const dummyRobotModel: RobotModel = {
-    id: 'dummyModelId',
+export const placeholderRobotModel: RobotModel = {
+    id: 'placeholderModelId',
     type: RobotType.Robot,
     upperPressureWarningThreshold: 100,
     lowerPressureWarningThreshold: 10,