(0.9.17) Manual Download Generation + UX Improvements (#589)

* DPO3DPKRT-755/collection ID added to Subject search and listing results (#588) * DPO3DPKRT-798/manual execution generate downloads (#586) * DPO3DPKRT-808/cleaner model details during ingest (#587)
Smithsonian · May 13, 2024 · aa7535c · aa7535c
1 parent d084a09
commit aa7535c
Show file tree

Hide file tree

Showing 30 changed files with 969 additions and 98 deletions.
diff --git a/client/src/api/index.ts b/client/src/api/index.ts
@@ -7,7 +7,8 @@
  */
 enum API_ROUTES {
     LOGIN = 'auth/login',
-    LOGOUT = 'auth/logout'
+    LOGOUT = 'auth/logout',
+    GEN_DOWNLOADS = 'api/scene/gen-downloads'
 }
 
 export type AuthResponseType = {
@@ -16,6 +17,13 @@ export type AuthResponseType = {
     originalUrl?: string;
 };
 
+export type RequestResponse = {
+    success: boolean;
+    message?: string;
+    originalUrl?: string;
+    data?: any;
+};
+
 export default class API {
     static async login(email: string, password: string): Promise<AuthResponseType> {
         const body = JSON.stringify({ email, password });
@@ -31,6 +39,20 @@ export default class API {
         return this.request(API_ROUTES.LOGOUT);
     }
 
+    static async generateDownloads(idSystemObject: number, statusOnly: boolean = false): Promise<RequestResponse> {
+        // initiates the generate downloads routine and either runs the recipe with the given id or returns its status.
+        // idSystemObject = the SystemObject id for the Packrat Scene making this request
+        const body = JSON.stringify({ idSystemObject });
+
+        let options;
+        if(statusOnly)
+            options = { method: 'GET' };
+        else
+            options = { method: 'POST', body };
+
+        return this.request(`${API_ROUTES.GEN_DOWNLOADS}?id=${idSystemObject}`, options);
+    }
+
     static async request(route: string, options: RequestInit = {}): Promise<any> {
         const serverEndpoint = API.serverEndpoint();
         const defaultOptions: RequestInit = {
@@ -41,7 +63,17 @@ export default class API {
             ...options
         };
 
-        return fetch(`${serverEndpoint}/${route}`, defaultOptions).then(response => response.json());
+        // TODO: return an error response
+        return fetch(`${serverEndpoint}/${route}`, defaultOptions)
+            .then(response => {
+                // Check if the response returned a successful status code
+                if (!response.ok)
+                    return { success: false, message: response.statusText };
+                return response.json(); // Assuming the server responds with JSON
+            })
+            .catch(error => {
+                console.error(`[Packrat] could not complete request (${route}) due to error: ${error}`);
+            });
     }
 
     static serverEndpoint(): string {

diff --git a/client/src/pages/Ingestion/components/Metadata/Control/SubtitleControl.tsx b/client/src/pages/Ingestion/components/Metadata/Control/SubtitleControl.tsx
@@ -21,9 +21,10 @@ const useStyles = makeStyles(({ palette, typography }) => ({
         display: 'flex',
         flexDirection: 'column',
         backgroundColor: ({ hasPrimaryTheme, hasError }: { hasPrimaryTheme: boolean, hasError: boolean }) => hasError ? '#e57373' : hasPrimaryTheme ? palette.primary.light : palette.secondary.light,
-        width: 'fit-content',
+        width: '100%',
         minWidth: 300,
-        borderRadius: 5
+        borderRadius: 5,
+        paddingBottom: '0.5rem'
     },
     selected: {
         cursor: 'pointer',

diff --git a/client/src/pages/Ingestion/components/Metadata/Model/ObjectMeshTable.tsx b/client/src/pages/Ingestion/components/Metadata/Model/ObjectMeshTable.tsx
@@ -17,7 +17,8 @@ const useStyles = makeStyles(({ palette }) => ({
         width: 'fit-content',
         height: 'fit-content',
         padding: '5px',
-        outline: '1px solid rgba(141, 171, 196, 0.4)'
+        outline: '1px solid rgba(141, 171, 196, 0.4)',
+        marginRight: '1rem'
     },
     caption: {
         flex: '1 1 0%',
@@ -84,7 +85,6 @@ function ObjectMeshTable({ modelObjects }): React.ReactElement {
         alignItems: 'center',
         columnGap: 10,
     };
-
     return (
         <>
             {modelObjects.map(modelObject => {

diff --git a/client/src/pages/Ingestion/components/Metadata/Model/index.tsx b/client/src/pages/Ingestion/components/Metadata/Model/index.tsx
@@ -7,7 +7,7 @@
  *
  * This component renders the metadata fields specific to model asset.
  */
-import { Box, makeStyles, Typography, Table, TableBody, TableCell, TableContainer, TableRow, Paper, Select, MenuItem, Tooltip } from '@material-ui/core';
+import { Box, makeStyles, Typography, Table, TableBody, TableCell, TableContainer, TableRow, Paper, Select, MenuItem, Tooltip, IconButton, Collapse } from '@material-ui/core';
 import React, { useState, useEffect } from 'react';
 import { AssetIdentifiers, DateInputField, ReadOnlyRow, TextArea } from '../../../../../components';
 import { StateIdentifier, StateRelatedObject, useSubjectStore, useMetadataStore, useVocabularyStore, useRepositoryStore, FieldErrors } from '../../../../../store';
@@ -28,6 +28,10 @@ import clsx from 'clsx';
 import lodash from 'lodash';
 import { toast } from 'react-toastify';
 
+// icons
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
+
 const useStyles = makeStyles(({ palette }) => ({
     container: {
         marginTop: 20
@@ -40,7 +44,8 @@ const useStyles = makeStyles(({ palette }) => ({
         width: 'fit-content',
         height: 'fit-content',
         padding: '5px',
-        outline: '1px solid rgba(141, 171, 196, 0.4)'
+        outline: '1px solid rgba(141, 171, 196, 0.4)',
+        marginRight: '1rem'
     },
     dataEntry: {
         display: 'flex',
@@ -147,6 +152,7 @@ function Model(props: ModelProps): React.ReactElement {
         }
     ]);
     const [sceneGenerateDisabled, setSceneGenerateDisabled] = useState<boolean>(false);
+    const [showDetails, setShowDetails] = useState<boolean>(true);
 
     const urlParams = new URLSearchParams(window.location.search);
     const idAssetVersion = urlParams.get('fileId');
@@ -364,7 +370,7 @@ function Model(props: ModelProps): React.ReactElement {
                 <Box className={classes.modelDetailsAndSubtitleContainer}>
                     {!idAsset && (
                         <>
-                            <Box style={{ marginBottom: 10 }}>
+                            <Box style={{ marginBottom: 10, border: '1px solid rgba(141, 171, 196, 0.4)' }}>
                                 <SubtitleControl
                                     subtitles={model.subtitles}
                                     objectName={model.name}
@@ -486,27 +492,62 @@ function Model(props: ModelProps): React.ReactElement {
                             </TableContainer>
                         </Box>
 
-                        <Box className={classes.notRequiredFields}>
+                        <Box className={classes.notRequiredFields} style={{ paddingBottom: '1rem' }}>
                             <Box className={classes.caption}>
                                 <Typography variant='caption'>Model</Typography>
                             </Box>
                             <Box className={classes.readOnlyRowsContainer}>
                                 <ReadOnlyRow label='Vertex Count' value={ingestionModel?.CountVertices} paddingString='0px' containerStyle={readOnlyContainerProps} />
-                                <ReadOnlyRow label='Face Count' value={ingestionModel?.CountFaces} paddingString='0px' containerStyle={readOnlyContainerProps} />
                                 <ReadOnlyRow label='Triangle Count' value={ingestionModel?.CountTriangles} paddingString='0px' containerStyle={readOnlyContainerProps} />
-                                <ReadOnlyRow label='Animation Count' value={ingestionModel?.CountAnimations} paddingString='0px' containerStyle={readOnlyContainerProps} />
-                                <ReadOnlyRow label='Camera Count' value={ingestionModel?.CountCameras} paddingString='0px' containerStyle={readOnlyContainerProps} />
-                                <ReadOnlyRow label='Light Count' value={ingestionModel?.CountLights} paddingString='0px' containerStyle={readOnlyContainerProps} />
                                 <ReadOnlyRow label='Material Count' value={ingestionModel?.CountMaterials} paddingString='0px' containerStyle={readOnlyContainerProps} />
                                 <ReadOnlyRow label='Mesh Count' value={ingestionModel?.CountMeshes} paddingString='0px' containerStyle={readOnlyContainerProps} />
-                                <ReadOnlyRow label='Embedded Texture Count' value={ingestionModel?.CountEmbeddedTextures} paddingString='0px' containerStyle={readOnlyContainerProps} />
-                                <ReadOnlyRow label='Linked Texture Count' value={ingestionModel?.CountLinkedTextures} paddingString='0px' containerStyle={readOnlyContainerProps} />
-                                <ReadOnlyRow label='File Encoding' value={ingestionModel?.FileEncoding} paddingString='0px' containerStyle={readOnlyContainerProps} />
+                                <ReadOnlyRow label='Texture Count' value={ingestionModel?.CountEmbeddedTextures + ingestionModel?.CountLinkedTextures} paddingString='0px' containerStyle={readOnlyContainerProps} />
                                 <ReadOnlyRow label='Draco Compressed' value={ingestionModel?.IsDracoCompressed ? 'true' : 'false'} paddingString='0px' containerStyle={readOnlyContainerProps} />
                             </Box>
                         </Box>
-                        <ObjectMeshTable modelObjects={modelObjects} />
                     </Box>
+                    <IconButton
+                        className={classes.modelDetailsContainer}
+                        style={{ marginTop: '1rem', fontSize: '1.2rem' }}
+                        onClick={() => setShowDetails(showDetails === true ? false:true )}
+                    >
+                        Inspection Details
+                        {showDetails === true ? (<KeyboardArrowUpIcon />):( <KeyboardArrowDownIcon /> )}
+                    </IconButton>
+                    <Collapse in={showDetails}>
+                        <Box
+                            display='flex'
+                            flexDirection='row'
+                            flexWrap='wrap'
+                            alignContent='center'
+                            justifyContent='space-evenly'
+                            alignItems='flex-start'
+                            padding='0.5rem'
+                            border='1px solid rgba(141, 171, 196, 0.4)'
+                            borderTop='0'
+                        >
+                            <Box className={classes.notRequiredFields}>
+                                <Box className={classes.caption}>
+                                    <Typography variant='caption'>Model</Typography>
+                                </Box>
+                                <Box className={classes.readOnlyRowsContainer}>
+                                    <ReadOnlyRow label='Vertex Count' value={ingestionModel?.CountVertices} paddingString='0px' containerStyle={readOnlyContainerProps} />
+                                    <ReadOnlyRow label='Face Count' value={ingestionModel?.CountFaces} paddingString='0px' containerStyle={readOnlyContainerProps} />
+                                    <ReadOnlyRow label='Triangle Count' value={ingestionModel?.CountTriangles} paddingString='0px' containerStyle={readOnlyContainerProps} />
+                                    <ReadOnlyRow label='Animation Count' value={ingestionModel?.CountAnimations} paddingString='0px' containerStyle={readOnlyContainerProps} />
+                                    <ReadOnlyRow label='Camera Count' value={ingestionModel?.CountCameras} paddingString='0px' containerStyle={readOnlyContainerProps} />
+                                    <ReadOnlyRow label='Light Count' value={ingestionModel?.CountLights} paddingString='0px' containerStyle={readOnlyContainerProps} />
+                                    <ReadOnlyRow label='Material Count' value={ingestionModel?.CountMaterials} paddingString='0px' containerStyle={readOnlyContainerProps} />
+                                    <ReadOnlyRow label='Mesh Count' value={ingestionModel?.CountMeshes} paddingString='0px' containerStyle={readOnlyContainerProps} />
+                                    <ReadOnlyRow label='Embedded Texture Count' value={ingestionModel?.CountEmbeddedTextures} paddingString='0px' containerStyle={readOnlyContainerProps} />
+                                    <ReadOnlyRow label='Linked Texture Count' value={ingestionModel?.CountLinkedTextures} paddingString='0px' containerStyle={readOnlyContainerProps} />
+                                    <ReadOnlyRow label='File Encoding' value={ingestionModel?.FileEncoding} paddingString='0px' containerStyle={readOnlyContainerProps} />
+                                    <ReadOnlyRow label='Draco Compressed' value={ingestionModel?.IsDracoCompressed ? 'true' : 'false'} paddingString='0px' containerStyle={readOnlyContainerProps} />
+                                </Box>
+                            </Box>
+                            <ObjectMeshTable modelObjects={modelObjects} />
+                        </Box>
+                    </Collapse>
                 </Box>
             </Box>
             <ObjectSelectModal

diff --git a/client/src/pages/Ingestion/components/SubjectItem/SubjectList.tsx b/client/src/pages/Ingestion/components/SubjectItem/SubjectList.tsx
@@ -46,7 +46,7 @@ function SubjectList(props: SubjectListProps): React.ReactElement {
     const [addSubject, removeSubject] = useSubjectStore(state => [state.addSubject, state.removeSubject]);
     const classes = useStyles();
 
-    const header: string[] = ['ARK / ID', 'UNIT', 'NAME'];
+    const header: string[] = ['ARK / ID', 'UNIT', 'NAME', 'ID'];
 
     const getSubjectList = ({ id, arkId, unit, name, collectionId }: StateSubject, index: number) => (
         <SubjectListItem

diff --git a/client/src/pages/Ingestion/components/SubjectItem/SubjectListItem.tsx b/client/src/pages/Ingestion/components/SubjectItem/SubjectListItem.tsx
@@ -64,11 +64,14 @@ function SubjectListItem(props: SubjectListItemProps): React.ReactElement {
                 <Typography className={classes.label} variant='caption'>{unit}</Typography>
             </TableCell>
             <TableCell style={cellStyle} align='left'>
-                <Box display='flex' flexDirection='row' alignItems='center'>
-                    <Typography className={classes.label} variant='caption'>{name}</Typography>
-                    <Box className={classes.options}>
-                        {selected ? <MdRemoveCircleOutline className={classes.option} onClick={remove} size={20} /> : <MdAddCircleOutline className={classes.option} onClick={add} size={20} />}
-                    </Box>
+                <Typography className={classes.label} variant='caption'>{name}</Typography>
+            </TableCell>
+            <TableCell style={cellStyle} align='left'>
+                <Typography className={classes.label} variant='caption'>{collectionId}</Typography>
+            </TableCell>
+            <TableCell style={cellStyle} align='left'>
+                <Box className={classes.options}>
+                    {selected ? <MdRemoveCircleOutline className={classes.option} onClick={remove} size={20} /> : <MdAddCircleOutline className={classes.option} onClick={add} size={20} />}
                 </Box>
             </TableCell>
         </TableRow>