feat(Thumbnail): Display set messages support & displaying of series inconsistencies in the thumbnail (#3499)

Co-authored-by: Igor Octaviano <igoroctaviano@gmail.com>

platform/ui/src/assets/icons/status-alert-warning.svg

@@ -0,0 +1,9 @@
+<svg width="16" height="16.002" viewBox="0 0 16 16.002" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M16 7.863a8.118 8.118 0 0 1-8 8.138 7.881 7.881 0 0 1-8-7.86A8.118 8.118 0 0 1 8 0a7.882 7.882 0 0 1 8 7.862z" fill="#E3C33A"/>
+        <g stroke="#000" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke-width="2.5" d="M8 7.432V3.34"/>
+            <path d="M7.993 12.34a.178.178 0 0 0-.175.186c.004.1.085.178.184.179h0a.179.179 0 0 0 .175-.186.184.184 0 0 0-.177-.178h-.004" stroke-width="3"/>
+        </g>
+    </g>
+</svg>

platform/ui/src/components/DisplaySetMessageListTooltip/DisplaySetMessageListTooltip.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import PortalTooltip from '../Tooltip/PortalTooltip';
+import Icon from '../Icon';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * Displays a tooltip with a list of messages of a displaySet
+ * @param param0
+ * @returns
+ */
+const DisplaySetMessageListTooltip = ({ messages, id }): React.ReactNode => {
+  const { t } = useTranslation('Messages');
+  const [isOpen, setIsOpen] = useState(false);
+  if (messages.size()) {
+    return (
+      <>
+        <Icon
+          id={id}
+          onMouseOver={() => setIsOpen(true)}
+          onFocus={() => setIsOpen(true)}
+          onMouseOut={() => setIsOpen(false)}
+          onBlur={() => setIsOpen(false)}
+          name="status-alert-warning"
+        />
+        <PortalTooltip
+          active={isOpen}
+          position="right"
+          arrow="center"
+          parent={`#${id}`}
+        >
+          <div className="bg-primary-dark border border-secondary-light text-white text-base rounded text-left max-w-40">
+            <div
+              className="break-normal text-base text-blue-300 font-bold"
+              style={{
+                marginLeft: '12px',
+                marginTop: '12px',
+              }}
+            >
+              DisplaySet Messages
+            </div>
+            <ol
+              style={{
+                marginLeft: '12px',
+              }}
+            >
+              {messages.messages.map((message, index) => (
+                <li
+                  style={{
+                    marginTop: '6px',
+                    marginBottom: '6px',
+                  }}
+                  key={index}
+                >
+                  {index + 1}. {t(message.id)}
+                </li>
+              ))}
+            </ol>
+          </div>
+        </PortalTooltip>
+      </>
+    );
+  }
+  return <></>;
+};
+
+DisplaySetMessageListTooltip.propTypes = {
+  messages: PropTypes.object,
+};
+
+export default DisplaySetMessageListTooltip;

platform/ui/src/components/DisplaySetMessageListTooltip/index.js

@@ -0,0 +1,2 @@
+import DisplaySetMessageListTooltip from './DisplaySetMessageListTooltip';
+export default DisplaySetMessageListTooltip;

platform/ui/src/components/Icon/getIcon.js

@@ -42,6 +42,7 @@ import settings from './../../assets/icons/settings.svg';
 import sorting from './../../assets/icons/sorting.svg';
 import sortingActiveDown from './../../assets/icons/sorting-active-down.svg';
 import sortingActiveUp from './../../assets/icons/sorting-active-up.svg';
+import statusAlertWarning from './../../assets/icons/status-alert-warning.svg';
 import statusAlert from './../../assets/icons/status-alert.svg';
 import statusLocked from './../../assets/icons/status-locked.svg';
 import statusTracked from './../../assets/icons/status-tracked.svg';
@@ -181,6 +182,7 @@ const ICONS = {
   'sorting-active-down': sortingActiveDown,
   'sorting-active-up': sortingActiveUp,
   'status-alert': statusAlert,
+  'status-alert-warning': statusAlertWarning,
   'status-locked': statusLocked,
   'status-tracked': statusTracked,
   'status-untracked': statusUntracked,

platform/ui/src/components/Thumbnail/Thumbnail.tsx

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import { useDrag } from 'react-dnd';
 import Icon from '../Icon';
 import { StringNumber } from '../../types';
+import DisplaySetMessageListTooltip from '../DisplaySetMessageListTooltip';
 
 /**
  * Display a thumbnail for a display set.
@@ -17,6 +18,7 @@ const Thumbnail = ({
   seriesNumber,
   numInstances,
   countIcon,
+  messages,
   dragData,
   isActive,
   onClick,
@@ -78,6 +80,10 @@ const Thumbnail = ({
             <Icon name={countIcon || 'group-layers'} className="w-3 mr-2" />
             {` ${numInstances}`}
           </div>
+          <DisplaySetMessageListTooltip
+            messages={messages}
+            id={`display-set-tooltip-${seriesNumber}`}
+          />
         </div>
         <div className="text-base text-white break-all">{description}</div>
       </div>
@@ -104,6 +110,7 @@ Thumbnail.propTypes = {
   description: PropTypes.string.isRequired,
   seriesNumber: StringNumber.isRequired,
   numInstances: PropTypes.number.isRequired,
+  messages: PropTypes.object,
   isActive: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
   onDoubleClick: PropTypes.func.isRequired,

platform/ui/src/components/ThumbnailList/ThumbnailList.tsx

@@ -34,6 +34,7 @@ const ThumbnailList = ({
           canReject,
           onReject,
           imageSrc,
+          messages,
           imageAltText,
         }) => {
           const isActive = activeDisplaySetInstanceUIDs.includes(
@@ -52,6 +53,7 @@ const ThumbnailList = ({
                   countIcon={countIcon}
                   imageSrc={imageSrc}
                   imageAltText={imageAltText}
+                  messages={messages}
                   viewportIdentificator={viewportIdentificator}
                   isActive={isActive}
                   onClick={() => onThumbnailClick(displaySetInstanceUID)}
@@ -72,6 +74,7 @@ const ThumbnailList = ({
                   countIcon={countIcon}
                   imageSrc={imageSrc}
                   imageAltText={imageAltText}
+                  messages={messages}
                   viewportIdentificator={viewportIdentificator}
                   isTracked={isTracked}
                   isActive={isActive}
@@ -91,6 +94,7 @@ const ThumbnailList = ({
                   dragData={dragData}
                   modality={modality}
                   modalityTooltip={_getModalityTooltip(modality)}
+                  messages={messages}
                   seriesDate={seriesDate}
                   description={description}
                   canReject={canReject}

platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.tsx

@@ -16,6 +16,7 @@ const ThumbnailNoImage = ({
   onDoubleClick,
   canReject,
   onReject,
+  messages,
   dragData,
   isActive,
 }) => {
@@ -56,6 +57,23 @@ const ThumbnailNoImage = ({
               </div>
             </Tooltip>
             <span className="ml-4 text-base text-blue-300">{seriesDate}</span>
+            {messages?.size() ? (
+              <div>
+                <Tooltip
+                  position="left"
+                  tight={true}
+                  content={
+                    <div className="text-left max-w-40">
+                      {messages.thumbnailContents()}
+                    </div>
+                  }
+                >
+                  <Icon name="notifications-warning" className="w-3 h-3" />
+                </Tooltip>
+              </div>
+            ) : (
+              <></>
+            )}
           </div>
           <div className="flex flex-row">
             {canReject && (
@@ -96,6 +114,7 @@ ThumbnailNoImage.propTypes = {
   seriesDate: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
   onDoubleClick: PropTypes.func.isRequired,
+  messages: PropTypes.object,
   isActive: PropTypes.bool.isRequired,
 };
 

platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.tsx

@@ -16,6 +16,7 @@ const ThumbnailTracked = ({
   seriesNumber,
   numInstances,
   countIcon,
+  messages,
   dragData,
   onClick,
   onDoubleClick,
@@ -119,6 +120,7 @@ const ThumbnailTracked = ({
         dragData={dragData}
         description={description}
         seriesNumber={seriesNumber}
+        messages={messages}
         numInstances={numInstances}
         countIcon={countIcon}
         isActive={isActive}
@@ -153,6 +155,7 @@ ThumbnailTracked.propTypes = {
   onClickUntrack: PropTypes.func.isRequired,
   viewportIdentificator: PropTypes.array,
   isTracked: PropTypes.bool,
+  messages: PropTypes.object,
   isActive: PropTypes.bool.isRequired,
 };
 

platform/ui/src/components/Tooltip/PortalTooltip.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+
+import Card from './PortalTooltipCard';
+
+const portalNodes = {};
+
+/**
+ * A portal based tooltip component.
+ *
+ * This component has been repurposed and modified
+ * for OHIF usage: https://github.com/romainberger/react-portal-tooltip
+ */
+export default class PortalTooltip extends React.Component {
+  static propTypes = {
+    parent: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
+      .isRequired,
+    active: PropTypes.bool,
+    group: PropTypes.string,
+    tooltipTimeout: PropTypes.number,
+  };
+
+  static defaultProps = {
+    active: false,
+    group: 'main',
+    tooltipTimeout: 0,
+  };
+
+  createPortal() {
+    portalNodes[this.props.group] = {
+      node: document.createElement('div'),
+      timeout: false,
+    };
+    portalNodes[this.props.group].node.className = 'ToolTipPortal';
+    document.body.appendChild(portalNodes[this.props.group].node);
+  }
+
+  renderPortal(props) {
+    if (!portalNodes[this.props.group]) {
+      this.createPortal();
+    }
+    let { parent, ...other } = props;
+    let parentEl =
+      typeof parent === 'string' ? document.querySelector(parent) : parent;
+    ReactDOM.render(
+      <Card parentEl={parentEl} {...other} />,
+      portalNodes[this.props.group].node
+    );
+  }
+
+  componentDidMount() {
+    if (!this.props.active) {
+      return;
+    }
+
+    this.renderPortal(this.props);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (
+      (!portalNodes[this.props.group] && !nextProps.active) ||
+      (!this.props.active && !nextProps.active)
+    ) {
+      return;
+    }
+
+    let props = { ...nextProps };
+    let newProps = { ...nextProps };
+
+    if (
+      portalNodes[this.props.group] &&
+      portalNodes[this.props.group].timeout
+    ) {
+      clearTimeout(portalNodes[this.props.group].timeout);
+    }
+
+    if (this.props.active && !props.active) {
+      newProps.active = true;
+      portalNodes[this.props.group].timeout = setTimeout(() => {
+        props.active = false;
+        this.renderPortal(props);
+      }, this.props.tooltipTimeout);
+    }
+
+    this.renderPortal(newProps);
+  }
+
+  componentWillUnmount() {
+    if (portalNodes[this.props.group]) {
+      ReactDOM.unmountComponentAtNode(portalNodes[this.props.group].node);
+      clearTimeout(portalNodes[this.props.group].timeout);
+
+      try {
+        document.body.removeChild(portalNodes[this.props.group].node);
+      } catch (e) {}
+
+      portalNodes[this.props.group] = null;
+    }
+  }
+
+  render() {
+    return null;
+  }
+}

platform/ui/src/components/Tooltip/PortalTooltipCard.tsx

@@ -0,0 +1,413 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+const FG_SIZE = 8;
+const BG_SIZE = 9;
+
+/**
+ * A portal based tooltip card component.
+ *
+ * This component has been repurposed and modified
+ * for OHIF usage: https://github.com/romainberger/react-portal-tooltip
+ */
+export default class PortalTooltipCard extends Component {
+  static propTypes = {
+    active: PropTypes.bool,
+    position: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+    arrow: PropTypes.oneOf([null, 'center', 'top', 'right', 'bottom', 'left']),
+    align: PropTypes.oneOf([null, 'center', 'right', 'left']),
+    style: PropTypes.object,
+    useHover: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    active: false,
+    position: 'right',
+    arrow: null,
+    align: null,
+    style: { style: {}, arrowStyle: {} },
+    useHover: true,
+  };
+
+  state = {
+    hover: false,
+    width: 0,
+    height: 0,
+  };
+
+  offscreenDifference = 0;
+
+  margin = 15;
+
+  defaultArrowStyle = {
+    color: '#090c29', // primary-dark
+    borderColor: 'rgba(58, 63, 153, 1)', // secondary-light
+  };
+
+  rootRef = React.createRef();
+
+  getGlobalStyle() {
+    if (!this.props.parentEl) {
+      return { display: 'none' };
+    }
+
+    const style = {
+      position: 'absolute',
+      //padding: '5px',
+      background: 'bg-primary-dark',
+      //boxShadow: '0 0 4px rgba(0,0,0,.3)',
+      borderRadius: '3px',
+      //opacity: this.state.hover || this.props.active ? 1 : 0,
+      visibility: this.state.hover || this.props.active ? 'visible' : 'hidden',
+      zIndex: 50,
+      ...this.getStyle(this.props.position, this.props.arrow),
+    };
+
+    return this.mergeStyle(style, this.props.style.style);
+  }
+
+  getBaseArrowStyle() {
+    return {
+      position: 'absolute',
+      content: '""',
+    };
+  }
+
+  getArrowStyle() {
+    let fgStyle = this.getBaseArrowStyle();
+    let bgStyle = this.getBaseArrowStyle();
+    fgStyle.zIndex = 60;
+    bgStyle.zIndex = 55;
+
+    let arrowStyle = {
+      ...this.defaultArrowStyle,
+      ...this.props.style.arrowStyle,
+    };
+    let bgBorderColor = arrowStyle.borderColor
+      ? arrowStyle.borderColor
+      : 'transparent';
+
+    let fgColorBorder = `10px solid ${arrowStyle.color}`;
+    let fgTransBorder = `${FG_SIZE}px solid transparent`;
+    let bgColorBorder = `12px solid ${bgBorderColor}`;
+    let bgTransBorder = `${BG_SIZE}px solid transparent`;
+
+    let { position, arrow } = this.props;
+
+    if (position === 'left' || position === 'right') {
+      fgStyle.top = '50%';
+      fgStyle.borderTop = fgTransBorder;
+      fgStyle.borderBottom = fgTransBorder;
+      fgStyle.marginTop = -7;
+
+      bgStyle.borderTop = bgTransBorder;
+      bgStyle.borderBottom = bgTransBorder;
+      bgStyle.top = '50%';
+      bgStyle.marginTop = -8;
+
+      if (position === 'left') {
+        fgStyle.right = -10;
+        fgStyle.borderLeft = fgColorBorder;
+        bgStyle.right = -11;
+        bgStyle.borderLeft = bgColorBorder;
+      } else {
+        fgStyle.left = -9;
+        fgStyle.borderRight = fgColorBorder;
+        bgStyle.left = -11;
+        bgStyle.borderRight = bgColorBorder;
+      }
+
+      if (arrow === 'top') {
+        fgStyle.top = this.margin;
+        bgStyle.top = this.margin;
+      }
+      if (arrow === 'bottom') {
+        fgStyle.top = null;
+        fgStyle.bottom = this.margin - 7;
+        bgStyle.top = null;
+        bgStyle.bottom = this.margin - 8;
+      }
+    } else {
+      fgStyle.left = Math.round(this.state.width / 2 - FG_SIZE);
+      fgStyle.borderLeft = fgTransBorder;
+      fgStyle.borderRight = fgTransBorder;
+      fgStyle.marginLeft = 0;
+      bgStyle.left = fgStyle.left - 1;
+      bgStyle.borderLeft = bgTransBorder;
+      bgStyle.borderRight = bgTransBorder;
+      bgStyle.marginLeft = 0;
+
+      if (position === 'top') {
+        fgStyle.bottom = -10;
+        fgStyle.borderTop = fgColorBorder;
+        bgStyle.bottom = -11;
+        bgStyle.borderTop = bgColorBorder;
+      } else {
+        fgStyle.top = -10;
+        fgStyle.borderBottom = fgColorBorder;
+        bgStyle.top = -11;
+        bgStyle.borderBottom = bgColorBorder;
+      }
+
+      if (arrow === 'right') {
+        fgStyle.left = null;
+        fgStyle.right = this.margin + 1 - FG_SIZE;
+        bgStyle.left = null;
+        bgStyle.right = this.margin - FG_SIZE;
+      }
+      if (arrow === 'left') {
+        fgStyle.left = this.margin + 1 - FG_SIZE;
+        bgStyle.left = this.margin - FG_SIZE;
+      }
+    }
+
+    let {
+      color,
+      borderColor,
+      ...propsArrowStyle
+    } = this.props.style.arrowStyle;
+
+    const state = {
+      fgStyle: this.mergeStyle(fgStyle, propsArrowStyle),
+      bgStyle: this.mergeStyle(bgStyle, propsArrowStyle),
+    };
+
+    if (this.offscreenDifference > 0) {
+      if (state.fgStyle.top >= 0 || state.fgStyle.top < 0) {
+        state.fgStyle.top += this.offscreenDifference;
+      }
+      if (state.bgStyle.top >= 0 || state.bgStyle.top < 0) {
+        state.bgStyle.top += this.offscreenDifference;
+      }
+      if (typeof state.fgStyle.top === 'string') {
+        state.fgStyle.top = `calc(${state.fgStyle.top} + ${this.offscreenDifference}px)`;
+      }
+      if (typeof state.bgStyle.top === 'string') {
+        state.bgStyle.top = `calc(${state.bgStyle.top} + ${this.offscreenDifference}px)`;
+      }
+    }
+
+    return state;
+  }
+
+  mergeStyle(style, theme) {
+    if (theme) {
+      let {
+        position,
+        top,
+        left,
+        right,
+        bottom,
+        marginLeft,
+        marginRight,
+        ...validTheme
+      } = theme;
+
+      return {
+        ...style,
+        ...validTheme,
+      };
+    }
+
+    return style;
+  }
+
+  getStyle(position, arrow) {
+    let alignOffset = 0;
+    let parent = this.props.parentEl;
+    let align = this.props.align;
+    let tooltipPosition = parent.getBoundingClientRect();
+    let scrollY =
+      window.scrollY !== undefined ? window.scrollY : window.pageYOffset;
+    let scrollX =
+      window.scrollX !== undefined ? window.scrollX : window.pageXOffset;
+    let top = scrollY + tooltipPosition.top;
+    let left = scrollX + tooltipPosition.left;
+    let style = {};
+
+    if (this.rootRef.current) {
+      const newHeight = this.rootRef.current.offsetHeight / 2;
+      const bottomPosition = tooltipPosition.bottom + newHeight;
+      const isOffscreen =
+        tooltipPosition.bottom + newHeight > window.innerHeight;
+      const offscreenDifference = bottomPosition - window.innerHeight;
+      if (isOffscreen) {
+        const padding = 3;
+        top -= offscreenDifference;
+        this.offscreenDifference = Math.min(
+          Math.max(offscreenDifference, 0),
+          newHeight - parent.getBoundingClientRect().height / 2 - padding
+        );
+      } else {
+        this.offscreenDifference = 0;
+      }
+    }
+
+    const parentSize = {
+      width: parent.offsetWidth,
+      height: parent.offsetHeight,
+    };
+
+    // fix for svg
+    if (!parent.offsetHeight && parent.getBoundingClientRect) {
+      parentSize.width = parent.getBoundingClientRect().width;
+      parentSize.height = parent.getBoundingClientRect().height;
+    }
+
+    if (align === 'left') {
+      alignOffset = -parentSize.width / 2 + FG_SIZE;
+    } else if (align === 'right') {
+      alignOffset = parentSize.width / 2 - FG_SIZE;
+    }
+
+    const stylesFromPosition = {
+      left: () => {
+        style.top = top + parentSize.height / 2 - this.state.height / 2;
+        style.left = left - this.state.width - this.margin;
+      },
+      right: () => {
+        style.top = top + parentSize.height / 2 - this.state.height / 2;
+        style.left = left + parentSize.width + this.margin;
+      },
+      top: () => {
+        style.left =
+          left - this.state.width / 2 + parentSize.width / 2 + alignOffset;
+        style.top = top - this.state.height - this.margin;
+      },
+      bottom: () => {
+        style.left =
+          left - this.state.width / 2 + parentSize.width / 2 + alignOffset;
+        style.top = top + parentSize.height + this.margin;
+      },
+    };
+
+    const stylesFromArrow = {
+      left: () => {
+        style.left = left + parentSize.width / 2 - this.margin + alignOffset;
+      },
+      right: () => {
+        style.left =
+          left -
+          this.state.width +
+          parentSize.width / 2 +
+          this.margin +
+          alignOffset;
+      },
+      top: () => {
+        style.top = top + parentSize.height / 2 - this.margin;
+      },
+      bottom: () => {
+        style.top =
+          top + parentSize.height / 2 - this.state.height + this.margin;
+      },
+    };
+
+    executeFunctionIfExist(stylesFromPosition, position);
+    executeFunctionIfExist(stylesFromArrow, arrow);
+
+    return style;
+  }
+
+  checkWindowPosition(style, arrowStyle) {
+    if (this.props.position === 'top' || this.props.position === 'bottom') {
+      if (style.left < 0) {
+        const parent = this.props.parentEl;
+        if (parent) {
+          const tooltipWidth = this.state.width;
+          let bgStyleRight = arrowStyle.bgStyle.right;
+          // For arrow = center
+          if (!bgStyleRight) {
+            bgStyleRight = tooltipWidth / 2 - BG_SIZE;
+          }
+          const newBgRight = Math.round(
+            bgStyleRight - style.left + this.margin
+          );
+          arrowStyle = {
+            ...arrowStyle,
+            bgStyle: {
+              ...arrowStyle.bgStyle,
+              right: newBgRight,
+              left: null,
+            },
+            fgStyle: {
+              ...arrowStyle.fgStyle,
+              right: newBgRight + 1,
+              left: null,
+            },
+          };
+        }
+        style.left = this.margin;
+      } else {
+        let rightOffset = style.left + this.state.width - window.innerWidth;
+        if (rightOffset > 0) {
+          let originalLeft = style.left;
+          style.left = window.innerWidth - this.state.width - this.margin;
+          arrowStyle.fgStyle.marginLeft += originalLeft - style.left;
+          arrowStyle.bgStyle.marginLeft += originalLeft - style.left;
+        }
+      }
+    }
+
+    return { style, arrowStyle };
+  }
+
+  handleMouseEnter = () => {
+    this.props.active && this.props.useHover && this.setState({ hover: true });
+  };
+
+  handleMouseLeave = () => {
+    this.setState({ hover: false });
+  };
+
+  componentDidMount() {
+    this.updateSize();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (this.props !== prevProps) {
+      this.updateSize();
+    }
+  }
+
+  updateSize() {
+    const newWidth = this.rootRef.current.offsetWidth;
+    const newHeight = this.rootRef.current.offsetHeight;
+
+    if (newWidth !== this.state.width || newHeight !== this.state.height) {
+      this.setState({
+        width: newWidth,
+        height: newHeight,
+      });
+    }
+  }
+
+  render() {
+    let { style, arrowStyle } = this.checkWindowPosition(
+      this.getGlobalStyle(),
+      this.getArrowStyle()
+    );
+
+    return (
+      <div
+        style={style}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
+        ref={this.rootRef}
+      >
+        {this.props.arrow ? (
+          <div>
+            <span style={arrowStyle.fgStyle} />
+            <span style={arrowStyle.bgStyle} />
+          </div>
+        ) : null}
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+const executeFunctionIfExist = (object, key) => {
+  if (Object.prototype.hasOwnProperty.call(object, key)) {
+    object[key]();
+  }
+};