Bind series data

platform/viewer/src/routes/StudyListContainer/StudyListContainer.jsx

@@ -21,6 +21,8 @@ import {
   StudyListFilter,
 } from '@ohif/ui';
 
+const seriesInStudiesMap = new Map();
+
 /**
  * TODO:
  * - debounce `setFilterValues` (150ms?)
@@ -77,7 +79,7 @@ function StudyListContainer({ history, data: studies, dataSource }) {
     });
   // ~ Rows & Studies
   const [expandedRows, setExpandedRows] = useState([]);
-  const [seriesInStudies, setSeriesInStudies] = useState({});
+  const [studiesWithSeriesData, setStudiesWithSeriesData] = useState([]);
   const numOfStudies = studies.length;
   const totalPages = Math.floor(numOfStudies / resultsPerPage);
 
@@ -185,6 +187,7 @@ function StudyListContainer({ history, data: studies, dataSource }) {
       return filterValues[name] !== defaultFilterValues[name];
     });
   };
+  const tableDataSource = sortedStudies.map((study, key) => {
     const rowKey = key + 1;
     const isExpanded = expandedRows.some(k => k === rowKey);
     const {
@@ -225,7 +228,6 @@ function StudyListContainer({ history, data: studies, dataSource }) {
                   moment(date, ['YYYYMMDD', 'YYYY.MM.DD'], true).isValid() &&
                   moment(date, ['YYYYMMDD', 'YYYY.MM.DD']).format(
                     'MMM-DD-YYYY'
-  const tableDataSource = sortedStudies.map((study, key) => {
                   )}
               </span>
               {time && (
@@ -237,12 +239,9 @@ function StudyListContainer({ history, data: studies, dataSource }) {
                       'HHmmss',
                       'HHmmss.SSS',
                     ]).isValid() &&
-                      moment(time, [
+                    moment(time, ['HH', 'HHmm', 'HHmmss', 'HHmmss.SSS']).format(
-                        'HH',
+                      'hh:mm A'
-                        'HHmm',
+                    )}
-                        'HHmmss',
-                        'HHmmss.SSS',
-                      ]).format('hh:mm A')}
                 </span>
               )}
             </div>
@@ -295,8 +294,8 @@ function StudyListContainer({ history, data: studies, dataSource }) {
             instances: 'Instances',
           }}
           seriesTableDataSource={
-              seriesInStudies[studyInstanceUid]
+            seriesInStudiesMap.has(studyInstanceUid)
-                ? seriesInStudies[studyInstanceUid].map(s => {
+              ? seriesInStudiesMap.get(studyInstanceUid).map(s => {
                   return {
                     description: s.description || '(empty)',
                     seriesNumber: s.seriesNumber || '',
@@ -309,39 +308,21 @@ function StudyListContainer({ history, data: studies, dataSource }) {
         >
           <Button
             rounded="full"
-              variant="contained"
+            variant="outlined"
-              className="mr-4 font-bold"
+            disabled={true}
-              endIcon={
+            endIcon={<Icon name="launch-info" />}
-                <Icon name="launch-arrow" style={{ color: '#21a7c6' }} />
+            className="font-bold"
-              }
           >
-              <Link to="/viewer/123">Basic Viewer</Link>
+            Comparison
-            </Button>
-            <Button
-              rounded="full"
-              variant="contained"
-              className="mr-4 font-bold"
-              endIcon={
-                <Icon name="launch-arrow" style={{ color: '#21a7c6' }} />
-              }
-            >
-              <Link to="/viewer/123">Segmentation</Link>
           </Button>
           <Button
             rounded="full"
             variant="outlined"
             endIcon={<Icon name="launch-info" />}
-              className="font-bold"
+            className="font-bold ml-4"
           >
-              Module 3
+            View: Segmentation
           </Button>
-            <div className="ml-5 text-lg text-common-bright inline-flex items-center">
-              <Icon
-                name="notificationwarning-diamond"
-                className="mr-2 w-5 h-5"
-              />
-              Feedback text lorem ipsum dolor sit amet
-            </div>
         </StudyListExpandedRow>
       ),
       onClickRow: () =>