feat(measurement): Add support measurement label autocompletion (#3855)

platform/ui/src/components/Labelling/LabellingFlow.tsx

@@ -0,0 +1,104 @@
+import SelectTree from '../SelectTree';
+import React, { Component } from 'react';
+import LabellingTransition from './LabellingTransition';
+import cloneDeep from 'lodash.clonedeep';
+
+interface PropType {
+  labellingDoneCallback: (label: string) => void;
+  measurementData: any;
+  labelData: any;
+  exclusive: boolean;
+  componentClassName: any;
+}
+
+interface StateType {
+  location: Location;
+  label: string;
+  componentClassName: any;
+  confirmationState: boolean;
+  displayComponent: boolean;
+}
+
+export interface LabelInfo {
+  label: string;
+  value: string;
+}
+
+class LabellingFlow extends Component<PropType> {
+  currentItems: Array<LabelInfo> = [];
+  state: StateType;
+  mainElement;
+
+  constructor(props) {
+    super(props);
+    const { label } = props.measurementData;
+    const className = props.componentClassName;
+
+    this.state = {
+      location,
+      label,
+      componentClassName: className,
+      confirmationState: false,
+      displayComponent: true,
+    };
+    this.mainElement = React.createRef();
+  }
+
+  render() {
+    if (this.props.labelData) {
+      this.currentItems = cloneDeep(this.props.labelData);
+    }
+
+    const className = Object.assign({}, this.state.componentClassName);
+
+    return (
+      <LabellingTransition
+        displayComponent={this.state.displayComponent}
+        onTransitionExit={this.props.labellingDoneCallback}
+      >
+        <>
+          <div
+            className={className}
+            ref={this.mainElement}
+          >
+            {this.labellingStateFragment()}
+          </div>
+        </>
+      </LabellingTransition>
+    );
+  }
+
+  closePopup = () => {
+    this.setState({
+      displayComponent: false,
+    });
+
+    setTimeout(() => {
+      this.setState({
+        displayComponent: false,
+      });
+    }, 2000);
+  };
+
+  selectTreeSelectCalback = (event, itemSelected) => {
+    const label = itemSelected.value;
+    this.closePopup();
+    return this.props.labellingDoneCallback(label);
+  };
+
+  labellingStateFragment = () => {
+    return (
+      <SelectTree
+        items={this.currentItems}
+        columns={1}
+        onSelected={this.selectTreeSelectCalback}
+        closePopup={this.closePopup}
+        selectTreeFirstTitle="Annotation"
+        exclusive={this.props.exclusive}
+        label={this.state.label}
+      />
+    );
+  };
+}
+
+export default LabellingFlow;

platform/ui/src/components/Labelling/LabellingTransition.tsx

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import { CSSTransition } from 'react-transition-group';
+
+const transitionDuration = 0;
+const transitionClassName = 'labelling';
+const transitionOnAppear = true;
+
+interface PropType {
+  children: React.ReactNode;
+  displayComponent: boolean;
+  onTransitionExit: any;
+}
+
+export default class LabellingTransition extends Component<PropType> {
+  render() {
+    return (
+      <CSSTransition
+        in={this.props.displayComponent}
+        appear={transitionOnAppear}
+        timeout={transitionDuration}
+        classNames={transitionClassName}
+        onExited={this.props.onTransitionExit}
+      >
+        {this.props.children}
+      </CSSTransition>
+    );
+  }
+}

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

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

platform/ui/src/components/SelectTree/InputRadio.tsx

@@ -0,0 +1,41 @@
+import { Component } from 'react';
+import React from 'react';
+
+interface PropsType {
+  value: string;
+  label: string;
+  itemData: { label: string; value: string };
+  id: string;
+  onSelected: Function;
+  index: number;
+  selectTree: any;
+}
+
+export default class InputRadio extends Component<PropsType> {
+  render() {
+    const { focusedIndex } = this.props.selectTree.state;
+    const isFocused = this.props.index === focusedIndex;
+
+    return (
+      <label
+        className={`block h-10 w-full cursor-pointer overflow-hidden border-b border-b-gray-900 pl-3 leading-10 ${
+          isFocused ? 'bg-black' : ''
+        }`}
+        htmlFor={this.props.id}
+      >
+        <input
+          type="radio"
+          id={this.props.id}
+          className="hidden"
+          value={this.props.value}
+          onChange={this.onSelected}
+        />
+        <span className="font-labels">{this.props.label}</span>
+      </label>
+    );
+  }
+
+  onSelected = evt => {
+    this.props.onSelected(evt, this.props.itemData);
+  };
+}

platform/ui/src/components/SelectTree/SelectTree.tsx

@@ -0,0 +1,253 @@
+import React, { Component } from 'react';
+import InputRadio from './InputRadio';
+import SelectTreeBreadcrumb from './SelectTreeBreadcrumb';
+import cloneDeep from 'lodash.clonedeep';
+import Icon from '../Icon';
+import Button, { ButtonEnums } from '../Button';
+import { LabelInfo } from '../Labelling/LabellingFlow';
+
+interface PropType {
+  autoFocus: boolean;
+  searchEnabled: boolean;
+  selectTreeFirstTitle: string;
+  items: Array<LabelInfo>;
+  onSelected: Function;
+  exclusive: boolean;
+  closePopup: Function;
+  label: string;
+  columns: number;
+}
+
+interface StateProps {
+  searchTerm: string | null;
+  currentNode: any;
+  value: string | null;
+  focusedIndex: number;
+}
+
+export class SelectTree extends Component<PropType> {
+  state: StateProps;
+  static defaultProps = {
+    searchEnabled: true,
+    autoFocus: true,
+    selectTreeFirstTitle: 'First Level itens',
+    items: [],
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      searchTerm: this.props.items.length > 0 ? null : this.props.label,
+      currentNode: null,
+      value: null,
+      focuseIndex: 0,
+    };
+  }
+
+  render() {
+    const treeItems = this.getTreeItems();
+
+    return (
+      <div className="max-h-80 w-80 text-base leading-7">
+        <div className="bg-primary-dark relative flex max-h-80 w-full flex-col overflow-hidden rounded-lg border-0 text-white outline-none drop-shadow-lg focus:outline-none">
+          {this.headerItem()}
+
+          {this.props.items.length > 0 && (
+            <div className="ohif-scrollbar h-full overflow-auto">
+              {this.state.currentNode && (
+                <SelectTreeBreadcrumb
+                  onSelected={this.onBreadcrumbSelected}
+                  label={this.state.currentNode.label}
+                  value={this.state.currentNode.value}
+                />
+              )}
+              <div>
+                <div>{treeItems}</div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  isLeafSelected = item => item && !Array.isArray(item.items);
+
+  filterItems() {
+    const filteredItems = [];
+    const rawItems = cloneDeep(this.props.items);
+    rawItems.forEach(item => {
+      if (Array.isArray(item.items)) {
+        item.items.forEach(item => {
+          const label = item.label.toLowerCase();
+          const searchTerm = this.state.searchTerm.toLowerCase();
+          if (label.indexOf(searchTerm) !== -1) {
+            filteredItems.push(item);
+          }
+        });
+      } else {
+        const label = item.label.toLowerCase();
+        const searchTerm = this.state.searchTerm.toLowerCase();
+        if (label.indexOf(searchTerm) !== -1) {
+          filteredItems.push(item);
+        }
+      }
+    });
+    return filteredItems;
+  }
+
+  getTreeItems() {
+    const storageKey = 'SelectTree';
+    let treeItems: Array<LabelInfo>;
+
+    if (this.state.searchTerm) {
+      const filterItems = this.filterItems();
+      if (
+        this.props.exclusive === false &&
+        filterItems.find(item => item.label === this.state.searchTerm) === undefined
+      ) {
+        treeItems = [
+          { label: this.state.searchTerm, value: this.state.searchTerm },
+          ...filterItems,
+        ];
+      } else {
+        treeItems = filterItems;
+      }
+    } else if (this.state.currentNode) {
+      treeItems = cloneDeep(this.state.currentNode.items);
+    } else {
+      treeItems = cloneDeep(this.props.items);
+    }
+
+    return treeItems.map((item, index) => {
+      const itemKey = index;
+      return (
+        <InputRadio
+          key={itemKey}
+          id={`${storageKey}_${item.value}`}
+          itemData={item}
+          value={item.value}
+          label={item.label}
+          onSelected={this.onSelected}
+          index={index}
+          selectTree={this}
+        />
+      );
+    });
+  }
+
+  handleKeyDown = event => {
+    const { key } = event;
+    const { focusedIndex } = this.state;
+    const treeItems = this.getTreeItems();
+
+    if (key === 'ArrowUp') {
+      this.setState(prevState => ({
+        focusedIndex:
+          prevState.focusedIndex > 0 ? prevState.focusedIndex - 1 : treeItems.length - 1,
+      }));
+    } else if (key === 'ArrowDown') {
+      this.setState(prevState => ({
+        focusedIndex:
+          prevState.focusedIndex < treeItems.length - 1 ? prevState.focusedIndex + 1 : 0,
+      }));
+    } else if (key === 'Enter') {
+      const selectedItem = this.state.searchTerm
+        ? { label: this.state.searchTerm, value: this.state.searchTerm }
+        : treeItems[focusedIndex].props.itemData;
+      this.onSelected(event, selectedItem);
+    }
+  };
+
+  onSubmitHandler = evt => {
+    this.props.onSelected(evt, {
+      label: this.state.searchTerm,
+      value: this.state.searchTerm,
+    });
+  };
+
+  headerItem = () => {
+    const inputLeftPadding = this.props.items.length > 0 ? 'pl-8' : 'pl-4';
+    const title = this.props.selectTreeFirstTitle;
+
+    return (
+      <div className="flex flex-col justify-between border-b-2 border-solid border-black p-4 ">
+        <div className="text-primary-active m-0 mb-5 p-2 leading-tight">
+          <span className="text-primary-light align-sub text-xl">{title}</span>
+          <div className="float-right">
+            <Icon
+              name="icon-close"
+              className="cursor-pointer"
+              onClick={() => this.props.closePopup()}
+              fill="#a3a3a3"
+            />
+          </div>
+        </div>
+        {this.props.searchEnabled && (
+          <div className="flex w-full flex-col">
+            {this.props.items.length > 0 && (
+              <div className="absolute mt-2 mr-2.5 mb-3 ml-3 h-4 w-4">
+                <Icon
+                  name="icon-search"
+                  fill="#a3a3a3"
+                />
+              </div>
+            )}
+            <input
+              data-cy="input-annotation"
+              type="text"
+              className={`border-primary-main border-primary-main appearance-none rounded border bg-black bg-black py-2 pr-3 text-sm leading-tight shadow transition duration-300 hover:border-gray-500 focus:border-gray-500 focus:outline-none focus:outline-none ${inputLeftPadding}`}
+              placeholder={this.props.items.length > 0 ? 'Search labels' : 'Enter label'}
+              autoFocus={this.props.autoFocus}
+              onChange={this.searchLocations}
+              value={this.state.searchTerm ? this.state.searchTerm : ''}
+              onKeyDown={this.handleKeyDown}
+            />
+          </div>
+        )}
+        {this.props.items.length === 0 && (
+          <div className="flex justify-end py-3">
+            <Button
+              disabled={this.state.searchTerm === ''}
+              key={0}
+              name="save"
+              type={ButtonEnums.type.primary}
+              onClick={this.onSubmitHandler}
+            >
+              Save
+            </Button>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  searchLocations = evt => {
+    this.setState({
+      currentNode: null,
+      searchTerm: evt.currentTarget.value,
+    });
+  };
+
+  onSelected = (event, item) => {
+    if (this.isLeafSelected(item)) {
+      this.setState({
+        searchTerm: null,
+        currentNode: null,
+        value: null,
+      });
+    } else {
+      this.setState({
+        currentNode: item,
+      });
+    }
+    return this.props.onSelected(event, item);
+  };
+
+  onBreadcrumbSelected = () => {
+    this.setState({
+      currentNode: null,
+    });
+  };
+}

platform/ui/src/components/SelectTree/SelectTreeBreadcrumb.tsx

@@ -0,0 +1,36 @@
+import { Component } from 'react';
+import React from 'react';
+import Icon from '../Icon';
+
+interface PropType {
+  value: string;
+  label: string;
+  onSelected: (event: any) => void;
+}
+
+export default class SelectTreeBreadcrumb extends Component<PropType> {
+  render() {
+    return (
+      <div>
+        <label
+          className="block h-10 w-full cursor-pointer pr-3 leading-10"
+          htmlFor="selectTreeBreadcrumb"
+        >
+          <input
+            type="radio"
+            id="selectTreeBreadcrumb"
+            className="bt block h-10 overflow-hidden p-3 leading-10 shadow-[0_0_0_200px_transparent]"
+            value={this.props.value}
+            onChange={this.props.onSelected}
+          />
+          <span className="cursor-pointer whitespace-nowrap	">
+            <span className="pr-2.5">
+              <Icon name="fast-backward" />
+            </span>
+            {this.props.label}
+          </span>
+        </label>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,2 @@
+import { SelectTree } from './SelectTree';
+export default SelectTree;

platform/ui/src/components/index.js

@@ -80,6 +80,7 @@ import PanelSection from './PanelSection';
 import AdvancedToolbox from './AdvancedToolbox';
 import InputDoubleRange from './InputDoubleRange';
 import LegacyButtonGroup from './LegacyButtonGroup';
+import LabellingFlow from './Labelling';
 import SwitchButton, { SwitchLabelLocation } from './SwitchButton';
 import * as AllInOneMenu from './AllInOneMenu';
 import ViewportActionArrows from './ViewportActionArrows';
@@ -89,7 +90,6 @@ import { ToolSettings } from './AdvancedToolbox';
 import { Toolbox } from './Toolbox';
 import InvestigationalUseDialog from './InvestigationalUseDialog';
 import MeasurementItem from './MeasurementTable/MeasurementItem';
-
 import LayoutPreset from './LayoutPreset';
 
 export {
@@ -182,6 +182,7 @@ export {
   ViewportPane,
   ViewportOverlay,
   WindowLevelMenuItem,
+  LabellingFlow,
   HeaderPatientInfo,
   LayoutPreset,
   LegacySplitButton,

platform/ui/src/index.js

@@ -121,6 +121,7 @@ export {
   WindowLevelMenuItem,
   ImageScrollbar,
   ViewportOverlay,
+  LabellingFlow,
   HeaderPatientInfo,
   ToolSettings,
   Toolbox,