From 5d22b140c5a595d8af6c4b359569e86605dea5f1 Mon Sep 17 00:00:00 2001
From: Philip Adenekan <zoldello@gmail.com>
Date: Thu, 2 Sep 2021 14:18:51 -0700
Subject: [PATCH] t

---
 src/encoded/static/components/filegallery.js | 36 ++++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/encoded/static/components/filegallery.js b/src/encoded/static/components/filegallery.js
index db7c06ce329..a9fc762eb8d 100644
--- a/src/encoded/static/components/filegallery.js
+++ b/src/encoded/static/components/filegallery.js
@@ -302,6 +302,18 @@ const filterDownloadableFilesByStatus = (context, files) => {
     return [];
 };
 
+const getElementReferencesFiles = (elementsReferences) => {
+    let elementsReferenceFiles = [];
+    if (elementsReferences) {
+        elementsReferenceFiles = elementsReferences.map((elementsReference) => elementsReference.files)
+            .reduce((acc, val) => acc.concat(val), [])
+            .map((elementReferenceFile) => {
+                elementReferenceFile.isElementReferenceFile = true;
+                return elementReferenceFile;
+            });
+    }
+    return elementsReferenceFiles;
+};
 
 export class FileTable extends React.Component {
     static rowClasses() {
@@ -453,7 +465,7 @@ export class FileTable extends React.Component {
                     }
                     return 'rawArray';
                 }
-                if (file.output_category === 'reference') {
+                if (file.output_category === 'reference' || file.isElementReferenceFile) {
                     return 'ref';
                 }
 
@@ -463,18 +475,6 @@ export class FileTable extends React.Component {
                 return analysisObjectsAccession || nonAnalysisObjectPrefix;
             });
 
-            const elementsReferences = context.elements_references;
-
-            if (elementsReferences) {
-                const elementsReferenceFiles = elementsReferences.map((elementsReference) => elementsReference.files).reduce((acc, val) => acc.concat(val), []);
-
-                if (!files.ref) {
-                    files.ref = [];
-                }
-
-                files.ref.push(...elementsReferenceFiles);
-            }
-
             // Get unique analyses for series object
             const analysesSeries = files.series ? [...new Set(files.series.map((a) => (a.analyses && a.analyses.length > 0 ? a.analyses[0] : '')).filter((a) => a !== ''))] : [];
 
@@ -1482,14 +1482,16 @@ export const FileGallery = ({
     });
 
     React.useEffect(() => {
+        const elementsReferenceFiles = getElementReferencesFiles(context.elements_references);
+
         if (files) {
             // Array of files provided, so set without a request to the server.
-            setData(files);
+            setData([...files, ...elementsReferenceFiles]);
         } else {
             // Request files from the server.
             const query = fileQuery || `limit=all&type=File&dataset=${context['@id']}`;
             requestSearch(query).then((requestedData) => {
-                setData(requestedData['@graph']);
+                setData([...requestedData['@graph'], ...elementsReferenceFiles]);
             });
         }
     }, [fileQuery, files]);
@@ -2987,9 +2989,7 @@ class FileGalleryRendererComponent extends React.Component {
         this.experimentType = props.context['@type'][0];
 
         const seriesFiles = getSeriesFiles(props.context) || [];
-        const elementsReferenceFiles = props.context.elements_references?.map((elementsReference) => elementsReference.files).reduce((acc, val) => acc.concat(val), []) || [];
-
-        const datasetFiles = [...props.data, ...seriesFiles, ...elementsReferenceFiles];
+        const datasetFiles = [...props.data, ...seriesFiles];
 
         // Initialize React state variables.
         this.state = {