OpenConceptLab/ocl_issues#1372 | concept visualization | full screen …

…view without resize
OpenConceptLab · Oct 10, 2022 · 5b18280 · 5b18280
1 parent af75c25
commit 5b18280
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 20 deletions.
diff --git a/src/components/concepts/ConceptHierarchyTree.jsx b/src/components/concepts/ConceptHierarchyTree.jsx
@@ -81,17 +81,10 @@ class ConceptHierarchyTree extends React.Component {
     this.setState({isLoading: false, tree: data, hasEntries: !isEmpty(data.children)}, () => {
       if(this.state.hasEntries) {
         this.renderTree()
-        setTimeout(this.positionTree, 200)
       }
     })
   })
 
-  positionTree = () => {
-    const svg = document.getElementById('hierarchy-tree')
-    const box = svg.getBBox()
-    svg.viewBox.baseVal.width = box.width - box.x + 100
-  }
-
   getSourceName = (data, urlKey) => {
     if(data.target_source_name && data.target_source_owner)
       return `${data.target_source_owner} / ${data.target_source_name}`
@@ -139,7 +132,7 @@ class ConceptHierarchyTree extends React.Component {
   existsInOCL = node => Boolean(node.data.type === 'Concept' || (node.data.type === 'Mapping' && node.data.target_concept_url))
 
   renderTree = () => {
-    const width = this.props.width || 960;
+    const width = this.props.width || 1500;
     const fontSize = this.props.fontSize || '16';
     const dx = this.props.dx || 60;
     const data = this.state.tree
@@ -209,7 +202,7 @@ class ConceptHierarchyTree extends React.Component {
       const transition = svg
         .transition()
         .duration(duration)
-        .attr("viewBox", [-marginLeft, left.x - margin.top, width, height + 50])
+        .attr("viewBox", [-marginLeft, left.x - margin.top, width + 200, height + 50])
         .tween(
           "resize",
           window.ResizeObserver ? null : () => () => svg.dispatch("toggle")

diff --git a/src/components/concepts/HomeMappings.jsx b/src/components/concepts/HomeMappings.jsx
@@ -7,6 +7,7 @@ import {
 import {
   InfoOutlined as InfoIcon,
   FormatIndentIncrease as HierarchyIcon,
+  Close as CloseIcon
 } from '@mui/icons-material'
 import { get, isEmpty, forEach, map, find, compact, flatten, values } from 'lodash';
 import { BLUE, WHITE } from '../../common/constants'
@@ -225,19 +226,34 @@ const HomeMappings = ({ source, concept, isLoadingMappings, sourceVersion, paren
       </Accordion>
       {
         !noAssociations && hierarchy &&
-        <Dialog fullWidth open={hierarchy} onClose={onHierarchyViewToggle} TransitionComponent={Transition} maxWidth='lg'>
+        <Dialog fullScreen open={hierarchy} onClose={onHierarchyViewToggle} TransitionComponent={Transition}>
           <DialogTitle>
-            <ResourceTextBreadcrumbs resource={concept} includeSelf style={{marginLeft: '-15px', marginBottom: '10px'}} />
             <div className='col-xs-12 no-side-padding'>
-            <span>Associations</span>
-            <span style={{marginLeft: '20px'}}>
-              <HierarchyTreeFilters
-                filters={cascadeFilters}
-                onChange={onCascadeFilterChange}
-                onMapTypesFilterChange={onMapTypesFilterChange}
-                size='medium'
-              />
-            </span>
+              <div className='col-xs-11 no-side-padding'>
+                <ResourceTextBreadcrumbs resource={concept} includeSelf style={{marginLeft: '-15px', marginBottom: '10px'}} />
+                <div className='col-xs-12 no-side-padding'>
+                  <span>Associations</span>
+                  <span style={{marginLeft: '20px'}}>
+                    <HierarchyTreeFilters
+                      filters={cascadeFilters}
+                      onChange={onCascadeFilterChange}
+                      onMapTypesFilterChange={onMapTypesFilterChange}
+                      size='medium'
+                    />
+                  </span>
+                </div>
+              </div>
+              <div className='col-xs-1 no-side-padding'>
+                <span style={{float: 'right'}}>
+                  <IconButton
+                    edge="end"
+                    color="inherit"
+                    onClick={onHierarchyViewToggle}
+                  >
+                    <CloseIcon />
+                  </IconButton>
+                </span>
+              </div>
             </div>
           </DialogTitle>
           <DialogContent>