From 51e21540adbbd836d13d51a1a3abb127c319478b Mon Sep 17 00:00:00 2001
From: Mary Salvi <mary.salvi@kitware.com>
Date: Fri, 1 Mar 2024 13:35:27 -0500
Subject: [PATCH] Update display of study results

Remove counts for studies and consortia. Make both expandable defaulting to closed.
---
 .../components/Presentation/SearchResults.vue |   2 +-
 web/src/views/Search/SearchLayout.vue         | 478 ++++++++++--------
 2 files changed, 264 insertions(+), 216 deletions(-)

diff --git a/web/src/components/Presentation/SearchResults.vue b/web/src/components/Presentation/SearchResults.vue
index 7a15474e..9ef94d2d 100644
--- a/web/src/components/Presentation/SearchResults.vue
+++ b/web/src/components/Presentation/SearchResults.vue
@@ -58,6 +58,7 @@ export default defineComponent({
     <v-col
       v-if="!disablePagination"
       cols="12"
+      class="pb-0"
     >
       <v-row
         no-gutters
@@ -67,7 +68,6 @@ export default defineComponent({
           cols="3"
         >
           <v-pagination
-
             :value="page"
             :length="Math.ceil(count / rows)"
             :total-visible="7"
diff --git a/web/src/views/Search/SearchLayout.vue b/web/src/views/Search/SearchLayout.vue
index 6cddedcb..35e3a654 100644
--- a/web/src/views/Search/SearchLayout.vue
+++ b/web/src/views/Search/SearchLayout.vue
@@ -37,6 +37,8 @@ export default defineComponent({
   },
 
   setup() {
+    const showConsortia = ref(true);
+    const showStudies = ref(true);
     /**
      * Study checkbox state logic
      */
@@ -129,8 +131,8 @@ export default defineComponent({
     const studyCondition = computed(() => studyConditions.value.study.concat(studySummaryData.otherConditions.value));
     const consortiumCondition = computed(() => studyConditions.value.consortia.concat(studySummaryData.otherConditions.value));
 
-    const study = usePaginatedResults(ref(studyCondition), api.searchStudy, undefined);
-    const consortium = usePaginatedResults(ref(consortiumCondition), api.searchStudy, undefined);
+    const study = usePaginatedResults(ref(studyCondition), api.searchStudy, undefined, 5);
+    const consortium = usePaginatedResults(ref(consortiumCondition), api.searchStudy, undefined, 5);
 
     const studyResults = computed(() => Object.values(study.data.results.results)
       .map((r) => ({
@@ -183,6 +185,8 @@ export default defineComponent({
       consortium,
       studyResults,
       consortiumStudyResults,
+      showConsortia,
+      showStudies,
       showChildren,
       studyCheckboxState,
       types,
@@ -243,129 +247,90 @@ export default defineComponent({
                 <EnvironmentVisGroup :conditions="gatedEnvironmentVisConditions" />
               </v-tab-item>
             </v-tabs-items>
-
             <v-card outlined>
-              <v-card-title class="pb-0">
-                {{ consortium.data.results.total }}
-                {{ consortium.data.results.count === 1 ? 'Consortium' : 'Consortia' }}
-                <v-tooltip
-                  right
-                >
-                  <template #activator="{on, attrs}">
-                    <v-btn
-                      icon
-                      small
-                      v-bind="attrs"
-                      v-on="on"
-                    >
-                      <v-icon>mdi-help-circle</v-icon>
-                    </v-btn>
-                  </template>
-                  <span>Standardized Data Collections</span>
-                </v-tooltip>
-              </v-card-title>
-              <SearchResults
-                disable-navigate-on-click
-                :count="consortium.data.results.count"
-                :icon="'mdi-database'"
-                :items-per-page="consortium.data.limit"
-                :results="consortiumStudyResults"
-                :page="consortium.data.pageSync"
-                :loading="consortium.loading.value"
-                @set-page="consortium.setPage($event)"
-                @selected="$router.push({ name: 'Study', params: { id: $event} })"
-                @set-items-per-page="consortium.setItemsPerPage($event)"
+              <v-card
+                flat
               >
-                <template #action="{ result }">
-                  <v-list-item-action>
-                    <v-checkbox
-                      :input-value="studyCheckboxState"
-                      :value="result.id"
-                      @click.stop
-                      @change="setChecked(result.id,{children:result.children})"
-                    />
-                  </v-list-item-action>
-                </template>
-                <template #child-list="{ result }">
-                  <v-list-item-action
-                    v-if="result.children && result.children.length > 0"
-                    class="ma-0"
+                <v-card-title
+                  class="pb-0"
+                >
+                  {{ consortium.data.results.count === 1 ? 'Consortium' : 'Consortia' }}
+                  <v-tooltip
+                    right
                   >
-                    <v-btn
-                      icon
-                      @click="toggleChildren(result)"
-                    >
-                      <v-icon
-                        v-if="showChildren.includes(result.id)"
-                      >
-                        mdi-chevron-up-box
-                      </v-icon>
-                      <v-icon
-                        v-else
+                    <template #activator="{on, attrs}">
+                      <v-btn
+                        icon
+                        small
+                        v-bind="attrs"
+                        v-on="on"
                       >
-                        mdi-chevron-down-box
-                      </v-icon>
-                    </v-btn>
-                  </v-list-item-action>
-                </template>
-
-                <template #action-right="{ result }">
-                  <v-list-item-action>
+                        <v-icon>mdi-help-circle</v-icon>
+                      </v-btn>
+                    </template>
+                    <span>Standardized Data Collections</span>
+                  </v-tooltip>
+                  <v-spacer />
+                  <v-card-actions>
                     <v-btn
-                      icon
-                      large
-                      :to="{ name: 'Study', params: { id: result.id } }"
+                      elevation="0"
+                      color="primary"
+                      :disabled="consortium.data.results.count === 0"
+                      @click="showConsortia=!showConsortia"
                     >
+                      {{ showConsortia ? 'Hide' : 'View' }} Consortia
                       <v-icon>
-                        mdi-open-in-new
+                        {{ showConsortia ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
                       </v-icon>
                     </v-btn>
-                  </v-list-item-action>
-                </template>
-                <template #item-content="props">
-                  <div v-if="props.result.omics_processing_counts">
-                    <template
-                      v-for="item in props.result.omics_processing_counts"
-                    >
-                      <v-chip
-                        v-if="item.count && (item.type.toLowerCase() !== 'lipidomics')"
-                        :key="item.type"
-                        small
-                        class="mr-2 my-1"
-                        @click.stop="setChecked(props.result.id, {omicsType:item.type})"
-                      >
-                        {{ fieldDisplayName(item.type) }}: {{ item.count }}
-                      </v-chip>
-                    </template>
-                  </div>
-                  <v-card
-                    v-if="showChildren.includes(props.result.id)"
-                    flat
-                    class="pa-4 mt-2"
-                  >
-                    <v-divider />
+                  </v-card-actions>
+                </v-card-title>
+                <v-expand-transition>
+                  <div v-show="showConsortia">
                     <SearchResults
                       disable-navigate-on-click
-                      disable-pagination
-                      :count="props.result.children.length"
+                      :count="consortium.data.results.count"
                       :icon="'mdi-database'"
-                      :items-per-page="props.result.children.length"
-                      :results="props.result.children"
-                      :page="1"
-                      :loading="false"
+                      :items-per-page="consortium.data.limit"
+                      :results="consortiumStudyResults"
+                      :page="consortium.data.pageSync"
+                      :loading="consortium.loading.value"
+                      @set-page="consortium.setPage($event)"
                       @selected="$router.push({ name: 'Study', params: { id: $event} })"
+                      @set-items-per-page="consortium.setItemsPerPage($event)"
                     >
                       <template #action="{ result }">
                         <v-list-item-action>
                           <v-checkbox
-                            :disabled="studyCheckboxState.includes(props.result.id)"
                             :input-value="studyCheckboxState"
                             :value="result.id"
                             @click.stop
-                            @change="setChecked(result.id)"
+                            @change="setChecked(result.id,{children:result.children})"
                           />
                         </v-list-item-action>
                       </template>
+                      <template #child-list="{ result }">
+                        <v-list-item-action
+                          v-if="result.children && result.children.length > 0"
+                          class="ma-0"
+                        >
+                          <v-btn
+                            icon
+                            @click="toggleChildren(result)"
+                          >
+                            <v-icon
+                              v-if="showChildren.includes(result.id)"
+                            >
+                              mdi-chevron-up-box
+                            </v-icon>
+                            <v-icon
+                              v-else
+                            >
+                              mdi-chevron-down-box
+                            </v-icon>
+                          </v-btn>
+                        </v-list-item-action>
+                      </template>
 
                       <template #action-right="{ result }">
                         <v-list-item-action>
@@ -380,10 +345,10 @@ export default defineComponent({
                           </v-btn>
                         </v-list-item-action>
                       </template>
-                      <template #item-content="childProps">
-                        <div v-if="childProps.result.omics_processing_counts">
+                      <template #item-content="props">
+                        <div v-if="props.result.omics_processing_counts">
                           <template
-                            v-for="item in childProps.result.omics_processing_counts"
+                            v-for="item in props.result.omics_processing_counts"
                           >
                             <v-chip
                               v-if="item.count && (item.type.toLowerCase() !== 'lipidomics')"
@@ -396,134 +361,156 @@ export default defineComponent({
                             </v-chip>
                           </template>
                         </div>
+                        <v-card
+                          v-if="showChildren.includes(props.result.id)"
+                          flat
+                          class="pa-4 mt-2"
+                        >
+                          <v-divider />
+                          <SearchResults
+                            disable-navigate-on-click
+                            disable-pagination
+                            :count="props.result.children.length"
+                            :icon="'mdi-database'"
+                            :items-per-page="props.result.children.length"
+                            :results="props.result.children"
+                            :page="1"
+                            :loading="false"
+                            @selected="$router.push({ name: 'Study', params: { id: $event} })"
+                          >
+                            <template #action="{ result }">
+                              <v-list-item-action>
+                                <v-checkbox
+                                  :disabled="studyCheckboxState.includes(props.result.id)"
+                                  :input-value="studyCheckboxState"
+                                  :value="result.id"
+                                  @click.stop
+                                  @change="setChecked(result.id)"
+                                />
+                              </v-list-item-action>
+                            </template>
+
+                            <template #action-right="{ result }">
+                              <v-list-item-action>
+                                <v-btn
+                                  icon
+                                  large
+                                  :to="{ name: 'Study', params: { id: result.id } }"
+                                >
+                                  <v-icon>
+                                    mdi-open-in-new
+                                  </v-icon>
+                                </v-btn>
+                              </v-list-item-action>
+                            </template>
+                            <template #item-content="childProps">
+                              <div v-if="childProps.result.omics_processing_counts">
+                                <template
+                                  v-for="item in childProps.result.omics_processing_counts"
+                                >
+                                  <v-chip
+                                    v-if="item.count && (item.type.toLowerCase() !== 'lipidomics')"
+                                    :key="item.type"
+                                    small
+                                    class="mr-2 my-1"
+                                    @click.stop="setChecked(props.result.id, {omicsType:item.type})"
+                                  >
+                                    {{ fieldDisplayName(item.type) }}: {{ item.count }}
+                                  </v-chip>
+                                </template>
+                              </div>
+                            </template>
+                          </SearchResults>
+                        </v-card>
                       </template>
                     </SearchResults>
-                  </v-card>
-                </template>
-              </SearchResults>
-              <v-card-title class="pb-0">
-                {{ study.data.results.total }}
-                {{ study.data.results.count === 1 ? 'Study' : 'Studies' }}
-                <v-tooltip
-                  right
-                >
-                  <template #activator="{on, attrs}">
-                    <v-btn
-                      icon
-                      small
-                      v-bind="attrs"
-                      v-on="on"
-                    >
-                      <v-icon>mdi-help-circle</v-icon>
-                    </v-btn>
-                  </template>
-                  <span>Research-driven Experimental Data Sets</span>
-                </v-tooltip>
-              </v-card-title>
-              <SearchResults
-                disable-navigate-on-click
-                :count="study.data.results.count"
-                :icon="studyType.icon"
-                :items-per-page="study.data.limit"
-                :results="studyResults"
-                :page="study.data.pageSync"
-                :loading="study.loading.value"
-                @set-page="study.setPage($event)"
-                @selected="$router.push({ name: 'Study', params: { id: $event} })"
-                @set-items-per-page="study.setItemsPerPage($event)"
+                  </div>
+                </v-expand-transition>
+              </v-card>
+              <v-divider />
+              <v-card
+                flat
               >
-                <template #action="{ result }">
-                  <v-list-item-action>
-                    <v-checkbox
-                      :input-value="studyCheckboxState"
-                      :value="result.id"
-                      @click.stop
-                      @change="setChecked(result.id, {children:result.children})"
-                    />
-                  </v-list-item-action>
-                </template>
-
-                <template #child-list="{ result }">
-                  <v-list-item-action
-                    v-if="result.children && result.children.length > 0"
-                    class="ma-0"
+                <v-card-title class="pb-0">
+                  {{ study.data.results.count === 1 ? 'Study' : 'Studies' }}
+                  <v-tooltip
+                    right
                   >
-                    <v-btn
-                      icon
-                      @click="toggleChildren(result)"
-                    >
-                      <v-icon
-                        v-if="showChildren.includes(result.id)"
-                      >
-                        mdi-chevron-up-box
-                      </v-icon>
-                      <v-icon
-                        v-else
+                    <template #activator="{on, attrs}">
+                      <v-btn
+                        icon
+                        small
+                        v-bind="attrs"
+                        v-on="on"
                       >
-                        mdi-chevron-down-box
-                      </v-icon>
-                    </v-btn>
-                  </v-list-item-action>
-                </template>
-
-                <template #action-right="{ result }">
-                  <v-list-item-action>
+                        <v-icon>mdi-help-circle</v-icon>
+                      </v-btn>
+                    </template>
+                    <span>Research-driven Experimental Data Sets</span>
+                  </v-tooltip>
+                  <v-spacer />
+                  <v-card-actions>
                     <v-btn
-                      icon
-                      large
-                      :to="{ name: 'Study', params: { id: result.id } }"
+                      elevation="0"
+                      color="primary"
+                      :disabled="study.data.results.count === 0"
+                      @click="showStudies=!showStudies"
                     >
+                      {{ showStudies ? 'Hide' : 'View' }} Studies
                       <v-icon>
-                        mdi-open-in-new
+                        {{ showStudies ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
                       </v-icon>
                     </v-btn>
-                  </v-list-item-action>
-                </template>
-                <template #item-content="props">
-                  <div v-if="props.result.omics_processing_counts">
-                    <template
-                      v-for="item in props.result.omics_processing_counts"
-                    >
-                      <v-chip
-                        v-if="item.count && (item.type.toLowerCase() !== 'lipidomics')"
-                        :key="item.type"
-                        small
-                        class="mr-2 my-1"
-                        @click.stop="setChecked(props.result.id, {omicsType:item.type})"
-                      >
-                        {{ fieldDisplayName(item.type) }}: {{ item.count }}
-                      </v-chip>
-                    </template>
-                  </div>
-                  <v-card
-                    v-if="showChildren.includes(props.result.id)"
-                    flat
-                    class="pa-4 mt-2"
-                  >
-                    <v-divider />
+                  </v-card-actions>
+                </v-card-title>
+                <v-expand-transition>
+                  <div v-show="showStudies">
                     <SearchResults
                       disable-navigate-on-click
-                      disable-pagination
-                      :count="props.result.children.length"
+                      :count="study.data.results.count"
                       :icon="studyType.icon"
-                      :items-per-page="props.result.children.length"
-                      :results="props.result.children"
-                      :page="1"
-                      :loading="false"
+                      :items-per-page="study.data.limit"
+                      :results="studyResults"
+                      :page="study.data.pageSync"
+                      :loading="study.loading.value"
+                      @set-page="study.setPage($event)"
                       @selected="$router.push({ name: 'Study', params: { id: $event} })"
+                      @set-items-per-page="study.setItemsPerPage($event)"
                     >
                       <template #action="{ result }">
                         <v-list-item-action>
                           <v-checkbox
-                            :disabled="studyCheckboxState.includes(props.result.id)"
                             :input-value="studyCheckboxState"
                             :value="result.id"
                             @click.stop
-                            @change="setChecked(result.id)"
+                            @change="setChecked(result.id, {children:result.children})"
                           />
                         </v-list-item-action>
                       </template>
 
+                      <template #child-list="{ result }">
+                        <v-list-item-action
+                          v-if="result.children && result.children.length > 0"
+                          class="ma-0"
+                        >
+                          <v-btn
+                            icon
+                            @click="toggleChildren(result)"
+                          >
+                            <v-icon
+                              v-if="showChildren.includes(result.id)"
+                            >
+                              mdi-chevron-up-box
+                            </v-icon>
+                            <v-icon
+                              v-else
+                            >
+                              mdi-chevron-down-box
+                            </v-icon>
+                          </v-btn>
+                        </v-list-item-action>
+                      </template>
+
                       <template #action-right="{ result }">
                         <v-list-item-action>
                           <v-btn
@@ -537,27 +524,88 @@ export default defineComponent({
                           </v-btn>
                         </v-list-item-action>
                       </template>
-                      <template #item-content="childProps">
-                        <div v-if="childProps.result.omics_processing_counts">
+                      <template #item-content="props">
+                        <div v-if="props.result.omics_processing_counts">
                           <template
-                            v-for="item in childProps.result.omics_processing_counts"
+                            v-for="item in props.result.omics_processing_counts"
                           >
                             <v-chip
                               v-if="item.count && (item.type.toLowerCase() !== 'lipidomics')"
                               :key="item.type"
                               small
                               class="mr-2 my-1"
-                              @click.stop="setChecked(childProps.result.id, {omicsType:item.type})"
+                              @click.stop="setChecked(props.result.id, {omicsType:item.type})"
                             >
                               {{ fieldDisplayName(item.type) }}: {{ item.count }}
                             </v-chip>
                           </template>
                         </div>
+                        <v-card
+                          v-if="showChildren.includes(props.result.id)"
+                          flat
+                          class="pa-4 mt-2"
+                        >
+                          <v-divider />
+                          <SearchResults
+                            disable-navigate-on-click
+                            disable-pagination
+                            :count="props.result.children.length"
+                            :icon="studyType.icon"
+                            :items-per-page="props.result.children.length"
+                            :results="props.result.children"
+                            :page="1"
+                            :loading="false"
+                            @selected="$router.push({ name: 'Study', params: { id: $event} })"
+                          >
+                            <template #action="{ result }">
+                              <v-list-item-action>
+                                <v-checkbox
+                                  :disabled="studyCheckboxState.includes(props.result.id)"
+                                  :input-value="studyCheckboxState"
+                                  :value="result.id"
+                                  @click.stop
+                                  @change="setChecked(result.id)"
+                                />
+                              </v-list-item-action>
+                            </template>
+
+                            <template #action-right="{ result }">
+                              <v-list-item-action>
+                                <v-btn
+                                  icon
+                                  large
+                                  :to="{ name: 'Study', params: { id: result.id } }"
+                                >
+                                  <v-icon>
+                                    mdi-open-in-new
+                                  </v-icon>
+                                </v-btn>
+                              </v-list-item-action>
+                            </template>
+                            <template #item-content="childProps">
+                              <div v-if="childProps.result.omics_processing_counts">
+                                <template
+                                  v-for="item in childProps.result.omics_processing_counts"
+                                >
+                                  <v-chip
+                                    v-if="item.count && (item.type.toLowerCase() !== 'lipidomics')"
+                                    :key="item.type"
+                                    small
+                                    class="mr-2 my-1"
+                                    @click.stop="setChecked(childProps.result.id, {omicsType:item.type})"
+                                  >
+                                    {{ fieldDisplayName(item.type) }}: {{ item.count }}
+                                  </v-chip>
+                                </template>
+                              </div>
+                            </template>
+                          </SearchResults>
+                        </v-card>
                       </template>
                     </SearchResults>
-                  </v-card>
-                </template>
-              </SearchResults>
+                  </div>
+                </v-expand-transition>
+              </v-card>
             </v-card>
             <v-card
               outlined