[Feature] Implement custom sorting of series in study panel

[sedghi]

@IbrahimCSAE Updated the descriptions on this, thanks !

Context

The goal of this epic is to enhance the OHIF Viewer by implementing a custom sorting feature for series within the study panel. This feature will improve the user experience by allowing users to sort series based on different criteria, such as acquisition datetime, series number, or any other relevant metadata.

Background

The current implementation of the OHIF Viewer does not support flexible sorting of series in the study panel. Users have requested the ability to sort series according to specific needs, which is essential for efficient navigation and review of medical images. This feature has been highlighted in various issues and discussions within the OHIF community.

Related Issues and Discussions

• [Feature Request] sorting by SeriesTime and SeriesDate #4004
• [Feature Request] sorting by Acquisition Datetime and nonClip display  #4076
• [Bug] sort by function #3959
• [Question] Sorting instances by date descending/ascending  #3933
• [Feature] Implement custom sorting of series in study panel #4083
• Fix Sort by Date #2285
• Community Discussion - Sort instances/study by acquisition datetime

Objectives

Custom Sorting Implementation: Allow users to sort series based on various criteria.

• AcquisitionDate
• Series Number
• Modality
• Any other relevant DICOM metadata

User Interface Enhancements:

• Update the study panel UI to include sorting options.
• Provide an intuitive and user-friendly sorting interface.

Allow users to override the initially used default sort

• Create a customization module to replace the default sort if available on study panel load

[niirdan]

@sedghi thanks for gathering all information , unfortunately all of them are unsolved / answered
currently I'm trying to implement a custom function which solve this topic, hope to hear from someone which already deal with this subject

[niirdan]

UPDATE :

function getDisplaySetsFromSeries(instances) {
  // If the series has no instances, stop here
  if (!instances || !instances.length) {
    throw new Error('No instances were provided');
  }

  var displaySets = [];
  const sopClassUids = getSopClassUids(instances);

  // Search through the instances (InstanceMetadata object) of this series
  // Split Multi-frame instances and Single-image modalities
  // into their own specific display sets. Place the rest of each
  // series into another display set.
  const stackableInstances = [];
  instances.forEach(instance => {
    // All imaging modalities must have a valid value for sopClassUid (x00080016) or rows (x00280010)
    if (!isImage(instance.SOPClassUID) && !instance.Rows) {
      return;
    }

    let displaySet;

    //if (isMultiFrame(instance)) {
    displaySet = makeDisplaySet([instance]);

    displaySet.setAttributes({
      sopClassUids,
      isClip: isMultiFrame(instance) === true ? true : false,
      instanceNumber: instance.InstanceNumber,
      acquisitionDatetime: instance.AcquisitionDateTime,
    });
    // Case when Clip set numImagesFrames to be number of frames
    if (instance.NumberOfFrames !== undefined) {
      displaySet.setAttribute('numImageFrames', instance.NumberOfFrames)
    }
    displaySets.push(displaySet);
    //} else if (isSingleImageModality(instance.Modality)) {
    // displaySet = makeDisplaySet([instance]);
    //displaySet.setAttributes({
    // sopClassUids,
    // instanceNumber: instance.InstanceNumber,
    // acquisitionDatetime: instance.AcquisitionDateTime
    //});
    // displaySets.push(displaySet);
    // } else {
    //   stackableInstances.push(instance);
    // }
  });
  // igorned - never arrive this statement
  if (stackableInstances.length) {
    const displaySet = makeDisplaySet(stackableInstances);
    displaySet.setAttribute('studyInstanceUid', instances[0].StudyInstanceUID);
    displaySet.setAttributes({
      sopClassUids,
    });
    displaySets.push(displaySet);
  }

  function sortByAcquisitionDatetime(a, b) {
    if (a.acquisitionDatetime && b.acquisitionDatetime) {
      return a.acquisitionDatetime.localeCompare(b.acquisitionDatetime);
    }
  }
  // Sort the array
  let newDisplaySets = displaySets.sort(sortByAcquisitionDatetime)
  return newDisplaySets //displaySets;
}

I Edited getDisplaySetsFromSeries function which located in getSopClassHandlerModule.js

• Each single frame now individually displayed as one "displaySet" and not as a stack of single frame images.
• I created a function which orders each DisplaySet to be sorted by AcquisitionDateTime , and returns a new array

When i log the newDisplaySets , it seems that it indeed sorted the AcquisitonDateTIme correctly but when i Return it from the main function - it doesn't really sort it properly

Any advise/ something I missed?

[sedghi]

@niirdan We will tackle this for the next release. You could help us with the requirement gathering - what do you want to achieve, and what is your use case?

[niirdan]

Ok course, First of all I want to thank you for the help and I would like to donate to the project if it’s possible . The end users are cardiologists, In order for them to use the viewer properly is by viewing each series by its acquisitionDateTime tag(0008,002A) (the chronological order which the dicom material created) for example ; 1. Cine 2024 05 06 14:22:00 2. Single image 2024 05 06 14:25:12 3. Cine 2024 05 06 14:30:14 The first thing which prevented this kind of sorting Is the fact that single images stack together (which I solved with the code above) I hope my explanation was clear enough , please let me know if not

…

On Mon, 6 May 2024 at 16:29 Alireza ***@***.***> wrote: @niirdan <https://github.com/niirdan> We will tackle this for the next release. You could help us with the requirement gathering - what do you want to achieve, and what is your use case? — Reply to this email directly, view it on GitHub <#4083 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A5B2UZQVWNMKFBTU36F36VDZA6ATFAVCNFSM6AAAAABHG733UWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAOJWGAZDIMRTGA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[sedghi]

Thanks, here is the link for donation

[sedghi]

@niirdan So you want to stack single images or you don't want?

[niirdan]

Stack single images together will make it useless to sort all the instances by their chronological order ,so without stacking them

…

On Mon, 6 May 2024 at 17:26 Alireza ***@***.***> wrote: @niirdan <https://github.com/niirdan> So you want to stack single images or you don't want? — Reply to this email directly, view it on GitHub <#4083 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A5B2UZRVP3SRK3GQ67CC4XDZA6HHVAVCNFSM6AAAAABHG733UWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAOJWGE3DOMBTGQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[jmaratt]

Would it be possible to present studies in panel in the same order it is passed into the url with?StudyInstanceUIDs=?

I have found that manipulating tabData.studies in StudyBrowser.tsx can impact the presentation order. I was having trouble identifying where the study list was being initially sorted to try to address it at that point. Could you point me to that function? Thanks!

Update: I found where it does this and can see why my ask would be difficult and a fringe use case. I think I accomplish what i need just by sorting by date there. Thank you.