OpenConceptLab/ocl_issues#1459 | Concept cascade visualization from O…

…peration Drawer

src/components/common/OperationsDrawer.jsx

@@ -2,14 +2,15 @@ import React from 'react';
 import ReactJson from 'react-json-view'
 import alertifyjs from 'alertifyjs';
 import {
-  Toolbar, Button, Drawer, IconButton, TextField, FormControl, InputLabel, Select, MenuItem,
+  Toolbar, Button, Drawer, IconButton, TextField, FormControl, InputLabel, Select, MenuItem, Tooltip,
   ButtonGroup
 } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import {
   CancelOutlined as CloseIcon,
   OpenInNew as NewTabIcon,
   FileCopy as CopyIcon,
+  QueryStats as HierarchyIcon,
 } from '@mui/icons-material';
 import { get, map, includes, uniq, filter, find, startCase, isString, isObject, merge, forEach } from 'lodash';
 import { OperationsContext } from '../app/LayoutContext';
@@ -19,6 +20,7 @@ import {
 import { FHIR_OPERATIONS, GREEN, ERROR_RED, BLACK, DEFAULT_CASCADE_PARAMS } from '../../common/constants';
 import APIService from '../../services/APIService';
 import CascadeParametersForm from './CascadeParametersForm';
+import ConceptCascadeVisualizeDialog from '../concepts/ConceptCascadeVisualizeDialog';
 
 const drawerWidth = 350;
 const useStyles = makeStyles(theme => ({
@@ -92,6 +94,7 @@ const OperationsDrawer = () => {
   const fhirResourceDisplay = startCase(fhirResource).replace(' ', '')
   const operations = uniq([...get(fhirServer, `operations.${fhirResource}`, []), ...get(currentServer, `operations.${containerResource}`, [])])
   const [byURL, setByURL] = React.useState(false)
+  const [visualize, setVisualize] = React.useState(false)
   React.useEffect(
     () => {
       setItem(operationItem)
@@ -236,6 +239,10 @@ const OperationsDrawer = () => {
     return response
   }
 
+  const onVisualizeCascadeClick = () => setVisualize(!visualize)
+
+  const showVisualizeOption = operation === '$cascade' && cascadeParams?.view === 'hierarchy' && response?.data
+
   return (
     <React.Fragment>
       <Drawer
@@ -377,6 +384,14 @@ const OperationsDrawer = () => {
                           <IconButton onClick={onCopyURLClick} size='small'>
                             <CopyIcon fontSize='inherit' />
                           </IconButton>
+                          {
+                            showVisualizeOption &&
+                              <Tooltip title='Visualize'>
+                                <IconButton onClick={onVisualizeCascadeClick} size='small'>
+                                  <HierarchyIcon fontSize='inherit' />
+                                </IconButton>
+                              </Tooltip>
+                          }
                         </React.Fragment>
                     }
                   </h4>
@@ -395,6 +410,18 @@ const OperationsDrawer = () => {
           </div>
         </div>
       </Drawer>
+      {
+        visualize &&
+          <ConceptCascadeVisualizeDialog
+            open
+            onClose={onVisualizeCascadeClick}
+            concept={item}
+            filters={false}
+            parent={parentItem}
+            treeData={response?.data?.entry || {}}
+          />
+
+      }
     </React.Fragment>
   )
 }

src/components/concepts/ConceptCascadeVisualizeDialog.jsx

@@ -15,7 +15,7 @@ const Transition = React.forwardRef(function Transition(props, ref) {
   return <Slide direction="up" ref={ref} {...props} />;
 });
 
-const ConceptCascadeVisualizeDialog = ({concept, open, onClose, filters, onFilterChange, onCascadeFilterChange, source, sourceVersion, hierarchyMeaning, parent}) => {
+const ConceptCascadeVisualizeDialog = ({concept, open, onClose, filters, onFilterChange, onCascadeFilterChange, source, sourceVersion, hierarchyMeaning, parent, treeData}) => {
   return (
     <Dialog fullScreen open={open} onClose={onClose} TransitionComponent={Transition}>
       <DialogTitle>
@@ -52,7 +52,7 @@ const ConceptCascadeVisualizeDialog = ({concept, open, onClose, filters, onFilte
       </DialogTitle>
       <DialogContent>
         <div className='col-xs-12' style={{padding: '10px'}}>
-          <ConceptHierarchyTree concept={concept} fontSize='14' dx={80} hierarchyMeaning={hierarchyMeaning} filters={filters} sourceVersion={sourceVersion} source={source} parent={parent} reverse={get(filters, 'reverse', false)} />
+          <ConceptHierarchyTree concept={concept} fontSize='14' dx={80} hierarchyMeaning={hierarchyMeaning} filters={filters} sourceVersion={sourceVersion} source={source} parent={parent} reverse={get(filters, 'reverse', false)} treeData={treeData} />
         </div>
       </DialogContent>
       <DialogActions>

src/components/concepts/ConceptHierarchyTree.jsx

@@ -45,7 +45,7 @@ class ConceptHierarchyTree extends React.Component {
   }
 
   componentDidMount() {
-    this.makeInitialTree()
+    this.props.treeData ? this.makeTree(this.props.treeData) : this.makeInitialTree()
   }
 
   componentDidUpdate(prevProps) {
@@ -75,15 +75,17 @@ class ConceptHierarchyTree extends React.Component {
       .then(response => callback(response.data.entry));
   }
 
-  makeInitialTree = () => this.getChildren(this.props.concept, tree => {
+  makeInitialTree = () => this.getChildren(this.props.concept, this.makeTree)
+
+  makeTree = tree => {
     const data = JSON.parse(JSON.stringify(tree).replaceAll('entries', 'children'))
     data.cascade_target_source = this.getSourceName(data)
     this.setState({isLoading: false, tree: data, hasEntries: !isEmpty(data.children)}, () => {
       if(this.state.hasEntries) {
         this.renderTree()
       }
     })
-  })
+  }
 
   getSourceName = (data, urlKey) => {
     if(data.cascade_target_source_name && data.cascade_target_source_owner)

src/components/concepts/ConceptHomeHeader.jsx

@@ -6,7 +6,7 @@ import {
   Delete as DeleteIcon,
   RestoreFromTrash as RestoreIcon,
   FileCopy as CopyIcon,
-  FormatIndentIncrease as HierarchyIcon,
+  QueryStats as HierarchyIcon,
 } from '@mui/icons-material';
 import { get } from 'lodash';
 import { currentUserHasAccess, isLoggedIn, copyURL, toFullAPIURL, isAdminUser } from '../../common/utils';