Fix/update branch cherry pick (#2039)

* Update all the icons * Turn off global tool sync; watch as the world burns * Shift a bunch of things around so we can start tracking/setting per element * ToolBarService to initiate one of three different calls; callback passed to all button types * SplitButton and Toolbar Button to use new `onInteraction` prop and new toolbar state * Changes to toolbar button interface and config * Fix broken layout selector * Update SR viewport to activate tools in viewport component * Duplicate activation logic in measurement tracking extension * Add alternative/dashed variants for SR Viewport * pass through "setToolActive" commands for other viewport types * fix small overlay bugs (no wwwc or scale info) * Show SpacingBetweenSlices instead of PixelSpacing in patient information dialog * Fix prop-types * Update tracked viewport to have alternative tracked styling * alt styling for SR viewports * Update to support isLocked + isRehydratable * fix broken logic * fix broken logic * switch icon style * fix icon styles * hover and click to start flow * expedited workflow when data is not dirty (just after SR hydration) * fix: setting elliptical roi tool * fix arrow annotate dialog * fix: do not show learn more button for now * remove dead code * simpler cache invalidation * simpler cache invalidation part 2 * Fix for unable to spand study cards on separate pages
2020-09-14 21:18:46 -04:00
1 parent 365ba2fa72
commit cae54b0779
@@ -5,7 +5,6 @@ import log from '../log.js';
 *
 * @typedef {Object} CommandDefinition
 * @property {Function} commandFn - Command to call
- * @property {Array} storeContexts - Array of string of modules required from store
 * @property {Object} options - Object of params to pass action
 */

@@ -161,19 +160,10 @@ export class CommandsManager {
      return;
    }

-    const { commandFn, storeContexts = [] } = definition;
-    const definitionOptions = definition.options;
-
-    let commandParams = {};
-    const appState = this._getAppState();
-    storeContexts.forEach(context => {
-      commandParams[context] = appState[context];
-    });
-
-    commandParams = Object.assign(
+    const { commandFn } = definition;
+    const commandParams = Object.assign(
      {},
-      commandParams, // Required store contexts
-      definitionOptions, // "Command configuration"
+      definition.options, // "Command configuration"
      options // "Time of call" info
    );

@@ -1,7 +1,8 @@
 import log from './../log.js';

 export default class ServicesManager {
-  constructor() {
+  constructor(commandsManager) {
+    this._commandsManager = commandsManager;
    this.services = {};
    this.registeredServiceNames = [];
  }
@@ -35,6 +36,7 @@ export default class ServicesManager {
    if (service.create) {
      this.services[service.name] = service.create({
        configuration,
+        commandsManager: this._commandsManager,
      });
    } else {
      log.warn(`Service create factory function not defined. Exiting early.`);
@@ -3,10 +3,13 @@ import pubSubServiceInterface from '../_shared/pubSubServiceInterface';

 const EVENTS = {
  TOOL_BAR_MODIFIED: 'event::toolBarService:toolBarModified',
+  TOOL_BAR_STATE_MODIFIED: 'event::toolBarService:toolBarStateModified',
 };

 export default class ToolBarService {
-  constructor() {
+  constructor(commandsManager) {
+    this._commandsManager = commandsManager;
+    //
    this.EVENTS = EVENTS;
    this.listeners = {};
    this.buttons = {};
@@ -17,6 +20,18 @@ export default class ToolBarService {
       */
    };

+    // TODO: Do we need to track per context? Or do we allow for a mixed
+    // definition that adapts based on context?
+    this.state = {
+      primaryToolId: 'Wwwc',
+      toggles: {
+        /* id: true/false */
+      },
+      groups: {
+        /* track most recent click per group...? */
+      },
+    };
+
    Object.assign(this, pubSubServiceInterface);
  }

@@ -24,17 +39,59 @@ export default class ToolBarService {
    this.extensionManager = extensionManager;
  }

+  /**
+   *
+   * @param {*} interaction
+   */
+  recordInteraction(interaction) {
+    const commandsManager = this._commandsManager;
+    const { groupId, itemId, interactionType } = interaction;
+
+    switch (interactionType) {
+      case 'action': {
+        break;
+      }
+      case 'tool': {
+        this.state.primaryToolId = itemId;
+        // TODO: Force run this for all contexts? Even inactive?
+        // or... They'll just detect primaryToolId when they spin up and apply...
+        commandsManager.runCommand('setToolActive', interaction.commandOptions);
+        break;
+      }
+      case 'toggle': {
+        this.state.toggles[itemId] =
+          this.state.toggles[itemId] === undefined
+            ? true
+            : !this.state.toggles[itemId];
+        break;
+      }
+    }
+
+    // Run command if there's one associated
+    //
+    // NOTE: Should probably just do this for tools as well?
+    // But would be nice if we could enforce at least the command name?
+    if (interaction.commandName) {
+      commandsManager.runCommand(
+        interaction.commandName,
+        interaction.commandOptions
+      );
+    }
+
+    // Track last touched id for each group
+    if (groupId) {
+      this.state.groups[groupId] = itemId;
+    }
+
+    this._broadcastChange(this.EVENTS.TOOL_BAR_STATE_MODIFIED, {});
+  }
+
  getButtons() {
    return this.buttons;
  }

  getActiveTools() {
-    return Object.keys(this.buttons).filter(key => {
-      const button = this.buttons[key];
-      if (button && button.props && button.props.isActive) {
-        return button;
-      }
-    });
+    return [this.state.primaryToolId, ...Object.keys(this.state.toggles)];
  }

  setButton(id, button) {
@@ -43,7 +100,7 @@ export default class ToolBarService {
      this._broadcastChange(this.EVENTS.TOOL_BAR_MODIFIED, {
        buttons: this.buttons,
        button: this.buttons[id],
-        buttonSections: this.buttonSections
+        buttonSections: this.buttonSections,
      });
    }
  }
@@ -52,7 +109,7 @@ export default class ToolBarService {
    this.buttons = buttons;
    this._broadcastChange(this.EVENTS.TOOL_BAR_MODIFIED, {
      buttons: this.buttons,
-      buttonSections: this.buttonSections
+      buttonSections: this.buttonSections,
    });
  }

@@ -84,41 +141,27 @@ export default class ToolBarService {
    this._broadcastChange(this.EVENTS.TOOL_BAR_MODIFIED, {});
  }

+  /**
+   *
+   * Finds a button section by it's name, then maps the list of string name
+   * identifiers to schema/values that can be used to render the buttons.
+   *
+   * @param {string} key
+   * @param {*} props
+   */
  getButtonSection(key, props) {
    const buttonSectionIds = this.buttonSections[key];
    const buttonsInSection = [];

-    if (!buttonSectionIds) {
-      return buttonsInSection;
-    }
-
-    buttonSectionIds.forEach(btnIdOrArray => {
-      const isNested = Array.isArray(btnIdOrArray);
-
-      if (isNested) {
-        const btnIds = btnIdOrArray;
-        const nestedButtons = [];
-
-        btnIds.forEach(nestedBtnId => {
-          const nestedBtn = this.buttons[nestedBtnId];
-          const metadata = { isNested: true };
-          const mappedNestedBtn = this._mapButtonToDisplay(nestedBtn, key, metadata, props);
-
-          nestedButtons.push(mappedNestedBtn);
-        });
-
-        if (nestedButtons.length) {
-          buttonsInSection.push(nestedButtons);
-        }
-      } else {
-        const btnId = btnIdOrArray;
+    if (buttonSectionIds && buttonSectionIds.length !== 0) {
+      buttonSectionIds.forEach(btnId => {
        const btn = this.buttons[btnId];
-        const metadata = { isNested: false };
+        const metadata = {};
        const mappedBtn = this._mapButtonToDisplay(btn, key, metadata, props);

        buttonsInSection.push(mappedBtn);
-      }
-    });
+      });
+    }

    return buttonsInSection;
  }
@@ -159,6 +202,8 @@ export default class ToolBarService {
   *
   * @param {*} btn
   * @param {*} btnSection
+   * @param {*} metadata
+   * @param {*} props - Props set by the Viewer layer
   */
  _mapButtonToDisplay(btn, btnSection, metadata, props) {
    const { id, type, component } = btn;
@@ -168,25 +213,10 @@ export default class ToolBarService {
      return;
    }

-    const onClick = evt => {
-      if (buttonType.clickHandler) {
-        buttonType.clickHandler(evt, btn, btnSection, metadata, props);
-      }
-      if (btn.props.onClick) {
-        btn.onClick(evt, btn, btnSection);
-      }
-      if (btn.props.clickHandler) {
-        btn.clickHandler(evt, btn, btnSection);
-      }
-      if (props && props.onClick) {
-        props.onClick(evt, btn, btnSection, props);
-      }
-    };
-
    return {
      id,
      Component: component || buttonType.defaultComponent,
-      componentProps: Object.assign({}, btn.props, { onClick }), //
+      componentProps: Object.assign({}, btn.props, props),
    };
  }
 }
@@ -2,7 +2,7 @@ import ToolBarService from './ToolBarService';

 export default {
  name: 'ToolBarService',
-  create: ({ configuration = {} }) => {
-    return new ToolBarService();
+  create: ({ configuration = {}, commandsManager }) => {
+    return new ToolBarService(commandsManager);
  },
 };
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <g fill-rule="evenodd">
+        <path fill="currentcolor" fill-rule="nonzero" d="M17.207 10.793c.36.36.388.928.083 1.32l-.083.094-5 5c-.39.39-1.024.39-1.414 0-.36-.36-.388-.928-.083-1.32l.083-.094 4.292-4.293-4.292-4.293c-.36-.36-.388-.928-.083-1.32l.083-.094c.36-.36.928-.388 1.32-.083l.094.083 5 5z"/>
+        <path fill="currentcolor" fill-rule="nonzero" d="M17.5 11.5c0 .513-.386.936-.883.993l-.117.007H6c-.552 0-1-.448-1-1 0-.513.386-.936.883-.993L6 10.5h10.5c.552 0 1 .448 1 1z"/>
+    </g>
+</svg>
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13">
+    <g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g stroke="currentColor">
+            <path stroke-width="1.5" d="M0.5 3L0.5 0" transform="translate(0 1) translate(6 3)"/>
+            <path d="M0.5 4.5L0.5 4.5" transform="translate(0 1) translate(6 3)"/>
+            <path stroke-width="1.5" d="M.489 5.25c-.065.002-.127.03-.172.078-.044.048-.068.112-.065.177.005.135.115.243.25.245h.009c.065-.002.127-.03.171-.078.045-.048.068-.112.066-.177-.004-.134-.112-.241-.246-.245" transform="translate(0 1) translate(6 3)"/>
+        </g>
+    </g>
+</svg>
@@ -1,9 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 256 512"
-  aria-labelledby="title"
-  fill="currentColor"
->
-  <title id="title">Angle Left</title>
-  <path d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"/>
-</svg>
@@ -1,9 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 1792 1792"
-  aria-labelledby="title"
-  fill="currentColor"
->
-  <title id="title">Bars</title>
-  <path d="M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z" />
-</svg>
@@ -1,9 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 448 512"
-  aria-labelledby="title"
-  fill="currentColor"
->
-  <title id="title">Square Outline</title>
-  <path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z" />
-</svg>
@@ -1,9 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 512 512"
-  aria-labelledby="title"
-  fill="currentColor"
->
-  <title id="title">Circle</title>
-  <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z" />
-</svg>
@@ -1,9 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 512 512"
-  aria-labelledby="title"
-  fill="currentColor"
->
-  <title id="title">Dot Circle</title>
-  <path d="M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z"/>
-</svg>
@@ -1,9 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 22 28"
-  aria-labelledby="title"
-  fill="currentColor"
->
-  <title id="title">Ellipse Horizontal</title>
-  <path d="M6 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-3c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h3c0.828 0 1.5 0.672 1.5 1.5zM14 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-3c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h3c0.828 0 1.5 0.672 1.5 1.5zM22 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-3c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h3c0.828 0 1.5 0.672 1.5 1.5z" />
-</svg>
@@ -1,9 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 28"
-  aria-labelledby="title"
-  fill="currentColor"
->
-  <title id="title">Adjust</title>
-  <path d="M12 22.5v-17c-4.688 0-8.5 3.813-8.5 8.5s3.813 8.5 8.5 8.5zM24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12 12 5.375 12 12z" />
-</svg>
@@ -1,9 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 28"
-  aria-labelledby="title"
-  fill="currentColor"
->
-  <title id="title">Reset</title>
-  <path d="M24 14c0 6.609-5.391 12-12 12-3.578 0-6.953-1.578-9.234-4.328-0.156-0.203-0.141-0.5 0.031-0.672l2.141-2.156c0.109-0.094 0.25-0.141 0.391-0.141 0.141 0.016 0.281 0.078 0.359 0.187 1.531 1.984 3.828 3.109 6.312 3.109 4.406 0 8-3.594 8-8s-3.594-8-8-8c-2.047 0-3.984 0.781-5.437 2.141l2.141 2.156c0.297 0.281 0.375 0.719 0.219 1.078-0.156 0.375-0.516 0.625-0.922 0.625h-7c-0.547 0-1-0.453-1-1v-7c0-0.406 0.25-0.766 0.625-0.922 0.359-0.156 0.797-0.078 1.078 0.219l2.031 2.016c2.203-2.078 5.187-3.313 8.266-3.313 6.609 0 12 5.391 12 12z" />
-</svg>
@@ -1,9 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  aria-labelledby="title"
-  fill="currentColor"
->
-  <title id="title">Rotate Right</title>
-  <path d="M16.875 15.469c0.563-0.75 0.891-1.594 1.031-2.484h2.016c-0.188 1.406-0.703 2.719-1.594 3.891zM12.984 17.906c0.891-0.141 1.734-0.469 2.484-1.031l1.453 1.453c-1.172 0.891-2.531 1.406-3.938 1.594v-2.016zM19.922 11.016h-2.016c-0.141-0.891-0.469-1.734-1.031-2.484l1.453-1.406c0.891 1.172 1.406 2.484 1.594 3.891zM15.563 5.531l-4.547 4.453v-3.891c-2.859 0.469-5.016 2.953-5.016 5.906s2.156 5.438 5.016 5.906v2.016c-3.938-0.469-7.031-3.844-7.031-7.922s3.094-7.453 7.031-7.922v-3.094z" />
-</svg>
@@ -1,9 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 28 28"
-  aria-labelledby="title"
-  fill="currentColor"
->
-  <title id="title">YouTube Logo</title>
-  <path d="M11.109 17.625l7.562-3.906-7.562-3.953v7.859zM14 4.156c5.891 0 9.797 0.281 9.797 0.281 0.547 0.063 1.75 0.063 2.812 1.188 0 0 0.859 0.844 1.109 2.781 0.297 2.266 0.281 4.531 0.281 4.531v2.125s0.016 2.266-0.281 4.531c-0.25 1.922-1.109 2.781-1.109 2.781-1.062 1.109-2.266 1.109-2.812 1.172 0 0-3.906 0.297-9.797 0.297v0c-7.281-0.063-9.516-0.281-9.516-0.281-0.625-0.109-2.031-0.078-3.094-1.188 0 0-0.859-0.859-1.109-2.781-0.297-2.266-0.281-4.531-0.281-4.531v-2.125s-0.016-2.266 0.281-4.531c0.25-1.937 1.109-2.781 1.109-2.781 1.062-1.125 2.266-1.125 2.812-1.188 0 0 3.906-0.281 9.797-0.281v0z" />
-</svg>
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 17">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-width="1.5">
+        <path d="M2.5 14.5L20.688 14.438" transform="translate(1 1)"/>
+        <path d="M1 13.378L13.065 1.313" transform="translate(1 1) rotate(-10 7.033 7.345)"/>
+        <path stroke-dasharray="1 2.7" d="M16.194 11.65c.903-3.897-.636-6.269-4.62-7.115" transform="translate(1 1)"/>
+    </g>
+</svg>
@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23">
-    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
        <path d="M8.593 20.252L0 20.252 0 11.659M0 20.252L19.642.61" transform="translate(1 1)"/>
    </g>
 </svg>
@@ -1,12 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26">
-    <g fill="none" fill-rule="evenodd" stroke="currentColor" transform="translate(1 1)">
-        <g stroke-linecap="square" stroke-linejoin="round" stroke-width="2">
-            <path d="M0.067 14.79L14 1" transform="translate(5 4)"/>
-            <path d="M2.16 3.908L11.899 12.138" transform="translate(5 4) rotate(4.465 7.03 8.023)"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor">
+        <g stroke-linecap="round" stroke-linejoin="round">
+            <path stroke-width="1.5" d="M19.729-.336c.448 0 .895.171 1.237.513h0l1.819 1.817c.314.314.483.717.51 1.127.027.433-.106.873-.398 1.226h0l-18.8 18.81c-.37.37-.854.554-1.338.554-.485 0-.97-.185-1.339-.554h0L-.196 21.54c-.37-.37-.554-.854-.554-1.339 0-.484.185-.968.554-1.338h0L18.492.177c.341-.342.79-.513 1.237-.513z" transform="translate(2 2)"/>
+            <path d="M4.145 18.914L5.716 20.477M6.569 16.49L8.143 18.05M8.993 14.066L10.565 15.627M11.417 11.642L12.992 13.201M13.841 9.217L15.407 10.787M16.135 6.923L17.7 8.494M18.559 4.499L20.125 6.069" transform="translate(2 2)"/>
        </g>
-        <rect width="5" height="5" x="3" y="3" stroke-width="1.5" rx="2.5"/>
-        <rect width="5" height="5" x="16" y="16" stroke-width="1.5" rx="2.5"/>
-        <rect width="5" height="5" x="19" stroke-width="1.5" rx="2.5"/>
-        <rect width="5" height="5" y="19" stroke-width="1.5" rx="2.5"/>
+        <path stroke-width="1.5" d="M9.873 5.904L6.089 2.121c-.39-.39-1.024-.39-1.414 0L2.907 3.889c-.39.39-.39 1.023 0 1.414l3.784 3.783h0M14 16.382l3.783 3.783c.391.39 1.024.39 1.415 0l1.767-1.767c.39-.39.39-1.024 0-1.415L17.182 13.2h0" transform="translate(2 2)"/>
    </g>
 </svg>
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 18">
-    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(1 1.139)">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(1 1)">
        <path d="M5.983 2.556c.406-.022.795-.173 1.109-.432L8.944.432c.314-.26.703-.41 1.11-.432h2.903c.403.023.788.175 1.099.432l1.852 1.692c.314.259.703.41 1.11.432h3.426c1.099.112 1.93 1.045 1.917 2.149v8.712c0 1.058-.858 1.916-1.917 1.916H2.556c-1.059 0-1.917-.858-1.917-1.916V4.705c-.013-1.104.818-2.037 1.917-2.15h3.427z"/>
        <circle cx="11.5" cy="7.986" r="3.514"/>
        <path d="M19.167 5.43c.176 0 .32.144.32.32 0 .176-.144.32-.32.32-.177 0-.32-.144-.32-.32 0-.176.143-.32.32-.32"/>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="1.5" transform="translate(1 1)">
+        <circle cx="11" cy="10.999" r="10.542" stroke-linecap="round" stroke-linejoin="round"/>
+        <path fill="currentColor" d="M8.542 8.724l5.762 2.306-5.762 2.88V8.725z"/>
+    </g>
+</svg>
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 25">
-    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="2" transform="translate(1 1)">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M19.833 14.625L19.833 22.958M24 18.792L15.667 18.792"/>
-        <ellipse cx="10.5" cy="7" rx="6.5" ry="10" transform="rotate(89 10.5 7)"/>
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" transform="translate(1 1)">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.833 14.625L19.833 22.958M24 18.792L15.667 18.792"/>
+        <ellipse cx="10.5" cy="7" stroke-width="1.5" rx="6.5" ry="10" transform="rotate(89 10.5 7)"/>
    </g>
 </svg>
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 22">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-width="1.5">
+        <path d="M6.632 3.316H2c-1.105 0-2 .895-2 2v9.263c0 1.105.895 2 2 2h4.632" transform="translate(1 1)"/>
+        <path stroke-dasharray="1 3.1" d="M14.368 3.316H19c1.105 0 2 .895 2 2v9.263c0 1.105-.895 2-2 2h-4.632 0" transform="translate(1 1)"/>
+        <path d="M10.5 0.553L10.5 19.342" transform="translate(1 1)"/>
+    </g>
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20">
+    <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
+        <rect width="20" height="18" stroke="currentColor" stroke-width="1.5" rx="2"/>
+        <path fill="currentColor" d="M10 18H2c-1.105 0-2-.895-2-2V2C0 .895.895 0 2 0h8v3C6.686 3 4 5.686 4 9c0 3.238 2.566 5.878 5.775 5.996L10 15v3zM10 3c3.314 0 6 2.686 6 6s-2.686 6-6 6z"/>
+    </g>
+</svg>
@@ -1,7 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26">
-    <g fill="none" fill-rule="evenodd" stroke="currentColor" transform="translate(1 1)">
-        <path stroke-linecap="square" stroke-linejoin="round" stroke-width="2" d="M5 18.79L19.436 4.353"/>
-        <rect width="5" height="5" x="19" stroke-width="1.5" rx="2.5"/>
-        <rect width="5" height="5" y="19" stroke-width="1.5" rx="2.5"/>
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(1 1)">
+        <rect width="24.749" height="7.779" x="-.375" y="8.111" stroke-width="1.5" rx="1" transform="rotate(-45.001 12 12)"/>
+        <path d="M5.617 12.884L7.632 14.868M8.185 10.315L10.685 12.815M10.622 7.879L12.372 9.629M13.058 5.442L15.558 7.942M15.612 2.888L17.627 4.874M3.063 15.438L5.563 17.938"/>
    </g>
 </svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" transform="translate(1 1)">
+        <circle cx="8.75" cy="8.749" r="8.333"/>
+        <path d="M19.583 19.582L14.643 14.642M4.583 8.749L12.917 8.749M8.75 4.582L8.75 12.916"/>
+    </g>
+</svg>
@@ -1,8 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23">
-    <g fill="currentColor" fill-rule="evenodd"  stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-        <path d="M9.882 18.529L9.882 0M18.529 9.882L1.235 9.882M7.412 2.468L9.88 0 12.364 2.484" transform="translate(1 1.5)"/>
-        <path d="M7.412 19.762L9.88 17.294 12.364 19.778" transform="translate(1 1.5) rotate(-180 9.888 18.536)"/>
-        <path d="M-1.234 11.114L1.234 8.646 3.718 11.13" transform="translate(1 1.5) rotate(-90 1.242 9.888)"/>
-        <path d="M16.06 11.114L18.528 8.646 21.012 11.13" transform="translate(1 1.5) rotate(90 18.536 9.888)"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+        <path d="M9.882 18.529L9.882 0M18.529 9.882L1.235 9.882M7.412 2.468L9.88 0 12.364 2.484" transform="translate(1 1)"/>
+        <path d="M7.412 19.762L9.88 17.294 12.364 19.778" transform="translate(1 1) rotate(-180 9.888 18.536)"/>
+        <path d="M-1.234 11.114L1.234 8.646 3.718 11.13" transform="translate(1 1) rotate(-90 1.242 9.888)"/>
+        <path d="M16.06 11.114L18.528 8.646 21.012 11.13" transform="translate(1 1) rotate(90 18.536 9.888)"/>
    </g>
 </svg>
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" transform="translate(1 1)">
+        <path d="M10 0L10 3.333M10 16.667L10 20M0 10L3.333 10M16.667 10L20 10"/>
+        <circle cx="10" cy="10" r="6.667"/>
+        <path d="M10 9.583c.23 0 .417.187.417.417 0 .23-.187.417-.417.417-.23 0-.417-.187-.417-.417 0-.23.187-.417.417-.417"/>
+    </g>
+</svg>
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round">
+        <g stroke-linejoin="round" stroke-width="2">
+            <path d="M3.788 0L3.788 7.576M7.576 3.788L0 3.788" transform="translate(1 1) translate(11.818 10)"/>
+        </g>
+        <path stroke-width="1.5" d="M8.03 13.788H2c-1.105 0-2-.896-2-2V2C0 .895.895 0 2 0h13.892c1.105 0 2 .895 2 2v4.506h0" transform="translate(1 1)"/>
+    </g>
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 21">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+        <path d="M12.308 6.923L19.231 6.923 19.231 0" transform="translate(0 1)"/>
+        <path d="M18.705 6.923C17.303 2.956 13.397.44 9.205.802 5.015 1.165 1.598 4.315.9 8.464c-.7 4.148 1.495 8.245 5.335 9.962 3.841 1.716 8.357.619 10.981-2.67" transform="translate(0 1)"/>
+    </g>
+</svg>
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23">
+    <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
+        <rect width="14.444" height="11.111" x="5.556" y="10" fill="currentColor" rx="2"/>
+        <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+            <path d="M8.889 3.333H4.444C1.99 3.333 0 5.323 0 7.778v4.444"/>
+            <path d="M5.556 0L8.889 3.333 5.556 6.667"/>
+        </g>
+    </g>
+</svg>
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="1.5" transform="translate(1 1)">
+        <rect width="14.286" height="14.286" y="5.714" rx="2"/>
+        <path stroke-linecap="round" d="M3.01 2.857h11.98c1.105 0 2 .896 2 2v12.286h0"/>
+        <path stroke-linecap="round" d="M5.714 0h11.982c1.104 0 2 .895 2 2v12.286h0"/>
+    </g>
+</svg>
@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23">
-    <g fill="none" fill-rule="evenodd" transform="translate(1 1.5)">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
+    <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
        <circle cx="10" cy="10" r="10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
        <path fill="currentColor" d="M17.484 3.367C19.049 5.132 20 7.455 20 10c0 5.523-4.477 10-10 10-2.545 0-4.868-.95-6.633-2.516z"/>
    </g>
@@ -1,3 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-1 0 136 136.21852" >
-  <path fill="currentColor" d="M 93.148438 80.832031 C 109.5 57.742188 104.03125 25.769531 80.941406 9.421875 C 57.851562 -6.925781 25.878906 -1.460938 9.53125 21.632812 C -6.816406 44.722656 -1.351562 76.691406 21.742188 93.039062 C 38.222656 104.707031 60.011719 105.605469 77.394531 95.339844 L 115.164062 132.882812 C 119.242188 137.175781 126.027344 137.347656 130.320312 133.269531 C 134.613281 129.195312 134.785156 122.410156 130.710938 118.117188 C 130.582031 117.980469 130.457031 117.855469 130.320312 117.726562 Z M 51.308594 84.332031 C 33.0625 84.335938 18.269531 69.554688 18.257812 51.308594 C 18.253906 33.0625 33.035156 18.269531 51.285156 18.261719 C 69.507812 18.253906 84.292969 33.011719 84.328125 51.234375 C 84.359375 69.484375 69.585938 84.300781 51.332031 84.332031 C 51.324219 84.332031 51.320312 84.332031 51.308594 84.332031 Z M 51.308594 84.332031 " style=" stroke:none;fill-rule:nonzero;fill-opacity:1;" />
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 22">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(1 1)">
+        <ellipse cx="8.558" cy="8.091" rx="7.814" ry="7.636"/>
+        <path d="M14.419 13.818L20.279 19.545"/>
+    </g>
 </svg>
@@ -2,6 +2,7 @@ import React from 'react';
 // Icons

 import arrowDown from './../../assets/icons/arrow-down.svg';
+import arrowLeft from './../../assets/icons/arrow-left.svg';
 import calendar from './../../assets/icons/calendar.svg';
 import cancel from './../../assets/icons/cancel.svg';
 import clipboard from './../../assets/icons/clipboard.svg';
@@ -13,6 +14,7 @@ import chevronLeft from './../../assets/icons/chevron-left.svg';
 import chevronRight from './../../assets/icons/chevron-right.svg';
 import eyeVisible from './../../assets/icons/eye-visible.svg';
 import eyeHidden from './../../assets/icons/eye-hidden.svg';
+import exclamation from './../../assets/icons/exclamation.svg';
 import externalLink from './../../assets/icons/external-link.svg';
 import groupLayers from './../../assets/icons/group-layers.svg';
 import info from './../../assets/icons/info.svg';
@@ -47,18 +49,18 @@ import toolAnnotate from './../../assets/icons/tool-annotate.svg';
 import toolBidirectional from './../../assets/icons/tool-bidirectional.svg';
 import toolElipse from './../../assets/icons/tool-elipse.svg';
 import toolLength from './../../assets/icons/tool-length.svg';
+import toolStackScroll from './../../assets/icons/tool-stack-scroll.svg';
+import toolMagnify from './../../assets/icons/tool-magnify.svg';
+import toolFlipHorizontal from './../../assets/icons/tool-flip-horizontal.svg';
+import toolInvert from './../../assets/icons/tool-invert.svg';
+import toolRotateRight from './../../assets/icons/tool-rotate-right.svg';
+import toolCine from './../../assets/icons/tool-cine.svg';
+import toolProbe from './../../assets/icons/tool-probe.svg';
+import toolAngle from './../../assets/icons/tool-angle.svg';
+import toolReset from './../../assets/icons/tool-reset.svg';
+import toolRectangle from './../../assets/icons/tool-rectangle.svg';

 /** Old OHIF */
-import oldBars from './../../assets/icons/old-bars.svg';
-import oldCircle from './../../assets/icons/old-circle.svg';
-import oldEllipseH from './../../assets/icons/old-ellipse-h.svg';
-import oldInvert from './../../assets/icons/old-invert.svg';
-import oldRotateRight from './../../assets/icons/old-rotate-right.svg';
-import oldYoutube from './../../assets/icons/old-youtube.svg';
-import oldDotCircle from './../../assets/icons/old-dot-circle.svg';
-import oldAngleLeft from './../../assets/icons/old-angle-left.svg';
-import oldReset from './../../assets/icons/old-reset.svg';
-import oldCircleO from './../../assets/icons/old-circle-o.svg';
 import oldTrash from './../../assets/icons/old-trash.svg';
 import oldPlay from './../../assets/icons/old-play.svg';
 import oldStop from './../../assets/icons/old-stop.svg';
@@ -80,6 +82,7 @@ const ICONS = {
  'group-layers': groupLayers,
  info: info,
  'info-link': infoLink,
+  'arrow-left': arrowLeft,
  'launch-arrow': launchArrow,
  'launch-info': launchInfo,
  link: link,
@@ -87,6 +90,7 @@ const ICONS = {
  lock: lock,
  'logo-ohif-small': logoOhifSmall,
  magnifier: magnifier,
+  exclamation: exclamation,
  'notificationwarning-diamond': notificationwarningDiamond,
  pencil: pencil,
  profile: profile,
@@ -110,18 +114,18 @@ const ICONS = {
  'tool-bidirectional': toolBidirectional,
  'tool-elipse': toolElipse,
  'tool-length': toolLength,
+  'tool-stack-scroll': toolStackScroll,
+  'tool-magnify': toolMagnify,
+  'tool-flip-horizontal': toolFlipHorizontal,
+  'tool-invert': toolInvert,
+  'tool-rotate-right': toolRotateRight,
+  'tool-cine': toolCine,
+  'tool-probe': toolProbe,
+  'tool-angle': toolAngle,
+  'tool-reset': toolReset,
+  'tool-rectangle': toolRectangle,

  /** Old OHIF */
-  'old-bars': oldBars,
-  'old-circle': oldCircle,
-  'old-ellipse-h': oldEllipseH,
-  'old-invert': oldInvert,
-  'old-rotate-right': oldRotateRight,
-  'old-youtube': oldYoutube,
-  'old-dot-circle': oldDotCircle,
-  'old-angle-left': oldAngleLeft,
-  'old-reset': oldReset,
-  'old-circle-o': oldCircleO,
  'old-trash': oldTrash,
  'old-play': oldPlay,
  'old-stop': oldStop,
@@ -6,117 +6,210 @@ import OutsideClickHandler from 'react-outside-click-handler';
 import { Icon, Tooltip, ListMenu } from '@ohif/ui';

 const baseClasses = {
-  Button: 'h-12 flex items-center rounded-md border-transparent border-2 cursor-pointer',
-  Primary: 'h-full flex flex-1 items-center rounded-md rounded-tr-none rounded-br-none',
-  Secondary: 'h-full flex items-center justify-center rounded-tr-md rounded-br-md w-4',
+  Button:
+    'h-12 flex items-center rounded-md border-transparent border-2 cursor-pointer',
+  Primary:
+    'h-full flex flex-1 items-center rounded-md rounded-tr-none rounded-br-none',
+  Secondary:
+    'h-full flex items-center justify-center rounded-tr-md rounded-br-md w-4',
  PrimaryIcon: 'w-5 h-5',
  SecondaryIcon: 'w-4 h-full stroke-1',
  Separator: 'border-l pt-2 pb-2',
-  Content: 'absolute z-10 top-0 mt-16'
+  Content: 'absolute z-10 top-0 mt-16',
 };

 const classes = {
-  Button: ({ isExpanded, primary }) => classNames(
-    baseClasses.Button,
-    !isExpanded && !primary.isActive && 'hover:bg-primary-dark hover:border-primary-dark'
-  ),
+  Button: ({ isExpanded, primary }) =>
+    classNames(
+      baseClasses.Button,
+      !isExpanded &&
+        !primary.isActive &&
+        'hover:bg-primary-dark hover:border-primary-dark'
+    ),
  Interface: 'h-full flex flex-row items-center',
-  Primary: ({ primary, isExpanded }) => classNames(
-    baseClasses.Primary,
-    primary.isActive && !isExpanded ? 'bg-primary-light rounded-tr-md rounded-br-md' :
-      isExpanded ? 'bg-primary-dark' : 'bg-secondary-dark hover:bg-primary-dark'
-  ),
-  Secondary: ({ isExpanded, primary }) => classNames(
-    baseClasses.Secondary,
-    isExpanded ? 'bg-primary-light rounded-tr-md rounded-br-md'
-      : primary.isActive ? 'bg-secondary-dark' : 'hover:bg-primary-dark bg-secondary-dark'
-  ),
-  PrimaryIcon: ({ primary, isExpanded }) => classNames(
-    baseClasses.PrimaryIcon,
-    primary.isActive && !isExpanded ? 'text-primary-dark' : 'text-common-bright'
-  ),
-  SecondaryIcon: ({ isExpanded }) => classNames(
-    baseClasses.SecondaryIcon,
-    isExpanded ? 'text-primary-dark' : 'text-primary-active hover:text-common-bright'
-  ),
-  Separator: ({ primary, isExpanded, isHovering }) => classNames(
-    baseClasses.Separator,
-    isHovering || isExpanded || primary.isActive ? 'border-transparent' : 'border-primary-active'
-  ),
-  Content: ({ isExpanded }) => classNames(baseClasses.Content, isExpanded ? 'block' : 'hidden')
+  Primary: ({ primary, isExpanded }) =>
+    classNames(
+      baseClasses.Primary,
+      primary.isActive && !isExpanded
+        ? 'bg-primary-light rounded-tr-md rounded-br-md'
+        : isExpanded
+        ? 'bg-primary-dark'
+        : 'bg-secondary-dark hover:bg-primary-dark'
+    ),
+  Secondary: ({ isExpanded, primary }) =>
+    classNames(
+      baseClasses.Secondary,
+      isExpanded
+        ? 'bg-primary-light rounded-tr-md rounded-br-md'
+        : primary.isActive
+        ? 'bg-secondary-dark'
+        : 'hover:bg-primary-dark bg-secondary-dark'
+    ),
+  PrimaryIcon: ({ primary, isExpanded }) =>
+    classNames(
+      baseClasses.PrimaryIcon,
+      primary.isActive && !isExpanded
+        ? 'text-primary-dark'
+        : 'text-common-bright'
+    ),
+  SecondaryIcon: ({ isExpanded }) =>
+    classNames(
+      baseClasses.SecondaryIcon,
+      isExpanded
+        ? 'text-primary-dark'
+        : 'text-primary-active hover:text-common-bright'
+    ),
+  Separator: ({ primary, isExpanded, isHovering }) =>
+    classNames(
+      baseClasses.Separator,
+      isHovering || isExpanded || primary.isActive
+        ? 'border-transparent'
+        : 'border-primary-active'
+    ),
+  Content: ({ isExpanded }) =>
+    classNames(baseClasses.Content, isExpanded ? 'block' : 'hidden'),
 };

 const SplitButton = ({
  isRadio,
  isAction,
+  //
+  bState,
+  //
+  groupId,
  primary: _primary,
  secondary,
-  onClick,
  items: _items,
  renderer,
+  onInteraction,
 }) => {
+  const { primaryToolId, toggles, groups } = bState;
  /* Bubbles up individual item clicks */
-  const getSplitButtonItems = items => items.map((item, index) => ({
-    ...item,
-    index,
-    onClick: () => {
-      if (item.onClick) item.onClick({ ...item, index });
-      onClick({ item, index });
+  const getSplitButtonItems = items =>
+    items.map((item, index) => ({
+      ...item,
+      index,
+      onClick: () => {
+        onInteraction({
+          groupId,
+          //
+          itemId: item.id,
+          interactionType: item.type,
+          // splitButtonId? (so we can track group?)
+          // info to fire item's command/event?
+          commandName: item.commandName,
+          commandOptions: item.commandOptions,
+        });

-      setState(state => ({
-        ...state,
-        primary: !isAction ? { ...item, index } : state.primary,
-        isExpanded: false,
-        items: getSplitButtonItems(_items).filter(item => isRadio && !isAction ? item.index !== index : true)
-      }));
-    }
-  }));
+        setState(state => ({
+          ...state,
+          primary: !isAction ? { ...item, index } : state.primary,
+          isExpanded: false,
+          items: getSplitButtonItems(_items).filter(item =>
+            isRadio && !isAction ? item.index !== index : true
+          ),
+        }));
+      },
+    }));

  const [state, setState] = useState({
    primary: _primary,
-    items: getSplitButtonItems(_items),
+    items: getSplitButtonItems(_items).filter(item =>
+      isRadio && !isAction ? item.id !== _primary.id : true
+    ),
    isHovering: false,
-    isExpanded: false
+    isExpanded: false,
  });

-  const onSecondaryClickHandler = () => setState(state => ({ ...state, isExpanded: !state.isExpanded }));
-  const onMouseEnterHandler = () => setState(state => ({ ...state, isHovering: true }));
-  const onMouseLeaveHandler = () => setState(state => ({ ...state, isHovering: false }));
-  const outsideClickHandler = () => setState(state => ({ ...state, isExpanded: false }));
+  const onSecondaryClickHandler = () =>
+    setState(state => ({ ...state, isExpanded: !state.isExpanded }));
+  const onMouseEnterHandler = () =>
+    setState(state => ({ ...state, isHovering: true }));
+  const onMouseLeaveHandler = () =>
+    setState(state => ({ ...state, isHovering: false }));
+  const outsideClickHandler = () =>
+    setState(state => ({ ...state, isExpanded: false }));
  const onPrimaryClickHandler = () => {
-    const primary = { ...state.primary, isActive: !state.primary.isActive };
-    state.primary.onClick(primary);
-    setState(state => ({ ...state, isExpanded: false, primary }));
+    onInteraction({
+      groupId,
+      itemId: state.primary.id,
+      interactionType: state.primary.type,
+      // splitButtonId? (so we can track group?)
+      // info to fire item's command/event?
+      //
+      commandName: state.primary.commandName,
+      commandOptions: state.primary.commandOptions,
+    });
  };

+  const isPrimaryActive =
+    (state.primary.type === 'tool' && primaryToolId === state.primary.id) ||
+    (state.primary.type === 'toggle' && toggles[state.primary.id] === true);
+
  return (
    <OutsideClickHandler onOutsideClick={outsideClickHandler}>
-      <div name='SplitButton' className="relative">
+      <div name="SplitButton" className="relative">
        <div
-          className={classes.Button({ ...state })}
+          className={classes.Button({
+            ...state,
+            primary: { isActive: isPrimaryActive },
+          })}
          onMouseEnter={onMouseEnterHandler}
          onMouseLeave={onMouseLeaveHandler}
        >
          <div className={classes.Interface}>
-            <div onClick={onPrimaryClickHandler} className={classes.Primary({ ...state })}>
-              <Tooltip isDisabled={!state.primary.tooltip} content={state.primary.tooltip}>
-                <div className='p-3 flex items-center justify-center h-full w-full'>
-                  <Icon name={state.primary.icon} className={classes.PrimaryIcon({ ...state })} />
+            <div
+              onClick={onPrimaryClickHandler}
+              className={classes.Primary({
+                ...state,
+                primary: { isActive: isPrimaryActive },
+              })}
+            >
+              <Tooltip
+                isDisabled={!state.primary.tooltip}
+                content={state.primary.tooltip}
+              >
+                <div className="flex items-center justify-center w-full h-full p-3">
+                  <Icon
+                    name={state.primary.icon}
+                    className={classes.PrimaryIcon({
+                      ...state,
+                      primary: { isActive: isPrimaryActive },
+                    })}
+                  />
                </div>
              </Tooltip>
            </div>
-            <div className={classes.Separator({ ...state })}></div>
-            <div className={classes.Secondary({ ...state })} onClick={onSecondaryClickHandler}>
+            <div
+              className={classes.Separator({
+                ...state,
+                primary: { isActive: isPrimaryActive },
+              })}
+            ></div>
+            <div
+              className={classes.Secondary({
+                ...state,
+                primary: { isActive: isPrimaryActive },
+              })}
+              onClick={onSecondaryClickHandler}
+            >
              <Tooltip
                isDisabled={state.isExpanded || !secondary.tooltip}
                content={secondary.tooltip}
                className="h-full"
              >
-                <Icon name={secondary.icon} className={classes.SecondaryIcon({ ...state })} />
+                <Icon
+                  name={secondary.icon}
+                  className={classes.SecondaryIcon({
+                    ...state,
+                    primary: { isActive: isPrimaryActive },
+                  })}
+                />
              </Tooltip>
            </div>
          </div>
        </div>
+        {/* EXPANDED LIST OF OPTIONS */}
        <div className={classes.Content({ ...state })}>
          <ListMenu items={state.items} renderer={renderer} />
        </div>
@@ -126,21 +219,20 @@ const SplitButton = ({
 };

 const DefaultListItemRenderer = ({ icon, label, isActive }) => (
-  <div className={classNames(
-    'flex flex-row items-center p-3 h-8 w-full hover:bg-primary-dark',
-    isActive && 'bg-primary-dark'
-  )}
+  <div
+    className={classNames(
+      'flex flex-row items-center p-3 h-8 w-full hover:bg-primary-dark',
+      isActive && 'bg-primary-dark'
+    )}
  >
-    <span className='text-common-bright mr-4 text-base'>
-      <Icon name={icon} className='w-5 h-5 text-common-bright' />
+    <span className="mr-4 text-base text-common-bright">
+      <Icon name={icon} className="w-5 h-5 text-common-bright" />
    </span>
-    <span className='text-common-bright text-base mr-5'>
-      {label}
-    </span>
-  </div >
+    <span className="mr-5 text-base text-common-bright">{label}</span>
+  </div>
 );

-const noop = () => { };
+const noop = () => {};

 SplitButton.defaultProps = {
  isRadio: false,
@@ -148,47 +240,45 @@ SplitButton.defaultProps = {
  primary: {
    label: null,
    tooltip: null,
-    isActive: true,
-    onClick: noop
  },
  secondary: {
    icon: 'chevron-down',
    label: null,
    isActive: true,
-    tooltip: 'More Measure Tools'
+    tooltip: 'More Measure Tools',
  },
  items: [],
  renderer: DefaultListItemRenderer,
-  onClick: noop
 };

 SplitButton.propTypes = {
  primary: PropTypes.shape({
-    id: PropTypes.string,
+    id: PropTypes.string.isRequired,
    icon: PropTypes.string,
    label: PropTypes.string,
+    type: PropTypes.oneOf(['tool', 'action', 'toggle']).isRequired,
    tooltip: PropTypes.string,
-    isActive: PropTypes.bool,
  }),
  secondary: PropTypes.shape({
    id: PropTypes.string,
    icon: PropTypes.string,
    label: PropTypes.string,
    tooltip: PropTypes.string,
-    isActive: PropTypes.bool
+    isActive: PropTypes.bool,
  }),
-  onClick: PropTypes.func,
  renderer: PropTypes.func,
  items: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
      icon: PropTypes.string,
      label: PropTypes.string,
+      type: PropTypes.oneOf(['tool', 'action', 'toggle']).isRequired,
      tooltip: PropTypes.string,
-      onClick: PropTypes.func,
      isActive: PropTypes.bool,
    })
-  )
+  ),
+  /** Callback function to inform ToolbarService of important events */
+  onInteraction: PropTypes.func.isRequired,
 };

 export default SplitButton;
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';

 import { Button, Icon, Typography, InputGroup } from '../../components';
-import { useModal } from '../../contextProviders';

 const StudyListFilter = ({
  filtersMeta,
@@ -21,42 +20,17 @@ const StudyListFilter = ({
    });
  };
  const isSortingEnable = numOfStudies > 0 && numOfStudies <= 100;
-  const { show } = useModal();
-
-  const showLearnMoreContent = () => {
-    const modalContent = () => <div>Search Instructions</div>;
-
-    show({
-      content: modalContent,
-      title: 'Learn More',
-    });
-  };

  return (
    <React.Fragment>
      <div>
        <div className="bg-primary-dark">
-          <div className="container m-auto relative flex flex-col pt-5">
-            <div className="flex flex-row justify-between mb-5 px-12">
+          <div className="container relative flex flex-col pt-5 m-auto">
+            <div className="flex flex-row justify-between px-12 mb-5">
              <div className="flex flex-row">
-                <Typography variant="h4" className="text-primary-light mr-6">
+                <Typography variant="h4" className="mr-6 text-primary-light">
                  Study list
                </Typography>
-                <div className="flex flex-row items-end">
-                  <Button
-                    variant="text"
-                    size="small"
-                    color="inherit"
-                    className="text-primary-active"
-                    startIcon={<Icon name="info-link" className="w-2" />}
-                    onClick={showLearnMoreContent}
-                  >
-                    <span className="flex flex-col flex-1">
-                      <span>Learn more</span>
-                      <span className="opacity-50 pt-1 border-b border-primary-active"></span>
-                    </span>
-                  </Button>
-                </div>
              </div>
              <div className="flex flex-row">
                {isFiltering && (
@@ -64,7 +38,7 @@ const StudyListFilter = ({
                    rounded="full"
                    variant="outlined"
                    color="primary"
-                    className="text-primary-active border-primary-active mx-8"
+                    className="mx-8 text-primary-active border-primary-active"
                    startIcon={<Icon name="cancel" />}
                    onClick={clearFilters}
                  >
@@ -76,7 +50,7 @@ const StudyListFilter = ({
                </Typography>
                <Typography
                  variant="h6"
-                  className="text-common-light self-end pb-1"
+                  className="self-end pb-1 text-common-light"
                >
                  Studies
                </Typography>
@@ -89,7 +63,7 @@ const StudyListFilter = ({
        className="sticky z-10 border-b-4 border-black"
        style={{ top: '57px' }}
      >
-        <div className="bg-primary-dark pt-3 pb-3 ">
+        <div className="pt-3 pb-3 bg-primary-dark ">
          <InputGroup
            inputMeta={filtersMeta}
            values={filterValues}
@@ -101,7 +75,7 @@ const StudyListFilter = ({
        </div>
        {numOfStudies > 100 && (
          <div className="container m-auto">
-            <div className="bg-primary-main text-center text-base py-1 rounded-b">
+            <div className="py-1 text-base text-center rounded-b bg-primary-main">
              <p className="text-white">
                Filter list to 100 studies or less to enable sorting
              </p>
@@ -7,12 +7,19 @@ import { IconButton, Icon, Tooltip } from '../';
 const ToolbarButton = ({
  type,
  id,
-  isActive,
-  onClick,
  icon,
  label,
+  commandName,
+  commandOptions,
+  onInteraction,
  dropdownContent,
+  //
+  isActive: _isActive,
+  bState = {},
+  //
 }) => {
+  const { primaryToolId, toggles, groups } = bState;
+  const isActive = _isActive || (type === 'tool' && id === primaryToolId);
  const classes = {
    type: {
      primary: isActive
@@ -23,7 +30,6 @@ const ToolbarButton = ({
        : 'text-white hover:bg-secondary-dark hover:text-white focus:bg-secondary-dark focus:text-white',
    },
  };
-
  const shouldShowDropdown = !!isActive && !!dropdownContent;

  return (
@@ -36,7 +42,14 @@ const ToolbarButton = ({
        <IconButton
          variant={isActive ? 'contained' : 'text'}
          className={classnames('mx-1', classes.type[type])}
-          onClick={onClick}
+          onClick={() => {
+            onInteraction({
+              itemId: id,
+              interactionType: type,
+              commandName: commandName,
+              commandOptions: commandOptions,
+            });
+          }}
          key={id}
        >
          <Icon name={icon} />
@@ -49,15 +62,15 @@ const ToolbarButton = ({
 ToolbarButton.defaultProps = {
  dropdownContent: null,
  isActive: false,
-  type: 'primary',
+  type: 'action',
 };

 ToolbarButton.propTypes = {
  /* Influences background/hover styling */
-  type: PropTypes.oneOf(['primary', 'secondary']),
+  type: PropTypes.oneOf(['action', 'toggle', 'tool']),
  id: PropTypes.string.isRequired,
  isActive: PropTypes.bool,
-  onClick: PropTypes.func.isRequired,
+  onInteraction: PropTypes.func.isRequired,
  icon: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  /** Tooltip content can be replaced for a customized content by passing a node to this value. */
@@ -24,7 +24,14 @@ const arrowPositionStyle = {
  },
 };

-const Tooltip = ({ content, isSticky, position, tight, children, isDisabled }) => {
+const Tooltip = ({
+  content,
+  isSticky,
+  position,
+  tight,
+  children,
+  isDisabled,
+}) => {
  const [isActive, setIsActive] = useState(false);

  const handleMouseOver = () => {
@@ -43,7 +50,7 @@ const Tooltip = ({ content, isSticky, position, tight, children, isDisabled }) =

  return (
    <div
-      className="relative h-full"
+      className="relative"
      onMouseOver={handleMouseOver}
      onFocus={handleMouseOver}
      onMouseOut={handleMouseOut}
@@ -84,7 +91,7 @@ Tooltip.defaultProps = {
  tight: false,
  isSticky: false,
  position: 'bottom',
-  isDisabled: false
+  isDisabled: false,
 };

 Tooltip.propTypes = {
@@ -52,7 +52,9 @@ Viewport.propTypes = {
  studyData: PropTypes.shape({
    label: PropTypes.string.isRequired,
    isTracked: PropTypes.bool.isRequired,
+    /* Specific to SR Viewports only... */
    isLocked: PropTypes.bool.isRequired,
+    isRehydratable: PropTypes.bool.isRequired,
    studyDate: PropTypes.string.isRequired,
    currentSeries: PropTypes.number.isRequired,
    seriesDescription: PropTypes.string.isRequired,
@@ -28,6 +28,7 @@ import { Viewport } from '@ohif/ui';
        label: 'A',
        isTracked: true,
        isLocked: false,
+        isRehydratable: false,
        studyDate: '07-Sep-2011',
        currentSeries: 1,
        seriesDescription:
@@ -19,6 +19,8 @@ const ViewportActionBar = ({
  showPatientInfo: patientInfoVisibility,
  onSeriesChange,
  onDoubleClick,
+  //
+  onPillClick,
 }) => {
  const [showPatientInfo, setShowPatientInfo] = useState(patientInfoVisibility);

@@ -33,6 +35,8 @@ const ViewportActionBar = ({
    label,
    isTracked,
    isLocked,
+    isRehydratable,
+    useAltStyling,
    modality,
    studyDate,
    currentSeries,
@@ -52,7 +56,6 @@ const ViewportActionBar = ({

  const onPatientInfoClick = () => setShowPatientInfo(!showPatientInfo);
  const closePatientInfo = () => setShowPatientInfo(false);
-
  const showPatientInfoRef = useRef(null);
  const clickOutsideListener = useOnClickOutside(
    showPatientInfoRef,
@@ -71,30 +74,121 @@ const ViewportActionBar = ({

  const renderIconStatus = () => {
    if (modality === 'SR') {
-      const TooltipMessage = isLocked
-        ? () => (
-          <div>
-            This SR is locked. <br />
-              Measurements cannot be duplicated.
-          </div>
-        )
-        : () => <div>This SR is unlocked.</div>;
+      // 1 - Incompatible
+      // 2 - Locked
+      // 3 - Rehydratable / Open
+      const state =
+        isRehydratable && !isLocked ? 3 : isRehydratable && isLocked ? 2 : 1;
+      let ToolTipMessage = null;
+      let StatusIcon = null;
+
+      switch (state) {
+        case 1:
+          StatusIcon = () => (
+            <div
+              className="flex items-center justify-center -mr-1 rounded-full"
+              style={{
+                width: '18px',
+                height: '18px',
+                backgroundColor: '#98e5c1',
+                border: 'solid 1.5px #000000',
+              }}
+            >
+              <Icon
+                name="exclamation"
+                style={{ color: '#000', width: '12px', height: '12px' }}
+              />
+            </div>
+          );
+
+          ToolTipMessage = () => (
+            <div>
+              This structured report is not compatible
+              <br />
+              with this application.
+            </div>
+          );
+          break;
+        case 2:
+          StatusIcon = () => (
+            <div
+              className="flex items-center justify-center -mr-1 bg-black rounded-full"
+              style={{
+                width: '18px',
+                height: '18px',
+              }}
+            >
+              <Icon
+                name="lock"
+                style={{ color: '#05D97C', width: '8px', height: '11px' }}
+              />
+            </div>
+          );
+
+          ToolTipMessage = () => (
+            <div>
+              This structured report is currently read-only
+              <br />
+              because you are tracking measurements in
+              <br />
+              another viewport.
+            </div>
+          );
+          break;
+        case 3:
+          StatusIcon = () => (
+            <div
+              className="flex items-center justify-center -mr-1 bg-white rounded-full group-hover:bg-customblue-200"
+              style={{
+                width: '18px',
+                height: '18px',
+                border: 'solid 1.5px #000000',
+              }}
+            >
+              <Icon
+                name="arrow-left"
+                style={{ color: '#000', width: '14px', height: '14px' }}
+              />
+            </div>
+          );
+
+          ToolTipMessage = () => <div>Click to restore measurements.</div>;
+      }
+
+      const StatusPill = () => (
+        <div
+          className={classnames(
+            'group relative flex items-center justify-center px-2 rounded-full cursor-default bg-customgreen-100',
+            {
+              'hover:bg-customblue-100': state === 3,
+              'cursor-pointer': state === 3,
+            }
+          )}
+          style={{
+            height: '24px',
+            width: '55px',
+          }}
+          onClick={() => {
+            if (state === 3) {
+              onPillClick?.();
+            }
+          }}
+        >
+          <span className="pr-1 text-lg font-bold leading-none text-black">
+            SR
+          </span>
+          <StatusIcon />
+        </div>
+      );
+
      return (
        <>
-          <Tooltip content={<TooltipMessage />} position="bottom-left">
-            <div className="relative flex p-1 border rounded cursor-default border-primary-light">
-              <span className="text-sm font-bold leading-none text-primary-light">
-                SR
-              </span>
-              {isLocked && (
-                <Icon
-                  name="lock"
-                  className="absolute w-3 text-white"
-                  style={{ top: -6, right: -6 }}
-                />
-              )}
-            </div>
-          </Tooltip>
+          {ToolTipMessage && (
+            <Tooltip content={<ToolTipMessage />} position="bottom-left">
+              <StatusPill />
+            </Tooltip>
+          )}
+          {!ToolTipMessage && <StatusPill />}
        </>
      );
    }
@@ -119,13 +213,13 @@ const ViewportActionBar = ({
                      can be viewed <br /> in the measurement panel
                    </>
                  ) : (
-                      <>
-                        Measurements for
+                    <>
+                      Measurements for
                      <span className="font-bold text-white"> untracked </span>
                      series <br /> will not be shown in the <br /> measurements
                      panel
                    </>
-                    )}
+                  )}
                </span>
              </div>
            </div>
@@ -137,15 +231,26 @@ const ViewportActionBar = ({
    );
  };

+  const borderColor = useAltStyling ? '#365A6A' : '#1D205A';
+  const backgroundColor = useAltStyling
+    ? '#031923'
+    : isTracked
+    ? '#020424'
+    : null;
+
  return (
    <div
-      className="flex flex-wrap items-center p-2 border-b select-none border-primary-light -mt-2"
+      className="flex flex-wrap items-center p-2 -mt-2 border-b select-none"
+      style={{
+        borderColor: borderColor,
+        backgroundColor: backgroundColor,
+      }}
      onDoubleClick={onDoubleClick}
    >
-      <div className="flex flex-grow min-w-48 flex-1 mt-2">
+      <div className="flex flex-1 flex-grow mt-2 min-w-48">
        <div className="flex items-center">
+          <span className="mr-2 text-white text-large">{label}</span>
          {renderIconStatus()}
-          <span className="ml-2 text-white text-large">{label}</span>
        </div>
        <div className="flex flex-col justify-start ml-4">
          <div className="flex">
@@ -173,14 +278,14 @@ const ViewportActionBar = ({
          <ButtonGroup>
            <Button
              size="initial"
-              className="px-2 py-1"
+              className="px-2 py-1 bg-black"
              onClick={() => onSeriesChange('left')}
            >
              <Icon name="chevron-left" className="w-4 text-white" />
            </Button>
            <Button
              size="initial"
-              className="px-2 py-1"
+              className="px-2 py-1 bg-black"
              onClick={() => onSeriesChange('right')}
            >
              <Icon name="chevron-right" className="w-4 text-white" />
@@ -189,11 +294,11 @@ const ViewportActionBar = ({
        </div>
      )}
      {showCine && !showNavArrows && (
-        <div className="mt-2 min-w-48 max-w-48 mr-auto">
+        <div className="mt-2 mr-auto min-w-48 max-w-48">
          <CinePlayer {...cineProps} />
        </div>
      )}
-      <div className="flex h-8 ml-4 mr-2 mt-2" onClick={onPatientInfoClick}>
+      <div className="flex h-8 mt-2 ml-4 mr-2" onClick={onPatientInfoClick}>
        <PatientInfo
          showPatientInfoRef={showPatientInfoRef}
          isOpen={showPatientInfo}
@@ -217,9 +322,12 @@ ViewportActionBar.propTypes = {
  cineProps: PropTypes.object,
  showPatientInfo: PropTypes.bool,
  studyData: PropTypes.shape({
+    //
+    useAltStyling: PropTypes.bool,
+    //
    label: PropTypes.string.isRequired,
    isTracked: PropTypes.bool.isRequired,
-    isLocked: PropTypes.bool.isRequired,
+    isRehydratable: PropTypes.bool.isRequired,
    studyDate: PropTypes.string.isRequired,
    currentSeries: PropTypes.number.isRequired,
    seriesDescription: PropTypes.string.isRequired,
@@ -22,11 +22,12 @@ import { ViewportActionBar } from '@ohif/ui';
 <Playground>
  <div className="p-4 h-64">
    <ViewportActionBar
-      onSeriesChange={(direction) => alert(`Series ${direction}`)}
+      onSeriesChange={direction => alert(`Series ${direction}`)}
      studyData={{
        label: 'A',
        isTracked: true,
        isLocked: false,
+        isRehydratable: false,
        studyDate: '07-Sep-2010',
        currentSeries: 1,
        seriesDescription:
@@ -45,42 +46,42 @@ import { ViewportActionBar } from '@ohif/ui';
    />
  </div>
 </Playground>
-
 <Playground>
  <div className="p-4 h-64">
    <ViewportActionBar
-      onSeriesChange={(direction) => alert(`Series ${direction}`)}
-      studyData={{
-        label: 'A',
-        isTracked: false,
-        isLocked: true,
-        studyDate: '07-Sep-2010',
-        currentSeries: 1,
-        seriesDescription:
-          'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
-        modality: 'CT',
-        patientInformation: {
-          patientName: 'Smith, Jane',
-          patientSex: 'F',
-          patientAge: '59',
-          MRN: '10000001',
-          thickness: '2.0mm',
-          spacing: '1.25mm',
-          scanner: 'Aquilion',
-        },
-      }}
-    />
-  </div>
-</Playground>
-
-<Playground>
-  <div className="p-4 h-64">
-    <ViewportActionBar
-      onSeriesChange={(direction) => alert(`Series ${direction}`)}
+      onSeriesChange={direction => alert(`Series ${direction}`)}
      studyData={{
        label: 'A',
        isTracked: false,
        isLocked: false,
+        isRehydratable: true,
+        studyDate: '07-Sep-2010',
+        currentSeries: 1,
+        seriesDescription:
+          'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
+        modality: 'CT',
+        patientInformation: {
+          patientName: 'Smith, Jane',
+          patientSex: 'F',
+          patientAge: '59',
+          MRN: '10000001',
+          thickness: '2.0mm',
+          spacing: '1.25mm',
+          scanner: 'Aquilion',
+        },
+      }}
+    />
+  </div>
+</Playground>
+<Playground>
+  <div className="p-4 h-64">
+    <ViewportActionBar
+      onSeriesChange={direction => alert(`Series ${direction}`)}
+      studyData={{
+        label: 'A',
+        isTracked: false,
+        isLocked: false,
+        isRehydratable: false,
        studyDate: '07-Sep-2010',
        currentSeries: 1,
        seriesDescription:
@@ -99,15 +100,15 @@ import { ViewportActionBar } from '@ohif/ui';
    />
  </div>
 </Playground>
-
 <Playground>
  <div className="p-4 h-64">
    <ViewportActionBar
-      onSeriesChange={(direction) => alert(`Series ${direction}`)}
+      onSeriesChange={direction => alert(`Series ${direction}`)}
      studyData={{
        label: 'A',
        isTracked: false,
-        isLocked: true,
+        isLocked: false,
+        isRehydratable: true,
        studyDate: '07-Sep-2010',
        currentSeries: 1,
        seriesDescription:
@@ -88,6 +88,7 @@ import { tabs } from './studyBrowserMockData';
                        label: 'A',
                        isTracked: true,
                        isLocked: false,
+                        isRehydratable: false,
                        studyDate: '07-Sep-2011',
                        currentSeries: 1,
                        seriesDescription:
@@ -46,6 +46,15 @@ module.exports = {
        active: '#2c3074',
      },

+      customgreen: {
+        100: '#05D97C',
+      },
+
+      customblue: {
+        100: '#c4fdff',
+        200: '#38daff',
+      },
+
      gray: {
        100: '#f7fafc',
        200: '#edf2f7',
@@ -12,7 +12,7 @@ import {
  ToolBarService,
  ViewportGridService,
  HangingProtocolService,
-  CineService
+  CineService,
  // utils,
  // redux as reduxOHIF,
 } from '@ohif/core';
@@ -33,13 +33,17 @@ function appInit(appConfigOrFunc, defaultExtensions) {
  // TODO: Wire this up to Rodrigo's basic Context "ContextService"
  const commandsManagerConfig = {
    /** Used by commands to inject `viewports` from "redux" */
-    getAppState: () => { },
+    getAppState: () => {},
    /** Used by commands to determine active context */
-    getActiveContexts: () => ['VIEWER', 'DEFAULT', 'ACTIVE_VIEWPORT::CORNERSTONE'],
+    getActiveContexts: () => [
+      'VIEWER',
+      'DEFAULT',
+      'ACTIVE_VIEWPORT::CORNERSTONE',
+    ],
  };

-  const servicesManager = new ServicesManager();
  const commandsManager = new CommandsManager(commandsManagerConfig);
+  const servicesManager = new ServicesManager(commandsManager);
  const hotkeysManager = new HotkeysManager(commandsManager, servicesManager);
  const extensionManager = new ExtensionManager({
    commandsManager,
@@ -58,7 +62,7 @@ function appInit(appConfigOrFunc, defaultExtensions) {
    ToolBarService,
    ViewportGridService,
    HangingProtocolService,
-    CineService
+    CineService,
  ]);

  /**
@@ -6,9 +6,6 @@ import { MODULE_TYPES } from '@ohif/core';
 import { useAppConfig } from '@state';
 import { extensionManager } from '../App.jsx';

-let cacheMap = {};
-let total = {};
-
 /**
 * Uses route properties to determine the data source that should be passed
 * to the child layout template. In some instances, initiates requests and
@@ -48,64 +45,56 @@ function DataSourceWrapper(props) {
  // But only for LayoutTemplate type of 'list'?
  // Or no data fetching here, and just hand down my source
  const STUDIES_LIMIT = 101;
-  const [data, setData] = useState({ studies: [], total: 0 });
+  const [data, setData] = useState({
+    studies: [],
+    total: 0,
+    resultsPerPage: 25,
+    pageNumber: 1,
+  });
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
+    const queryFilterValues = _getQueryFilterValues(
+      history.location.search,
+      STUDIES_LIMIT
+    );
+
    // 204: no content
    async function getData() {
      setIsLoading(true);

-      const limit = STUDIES_LIMIT - 1;
-      const queryFilterValues = _getQueryFilterValues(history.location.search);
-      const { resultsPerPage = 25, pageNumber = 1 } = queryFilterValues;
-      const reachedLimits = parseInt((resultsPerPage * pageNumber) / STUDIES_LIMIT);
-      const cacheKey = `${pageNumber}-${resultsPerPage}`;
-
-      const getFromCache = async ({ cacheKey, pageNumber, resultsPerPage, limit, options }) => {
-        const pagesAmount = limit / resultsPerPage;
-        const pageToRequest = parseInt((resultsPerPage * pageNumber) / STUDIES_LIMIT);
-
-        let length = 0;
-        if (!cacheMap[cacheKey]) {
-          length = pageToRequest > 0 ? (pageToRequest * STUDIES_LIMIT) : 1;
-          const studiesPromise = dataSource.query.studies.search(options);
-
-          for (let pageNum = 0; pageNum < pagesAmount; pageNum++) {
-            const currentPageNumber = (pageNum + 1) + (pageToRequest * pagesAmount);
-            cacheMap[`${currentPageNumber}-${resultsPerPage}`] = studiesPromise.then(function (results) {
-              const slicedResult = results.slice((pageNum * resultsPerPage), ((pageNum + 1) * resultsPerPage));
-              length += slicedResult.length;
-              return slicedResult;
-            });
-          }
-        }
-
-        const cache = await cacheMap[cacheKey];
-        return { cache, length, index: pageToRequest };
-      };
-
-      const { cache: studies, index, length } = await getFromCache({
-        cacheKey,
-        pageNumber,
-        resultsPerPage,
-        limit,
-        options: { ...queryFilterValues, ...{ offset: reachedLimits * limit } }
-      });
-
-      const totalKey = `${resultsPerPage}-${index}`;
-      total[totalKey] = total[totalKey] ? total[totalKey] + length : length;
-      const totals = Object.keys(total).map(key => total[key]);
-      const biggestIndex = totals.indexOf(Math.max(...totals));
-      const biggestKey = Object.keys(total)[biggestIndex];
-      const biggestTotal = total[biggestKey];
+      const studies = await dataSource.query.studies.search(queryFilterValues);

      setIsLoading(false);
-      setData({ studies, total: biggestTotal });
+      setData({
+        studies,
+        total: studies.length,
+        resultsPerPage: queryFilterValues.resultsPerPage,
+        pageNumber: queryFilterValues.pageNumber,
+      });
    }

    try {
-      getData();
+      // Cache invalidation :thinking:
+      // - Anytime change is not just next/previous page
+      // - And we didn't cross a result offset range
+      const isFirstLoad = data.studies.length === 0;
+      const isSamePage = data.pageNumber === queryFilterValues.pageNumber;
+      const previousOffset =
+        Math.floor((data.pageNumber * data.resultsPerPage) / STUDIES_LIMIT) *
+        (STUDIES_LIMIT - 1);
+      const newOffset =
+        Math.floor(
+          (queryFilterValues.pageNumber * queryFilterValues.resultsPerPage) /
+            STUDIES_LIMIT
+        ) *
+        (STUDIES_LIMIT - 1);
+      const isDataInvalid =
+        isFirstLoad || isSamePage || newOffset !== previousOffset;
+
+      if (isDataInvalid) {
+        getData();
+      }
    } catch (ex) {
      console.warn(ex);
    }
@@ -138,25 +127,32 @@ export default DataSourceWrapper;
 * Need generic that can be shared? Isn't this what qs is for?
 * @param {*} query
 */
-function _getQueryFilterValues(query) {
+function _getQueryFilterValues(query, queryLimit) {
  query = new URLSearchParams(query);

+  const pageNumber = _tryParseInt(query.get('pageNumber'), 1);
+  const resultsPerPage = _tryParseInt(query.get('resultsPerPage'), 25);
+
  const queryFilterValues = {
    // DCM
    patientId: query.get('mrn'),
    patientName: query.get('patientName'),
    studyDescription: query.get('description'),
-    modalitiesInStudy: query.get('modalities') && query.get('modalities').split(','),
+    modalitiesInStudy:
+      query.get('modalities') && query.get('modalities').split(','),
    accessionNumber: query.get('accession'),
    //
    startDate: query.get('startDate'),
    endDate: query.get('endDate'),
    page: _tryParseInt(query.get('page'), undefined),
-    pageNumber: _tryParseInt(query.get('pageNumber'), undefined),
-    resultsPerPage: _tryParseInt(query.get('resultsPerPage'), undefined),
+    pageNumber,
+    resultsPerPage,
    // Rarely supported server-side
    sortBy: query.get('sortBy'),
    sortDirection: query.get('sortDirection'),
+    // Offset...
+    offset:
+      Math.floor((pageNumber * resultsPerPage) / queryLimit) * (queryLimit - 1),
  };

  // patientName: good
@@ -24,7 +24,7 @@ import {
  Header,
  useModal,
  AboutModal,
-  UserPreferences
+  UserPreferences,
 } from '@ohif/ui';

 const seriesInStudiesMap = new Map();
@@ -33,7 +33,14 @@ const seriesInStudiesMap = new Map();
 * TODO:
 * - debounce `setFilterValues` (150ms?)
 */
-function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingData, dataSource, hotkeysManager }) {
+function WorkList({
+  history,
+  data: studies,
+  dataTotal: studiesTotal,
+  isLoadingData,
+  dataSource,
+  hotkeysManager,
+}) {
  const { hotkeyDefinitions, hotkeyDefaults } = hotkeysManager;
  const { show, hide } = useModal();
  const { t } = useTranslation();
@@ -94,7 +101,6 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
  const [expandedRows, setExpandedRows] = useState([]);
  const [studiesWithSeriesData, setStudiesWithSeriesData] = useState([]);
  const numOfStudies = studiesTotal;
-  const totalPages = Math.floor(numOfStudies / resultsPerPage) + 1;

  const setFilterValues = val => {
    if (filterValues.pageNumber === val.pageNumber) {
@@ -105,7 +111,15 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
  };

  const onPageNumberChange = newPageNumber => {
-    if (newPageNumber > totalPages) {
+    debugger;
+    const oldPageNumber = filterValues.pageNumber;
+    const rollingPageNumberMod = Math.floor(101 / filterValues.resultsPerPage);
+    const rollingPageNumber = oldPageNumber % rollingPageNumberMod;
+    const isNextPage = newPageNumber > oldPageNumber;
+    const hasNextPage =
+      Math.max(rollingPageNumber, 1) * resultsPerPage < numOfStudies;
+
+    if (isNextPage && !hasNextPage) {
      return;
    }

@@ -170,9 +184,13 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
  // Query for series information
  useEffect(() => {
    const fetchSeries = async studyInstanceUid => {
+      debugger;
      try {
        const series = await dataSource.query.series.search(studyInstanceUid);
-        seriesInStudiesMap.set(studyInstanceUid, utils.sortBySeriesDate(series));
+        seriesInStudiesMap.set(
+          studyInstanceUid,
+          utils.sortBySeriesDate(series)
+        );
        setStudiesWithSeriesData([...studiesWithSeriesData, studyInstanceUid]);
      } catch (ex) {
        // TODO: UI Notification Service
@@ -199,6 +217,10 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
    return !isEqual(filterValues, defaultFilterValues);
  };

+  const rollingPageNumberMod = Math.floor(101 / resultsPerPage);
+  const rollingPageNumber = (pageNumber - 1) % rollingPageNumberMod;
+  const offset = resultsPerPage * rollingPageNumber;
+  const offsetAndTake = offset + resultsPerPage;
  const tableDataSource = sortedStudies.map((study, key) => {
    const rowKey = key + 1;
    const isExpanded = expandedRows.some(k => k === rowKey);
@@ -229,8 +251,8 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
          content: patientName ? (
            <TooltipClipboard>{patientName}</TooltipClipboard>
          ) : (
-              <span className="text-gray-700">(Empty)</span>
-            ),
+            <span className="text-gray-700">(Empty)</span>
+          ),
          gridCol: 4,
        },
        {
@@ -294,13 +316,13 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
          seriesTableDataSource={
            seriesInStudiesMap.has(studyInstanceUid)
              ? seriesInStudiesMap.get(studyInstanceUid).map(s => {
-                return {
-                  description: s.description || '(empty)',
-                  seriesNumber: s.seriesNumber || '',
-                  modality: s.modality || '',
-                  instances: s.numSeriesInstances || '',
-                };
-              })
+                  return {
+                    description: s.description || '(empty)',
+                    seriesNumber: s.seriesNumber || '',
+                    modality: s.modality || '',
+                    instances: s.numSeriesInstances || '',
+                  };
+                })
              : []
          }
        >
@@ -317,7 +339,7 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
              <Link
                key={i}
                to={`${mode.id}?StudyInstanceUIDs=${studyInstanceUid}`}
-              // to={`${mode.id}/dicomweb?StudyInstanceUIDs=${studyInstanceUid}`}
+                // to={`${mode.id}/dicomweb?StudyInstanceUIDs=${studyInstanceUid}`}
              >
                <Button
                  rounded="full"
@@ -325,7 +347,7 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
                  disabled={false}
                  endIcon={<Icon name="launch-arrow" />} // launch-arrow | launch-info
                  className={classnames('font-bold', { 'ml-2': !isFirst })}
-                  onClick={() => { }}
+                  onClick={() => {}}
                >
                  {mode.displayName}
                </Button>
@@ -348,25 +370,28 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
    {
      title: t('Header:About'),
      icon: 'info',
-      onClick: () => show({ content: AboutModal, title: 'About OHIF Viewer' })
+      onClick: () => show({ content: AboutModal, title: 'About OHIF Viewer' }),
    },
    {
      title: t('Header:Preferences'),
      icon: 'settings',
-      onClick: () => show({
-        title: t('UserPreferencesModal:User Preferences'),
-        content: UserPreferences,
-        contentProps: {
-          hotkeyDefaults: hotkeysManager.getValidHotkeyDefinitions(hotkeyDefaults),
-          hotkeyDefinitions,
-          onCancel: hide,
-          onSubmit: ({ hotkeyDefinitions }) => {
-            hotkeysManager.setHotkeys(hotkeyDefinitions);
-            hide();
+      onClick: () =>
+        show({
+          title: t('UserPreferencesModal:User Preferences'),
+          content: UserPreferences,
+          contentProps: {
+            hotkeyDefaults: hotkeysManager.getValidHotkeyDefinitions(
+              hotkeyDefaults
+            ),
+            hotkeyDefinitions,
+            onCancel: hide,
+            onSubmit: ({ hotkeyDefinitions }) => {
+              hotkeysManager.setHotkeys(hotkeyDefinitions);
+              hide();
+            },
+            onReset: () => hotkeysManager.restoreDefaultBindings(),
          },
-          onReset: () => hotkeysManager.restoreDefaultBindings()
-        }
-      })
+        }),
    },
  ];

@@ -378,7 +403,7 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
    >
      <Header isSticky menuOptions={menuOptions} isReturnEnabled={false} />
      <StudyListFilter
-        numOfStudies={numOfStudies}
+        numOfStudies={pageNumber * resultsPerPage > 100 ? 101 : numOfStudies}
        filtersMeta={filtersMeta}
        filterValues={{ ...filterValues, ...defaultSortValues }}
        onChange={setFilterValues}
@@ -388,7 +413,7 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
      {hasStudies ? (
        <>
          <StudyListTable
-            tableDataSource={tableDataSource}
+            tableDataSource={tableDataSource.slice(offset, offsetAndTake)}
            numOfStudies={numOfStudies}
            filtersMeta={filtersMeta}
          />
@@ -400,10 +425,10 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
          />
        </>
      ) : (
-          <div className="flex flex-col items-center justify-center pt-48">
-            <EmptyStudies isLoading={isLoadingData} />
-          </div>
-        )}
+        <div className="flex flex-col items-center justify-center pt-48">
+          <EmptyStudies isLoading={isLoadingData} />
+        </div>
+      )}
    </div>
  );
 }