Add completeness counts to subject set cards

zooniverse · Feb 18, 2021 · d627c7d · d627c7d
1 parent 04b8da6
commit d627c7d
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/...roject/src/shared/components/SubjectSetPicker/components/SubjectSetCard/SubjectSetCard.js b/...roject/src/shared/components/SubjectSetPicker/components/SubjectSetCard/SubjectSetCard.js
@@ -6,13 +6,15 @@ import { array, number, string } from 'prop-types'
 import React from 'react'
 
 function SubjectSetCard (props) {
-  const { display_name, id, set_member_subjects_count, subjects } = props
+  const { availableSubjects, display_name, id, set_member_subjects_count, subjects } = props
   const [subject] = subjects
   const { publicRuntimeConfig = {} } = getConfig() || {}
   const assetPrefix = publicRuntimeConfig.assetPrefix || ''
   const placeholderUrl = `${assetPrefix}/subject-placeholder.png`
   const subjectURLs = subject ? subject.locations.map(location => Object.values(location)[0]) : []
   const alt = subject ? `Subject ${subject.id}` : 'Loading'
+  const completeness = 1 - (availableSubjects / set_member_subjects_count)
+  const percentComplete = parseInt(100 * completeness)
 
   return (
     <Box
@@ -48,6 +50,12 @@ function SubjectSetCard (props) {
           >
             {`${set_member_subjects_count} subjects`}
           </Text>
+            <br/>
+          <Text
+            weight="normal"
+          >
+            {`${percentComplete}% complete`}
+          </Text>
         </Paragraph>
       </Box>
     </Box>