feat(studies-panel): New OHIF study panel - under experimental flag (#4254)

platform/ui-next/src/components/StudyBrowser/StudyBrowser.tsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import StudyItem from '../StudyItem';
+import StudyBrowserSort from '../StudyBrowserSort';
+import StudyBrowserViewOptions from '../StudyBrowserViewOptions';
+
+const getTrackedSeries = displaySets => {
+  let trackedSeries = 0;
+  displaySets.forEach(displaySet => {
+    if (displaySet.isTracked) {
+      trackedSeries++;
+    }
+  });
+
+  return trackedSeries;
+};
+
+const noop = () => {};
+
+const StudyBrowser = ({
+  tabs,
+  activeTabName,
+  expandedStudyInstanceUIDs,
+  onClickTab = noop,
+  onClickStudy = noop,
+  onClickThumbnail = noop,
+  onDoubleClickThumbnail = noop,
+  onClickUntrack = noop,
+  activeDisplaySetInstanceUIDs,
+  servicesManager,
+  showSettings,
+  viewPresets,
+}: withAppTypes) => {
+  const getTabContent = () => {
+    const tabData = tabs.find(tab => tab.name === activeTabName);
+    const viewPreset = viewPresets
+      ? viewPresets.filter(preset => preset.selected)[0]?.id
+      : 'thumbnails';
+    return tabData.studies.map(
+      ({ studyInstanceUid, date, description, numInstances, modalities, displaySets }) => {
+        const isExpanded = expandedStudyInstanceUIDs.includes(studyInstanceUid);
+        return (
+          <React.Fragment key={studyInstanceUid}>
+            <StudyItem
+              date={date}
+              description={description}
+              numInstances={numInstances}
+              isExpanded={isExpanded}
+              displaySets={displaySets}
+              modalities={modalities}
+              trackedSeries={getTrackedSeries(displaySets)}
+              isActive={isExpanded}
+              onClick={() => {
+                onClickStudy(studyInstanceUid);
+              }}
+              onClickThumbnail={onClickThumbnail}
+              onDoubleClickThumbnail={onDoubleClickThumbnail}
+              onClickUntrack={onClickUntrack}
+              activeDisplaySetInstanceUIDs={activeDisplaySetInstanceUIDs}
+              data-cy="thumbnail-list"
+              viewPreset={viewPreset}
+            />
+          </React.Fragment>
+        );
+      }
+    );
+  };
+
+  return (
+    <React.Fragment>
+      {showSettings && (
+        <div
+          className="w-100 bg-bkg-low flex h-[48px] items-center justify-center gap-[10px] px-[8px] py-[10px]"
+          data-cy={'studyBrowser-panel'}
+        >
+          <StudyBrowserViewOptions
+            tabs={tabs}
+            onSelectTab={onClickTab}
+            activeTabName={activeTabName}
+          />
+          <StudyBrowserSort servicesManager={servicesManager} />
+        </div>
+      )}
+      <div className="ohif-scrollbar invisible-scrollbar bg-bkg-low flex flex-1 flex-col gap-[4px] overflow-auto">
+        {getTabContent()}
+      </div>
+    </React.Fragment>
+  );
+};
+
+StudyBrowser.propTypes = {
+  onClickTab: PropTypes.func.isRequired,
+  onClickStudy: PropTypes.func,
+  onClickThumbnail: PropTypes.func,
+  onDoubleClickThumbnail: PropTypes.func,
+  onClickUntrack: PropTypes.func,
+  activeTabName: PropTypes.string.isRequired,
+  expandedStudyInstanceUIDs: PropTypes.arrayOf(PropTypes.string).isRequired,
+  activeDisplaySetInstanceUIDs: PropTypes.arrayOf(PropTypes.string),
+  tabs: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+      studies: PropTypes.arrayOf(
+        PropTypes.shape({
+          studyInstanceUid: PropTypes.string.isRequired,
+          date: PropTypes.string,
+          numInstances: PropTypes.number,
+          modalities: PropTypes.string,
+          description: PropTypes.string,
+          displaySets: PropTypes.arrayOf(
+            PropTypes.shape({
+              displaySetInstanceUID: PropTypes.string.isRequired,
+              imageSrc: PropTypes.string,
+              imageAltText: PropTypes.string,
+              seriesDate: PropTypes.string,
+              seriesNumber: PropTypes.any,
+              numInstances: PropTypes.number,
+              description: PropTypes.string,
+              componentType: PropTypes.oneOf(['thumbnail', 'thumbnailTracked', 'thumbnailNoImage'])
+                .isRequired,
+              isTracked: PropTypes.bool,
+              /**
+               * Data the thumbnail should expose to a receiving drop target. Use a matching
+               * `dragData.type` to identify which targets can receive this draggable item.
+               * If this is not set, drag-n-drop will be disabled for this thumbnail.
+               *
+               * Ref: https://react-dnd.github.io/react-dnd/docs/api/use-drag#specification-object-members
+               */
+              dragData: PropTypes.shape({
+                /** Must match the "type" a dropTarget expects */
+                type: PropTypes.string.isRequired,
+              }),
+            })
+          ),
+        })
+      ).isRequired,
+    })
+  ),
+};
+
+export default StudyBrowser;