Add current changes #2

Author: pgetta

src/components/explore-section/EphysViewerContainer/ImageViewComponent.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { Select } from 'antd';
 import { LineChartOutlined } from '@ant-design/icons';
+import NWBTrace from './nwb-trace';
+import { useMemo } from 'react';
 
 const { Option } = Select;
 
@@ -26,23 +28,21 @@ interface ImageSetComponentProps {
       about?: string | undefined;
     }[];
   };
-  onRepetitionClicked: (stimulusType: string, rep: string) => () => void;
+  onRepetitionClick: (stimulusType: string, rep: string) => () => void;
   imagePreview: React.FC<{ imageUrl: string }>;
 }
 
-interface ImageViewComponentProps {
-  stimulusTypeMap: Map<string, number>;
-  stimulusType: string;
-  imageCollectionData: ImageCollection;
-  imagePreview: React.FC<{ imageUrl: string }>;
+interface TraceOverviewComponentProps {
+  trace: NWBTrace;
+  protocol: string;
   onStimulusChange: (value: string) => void;
-  onRepetitionClicked: (stimulusType: string, rep: string) => () => void;
+  onRepetitionClick: (stimulusType: string, rep: string) => () => void;
 }
 
 function ImageSetComponent({
   stimulusType,
   repetitions,
-  onRepetitionClicked,
+  onRepetitionClick,
   imagePreview,
 }: ImageSetComponentProps) {
   const repCount = Object.keys(repetitions).length;
@@ -79,7 +79,7 @@ function ImageSetComponent({
                 <span className="indent-10 text-lg font-light text-dark">Repetition {repKey}</span>
                 <button
                   className="flex items-center rounded bg-neutral-1 p-3 hover:bg-neutral-2"
-                  onClick={onRepetitionClicked(stimulusType, repKey)}
+                  onClick={onRepetitionClick(stimulusType, repKey)}
                   type="button"
                   aria-label="Toggle selection"
                 >
@@ -106,58 +106,56 @@ function ImageSetComponent({
   );
 }
 
-function ImageViewComponent({
-  stimulusTypeMap,
-  stimulusType,
-  imageCollectionData,
-  imagePreview,
+function TraceOverviewComponent({
+  trace,
+  protocol,
   onStimulusChange,
-  onRepetitionClicked,
-}: ImageViewComponentProps) {
-  const sortedImageCollectionData = React.useMemo(() => {
-    const entries = Array.from(imageCollectionData.entries() || []);
-
-    return entries.sort(([stimulusTypeA], [stimulusTypeB]) => {
-      const textA = stimulusTypeA.toUpperCase();
-      const textB = stimulusTypeB.toUpperCase();
-      const AvB = textA > textB ? 1 : 0;
-      return textA < textB ? -1 : AvB;
-    });
-  }, [imageCollectionData]);
+  onRepetitionClick,
+}: TraceOverviewComponentProps) {
+  const protocols = useMemo(() => trace.getProtocols(), [trace]);
+
+  const repetitionMap = useMemo(
+    () =>
+      protocols.reduce(
+        (map, protocol) => map.set(protocol, trace.getRepetitions(protocol)),
+        new Map<string, string[]>()
+      ),
+    [trace]
+  );
 
   return (
     <div className="flex flex-col gap-10">
-      {stimulusTypeMap.size > 1 && (
+      {protocols.length > 1 && (
         <div className="flex flex-col gap-2">
-          Select Stimulus ({stimulusTypeMap.size} available)
+          Select Stimulus ({protocols.length} available)
           <Select
             className="stimulus-select"
             placeholder="Select a stimulus"
-            value={stimulusType}
+            value={protocol}
             onChange={onStimulusChange}
           >
             <Option value="All">All</Option>
-            {Array.from(stimulusTypeMap.entries()).map(([key, amount]) => (
-              <Option value={key} key={key}>
-                {key} {amount > 1 && `(${amount})`}
+            {Array.from(repetitionMap.entries()).map(([protocol, repetitions]) => (
+              <Option value={protocol} key={protocol}>
+                {protocol} {repetitions.length > 1 && `(${repetitions.length})`}
               </Option>
             ))}
           </Select>
         </div>
       )}
       <div className="flex flex-col gap-5">
-        {sortedImageCollectionData.map(([itemStimulusType, { repetitions }]) => (
-          <ImageSetComponent
-            key={itemStimulusType}
-            stimulusType={itemStimulusType}
-            repetitions={repetitions}
-            onRepetitionClicked={onRepetitionClicked}
-            imagePreview={imagePreview}
-          />
+        {protocols.map((protocol) => (
+          <h2>{protocol}</h2>
+          // <ImageSetComponent
+          //   key={protocol}
+          //   stimulusType={protocol}
+          //   repetitions={repetitionMap.get(protocol) ?? []}
+          //   onRepetitionClick={onRepetitionClick}
+          // />
         ))}
       </div>
     </div>
   );
 }
 
-export default ImageViewComponent;
+export default TraceOverviewComponent;

src/components/explore-section/EphysViewerContainer/ImageViewContainer.tsx

@@ -1,43 +1,30 @@
 import { NexusImage } from './NexusImage';
-import ImageViewComponent from './ImageViewComponent';
+import TraceOverviewComponent from './ImageViewComponent';
 import NWBTrace from './nwb-trace';
 
 interface ImageViewContainerProps {
   trace: NWBTrace;
   stimulusType: string;
   onStimulusChange: (value: string) => void;
-  onRepetitionClicked: (stimulusType: string, rep: string) => () => void;
+  onRepetitionClick: (stimulusType: string, rep: string) => () => void;
 }
 
-function ImageViewContainer({
+function TraceOverview({
   trace,
   stimulusType,
-  onRepetitionClicked,
+  onRepetitionClick,
   onStimulusChange,
 }: ImageViewContainerProps) {
   return (
     <>
-      <ImageViewComponent
-        {...{
-          trace,
-          stimulusType,
-          onStimulusChange,
-          onRepetitionClicked,
-          // eslint-disable-next-line react/no-unstable-nested-components
-          imagePreview: ({ imageUrl }) => (
-            // We need to put this as a prop because it contains effects (container, not component)
-            <NexusImage
-              {...{
-                imageUrl,
-                org: orgLabel,
-                project: projectLabel,
-              }}
-            />
-          ),
-        }}
+      <TraceOverviewComponent
+        trace={trace}
+        protocol={stimulusType}
+        onStimulusChange={onStimulusChange}
+        onRepetitionClick={onRepetitionClick}
       />
     </>
   );
 }
 
-export default ImageViewContainer;
+export default TraceOverview;

src/components/explore-section/EphysViewerContainer/NexusImage.tsx

@@ -3,22 +3,22 @@ import { classNames } from '@/util/utils';
 
 type TraceSelectorGroupProps = {
   selectedSweeps: string[];
-  sweepsOptions: { label: string; value: string }[];
+  sweepOptions: { label: string; value: string }[];
   handlePreviewSweep: (value?: string) => void;
   setSelectedSweeps: (sweeps: string[]) => void;
   colorMap: Map<string, string>;
   previewItem?: string;
 };
 
-function TraceSelectorGroup({
+function SweepSelector({
   previewItem,
   selectedSweeps,
-  sweepsOptions,
+  sweepOptions,
   handlePreviewSweep,
   setSelectedSweeps,
   colorMap,
 }: TraceSelectorGroupProps) {
-  const sweeps = sweepsOptions.map(({ label, value }) => {
+  const sweeps = sweepOptions.map(({ label, value }) => {
     const isSelected = selectedSweeps.includes(value);
     const isEmptySelection = !selectedSweeps.length;
     const isHighlight = isSelected || (isEmptySelection && !previewItem);
@@ -69,11 +69,11 @@ function TraceSelectorGroup({
   return (
     <div className="flex flex-col gap-3">
       <span className="font-bold text-dark">
-        Sweep <small className="text-sm font-light">({sweepsOptions.length} available)</small>
+        Sweep <small className="text-sm font-light">({sweepOptions.length} available)</small>
       </span>
       <div className="flex flex-wrap items-center">{sweeps}</div>
     </div>
   );
 }
 
-export default TraceSelectorGroup;
+export default SweepSelector;

src/components/explore-section/EphysViewerContainer/TraceSelectorGroup.tsx renamed to src/components/explore-section/EphysViewerContainer/SweepSelector.tsx

@@ -5,7 +5,7 @@ import DistinctColors from 'distinct-colors';
 import StimulusPlot from './StimulusPlot';
 import ResponsePlot from './ResponsePlot';
 import OptionSelect from '@/components/explore-section/EphysViewerContainer/OptionSelect';
-import TraceSelectorGroup from '@/components/explore-section/EphysViewerContainer/TraceSelectorGroup';
+import SweepSelector from '@/components/explore-section/EphysViewerContainer/SweepSelector';
 import NWBTrace from './nwb-trace';
 
 interface EphysPlotProps {
@@ -68,7 +68,7 @@ function TraceDetailsView({ trace, defaultProtocol, defaultRepetition }: EphysPl
     </Select.Option>
   ));
 
-  const sweepsOptions = sweeps ? sweeps.map((sweep) => ({ label: sweep, value: sweep })) : [];
+  const sweepOptions = sweeps ? sweeps.map((sweep) => ({ label: sweep, value: sweep })) : [];
 
   const handleProtocolChange = (protocol: string) => {
     setSelectedDataSet(protocol);
@@ -80,7 +80,7 @@ function TraceDetailsView({ trace, defaultProtocol, defaultRepetition }: EphysPl
   const handlePreviewSweep = (value?: string) => {
     if (!value) {
       setPreviewItem(undefined);
-    } else if (sweepsOptions.length > 1 && !selectedSweeps.includes(value)) {
+    } else if (sweepOptions.length > 1 && !selectedSweeps.includes(value)) {
       setPreviewItem(value);
     }
   };
@@ -115,13 +115,13 @@ function TraceDetailsView({ trace, defaultProtocol, defaultRepetition }: EphysPl
           handleChange={handleRepetitionChange}
           hideWhenSingle
         />
-        <TraceSelectorGroup
+        <SweepSelector
           handlePreviewSweep={handlePreviewSweep}
           colorMap={colorMap}
           selectedSweeps={selectedSweeps}
           previewItem={previewItem}
           setSelectedSweeps={setSelectedSweeps}
-          sweepsOptions={sweepsOptions}
+          sweepOptions={sweepOptions}
         />
         {sweeps.length > 1 && (
           <button

src/components/explore-section/EphysViewerContainer/TraceDetailsView.tsx

@@ -4,12 +4,13 @@ import { FileImageOutlined, LineChartOutlined } from '@ant-design/icons';
 import { useAtomValue } from 'jotai';
 
 import { ExperimentalTrace } from '@/types/explore-section/delta-experiment';
-import ImageViewContainer from '@/components/explore-section/EphysViewerContainer/ImageViewContainer';
+import TraceOverview from '@/components/explore-section/EphysViewerContainer/ImageViewContainer';
 import TraceDetailsView from './TraceDetailsView';
-import './styles/ephys-plugin-styles.scss';
 import sessionAtom from '@/state/session';
 import useTrace from './hooks/use-nwb-trace';
 
+import './styles/ephys-plugin-styles.scss';
+
 enum VIEW {
   OVERVIEW = 'overview',
   DETAILED = 'detailed',
@@ -57,14 +58,14 @@ function EphysViewerContainer({ resource }: { resource: ExperimentalTrace }) {
         </Radio.Button>
       </Radio.Group>
 
-      {/* {view === VIEW.OVERVIEW && (
-        <ImageViewContainer
+      {view === VIEW.OVERVIEW && (
+        <TraceOverview
           trace={trace}
           stimulusType={protocol}
-          onRepetitionClicked={showRepetitionDetails}
+          onRepetitionClick={showRepetitionDetails}
           onStimulusChange={setProtocol}
         />
-      )} */}
+      )}
 
       {view === VIEW.DETAILED && (
         <TraceDetailsView