From a9cb30dd333888bf1d21e4d4664aa14e8a0054de Mon Sep 17 00:00:00 2001
From: Adam Jones <domdomegg+git@gmail.com>
Date: Tue, 15 Oct 2024 15:27:54 +0100
Subject: [PATCH] Show cohort bucket and participant count in PersonView

---
 frontend/index.tsx |  1 +
 frontend/setup.tsx |  7 +++++++
 frontend/view.tsx  | 10 ++++++++++
 3 files changed, 18 insertions(+)

diff --git a/frontend/index.tsx b/frontend/index.tsx
index 879c119..25a5259 100644
--- a/frontend/index.tsx
+++ b/frontend/index.tsx
@@ -31,6 +31,7 @@ export type Preset = {
   cohortsTableStartDateField?: string;
   cohortsTableEndDateField?: string;
   cohortsIterationField?: string;
+  cohortsBucketField?: string;
 };
 
 const createPreset = (name: string) => ({
diff --git a/frontend/setup.tsx b/frontend/setup.tsx
index 46e56a7..7391fba 100644
--- a/frontend/setup.tsx
+++ b/frontend/setup.tsx
@@ -444,6 +444,13 @@ const SetupPage = () => {
                   globalConfigKey={[...path, "cohortsIterationField"]}
                 />
               </FormField>
+              <FormField label="Bucket field">
+                <FieldPickerSynced
+                  table={cohortsTable}
+                  allowedTypes={[FieldType.MULTIPLE_RECORD_LINKS, FieldType.MULTIPLE_LOOKUP_VALUES]}
+                  globalConfigKey={[...path, "cohortsBucketField"]}
+                />
+              </FormField>
             </div>
           )}
         </div>
diff --git a/frontend/view.tsx b/frontend/view.tsx
index f70b282..90b3d23 100644
--- a/frontend/view.tsx
+++ b/frontend/view.tsx
@@ -44,6 +44,8 @@ const ViewPerson: React.FC<{ tableId: string, recordId: string }> = ({ tableId,
       preset.cohortsTableStartDateField,
       preset.cohortsTableEndDateField,
       preset.cohortsIterationField,
+      preset.cohortsBucketField,
+      personType.cohortsTableField,
     ],
   });
   const cohortsWithTimes = rawCohorts.flatMap((cohort) => {
@@ -63,6 +65,8 @@ const ViewPerson: React.FC<{ tableId: string, recordId: string }> = ({ tableId,
       name: cohort.name,
       iteration: cohort.getCellValueAsString(preset.cohortsIterationField!),
       timeAv: meetingDates.map((d) => fromDate(d)) as Interval,
+      bucket: preset.cohortsBucketField ? cohort.getCellValueAsString(preset.cohortsBucketField) : "Unknown",
+      participantCount: (cohort.getCellValue(personType.cohortsTableField!) as string[])?.length,
     };
   });
 
@@ -121,6 +125,8 @@ const ViewPerson: React.FC<{ tableId: string, recordId: string }> = ({ tableId,
         <div className="w-full rounded border border-solid border-gray-200 max-h-72 overflow-auto">
           <div className="flex bg-slate-100 p-1 font-medium">
             <div style={{ flex: "4 1 0" }}>Cohort</div>
+            <div style={{ flex: "2 1 0" }}>Bucket</div>
+            <div style={{ flex: "1 1 0" }}># participants</div>
             <div style={{ flex: "1 1 0" }}>Meeting time</div>
           </div>
           <div className="w-full bg-white divide-y divide-gray-200">
@@ -142,6 +148,10 @@ const ViewPerson: React.FC<{ tableId: string, recordId: string }> = ({ tableId,
                     >
                       <CohortBlob name={cohort.name} />
                     </div>
+                    <div style={{ flex: "2 1 0" }}>
+                      {cohort.bucket}
+                    </div>
+                    <div style={{ flex: "1 1 0" }}>{cohort.participantCount}</div>
                     <div style={{ flex: "1 1 0" }}>
                       {format(cohort.timeAv).replace(" ", " – ")}
                     </div>