fix(3DKG): fix height flexibility for KG component

examples/react-app/src/components/KnowledgeGraph.scss

@@ -0,0 +1,6 @@
+.KnowledgeGraph {
+  min-height: 680px;
+  min-width: 1200px;
+  resize: both;
+  overflow: auto;
+}

examples/react-app/src/components/KnowledgeGraph.tsx

@@ -2,6 +2,7 @@ import React, { FC, useCallback, useState } from 'react';
 
 import { KnowledgeGraph as KnowledgeGraphComp, NodeData, EdgeData, IQueryData } from '@iot-app-kit/react-components';
 import { dataSource } from '../dataSource';
+import './KnowledgeGraph.scss';
 
 const kgDataSource = dataSource.kGDatamodule();
 
@@ -13,16 +14,15 @@ interface KnowledgeGraphProps {
   queryData: IQueryData | null;
 }
 
-const KnowledgeGraph: FC<KnowledgeGraphProps>= ({
+const KnowledgeGraph: FC<KnowledgeGraphProps> = ({
   onEntitySelected,
   onEntityUnSelected,
   onClearGraph,
   onGraphResultChange,
   queryData,
 }) => {
-
   return (
-    <div className="KnowledgeGraph">
+    <div className='KnowledgeGraph'>
       <KnowledgeGraphComp
         kgDataSource={kgDataSource}
         onEntitySelected={onEntitySelected}

examples/react-app/src/pages/Home/index.tsx

@@ -151,7 +151,7 @@ const ScenePage = () => {
     },
     [setQueryData, setSelectedEntityId, selectedEntityId]
   );
-  
+
   const onWidgetClick = useCallback((e: any) => {
     console.log('onWidgetClick event fired with data: ', e);
   }, []);
@@ -167,8 +167,8 @@ const ScenePage = () => {
             <Container header={<Header>Scene</Header>}>
               <SceneViewer onSelectionChanged={onSelectionChanged} onWidgetClick={onWidgetClick} />
             </Container>
-            <Container header={<Header>Knowledge Graph</Header>}>
-              <KnowledgeGraph 
+            <Container>
+              <KnowledgeGraph
                 queryData={queryData}
                 onEntitySelected={onEntitySelected}
                 onEntityUnSelected={onEntityUnSelected}

packages/react-components/src/components/knowledge-graph/KnowledgeGraphPanel.tsx

@@ -2,11 +2,12 @@
 import React, { HTMLAttributes, useEffect, useCallback, useMemo, useState, useRef } from 'react';
 import { IntlProvider, FormattedMessage } from 'react-intl';
 import type { Core, EventObjectNode, EventObjectEdge } from 'cytoscape';
-import { Button, Container, Header, Input, SpaceBetween, Grid } from '@cloudscape-design/components';
+import { Button, Input, Grid, SpaceBetween } from '@cloudscape-design/components';
 import { TwinMakerKGQueryDataModule } from '@iot-app-kit/source-iottwinmaker';
 import GraphView from './graph/graph-view';
 import Toolbar from './graph/graph-toolbar';
 import './graph/styles.scss';
+import './styles.scss';
 import { STYLE_PREFIX } from './graph/constants';
 import useStylesheet from './graph/cytoscape-cloudscape-theme';
 import StateManager, { useKnowledgeGraphState } from './StateManager';
@@ -212,91 +213,88 @@ export const KnowledgeGraphContainer: React.FC<KnowledgeGraphInterface> = ({
   }, [queryData]);
 
   return (
-    <Container header={<Header variant='h3'>Knowledge Graph</Header>}>
-      <div style={{ width: '100%', height: '100%' }}>
-        <SpaceBetween direction='vertical' size='xl'>
-          <div style={{ minWidth: '500px' }}>
-            <Grid gridDefinition={[{ colspan: 9 }, { colspan: 3 }]}>
-              <Input
-                type='search'
-                value={searchTerm}
-                onChange={(e) => {
-                  setSearchTerm(e.detail.value);
-                }}
-              ></Input>
-              <Button onClick={onSearchClicked} data-testid='search-button'>
-                <FormattedMessage
-                  id='KnowledgeGraphPanel.button.search'
-                  defaultMessage='Search'
-                  description='Search button text'
-                />
-              </Button>
-            </Grid>
-          </div>
-          <div ref={containerRef} className={`${STYLE_PREFIX} ${className || ''}`.trim()} {...props}>
-            <GraphView
-              className={`${STYLE_PREFIX}-canvas`}
-              ref={cy}
-              stylesheet={stylesheet}
-              elements={getElementsDefinition([...nodeData.values()], [...edgeData.values()])}
-              layout={edgeData.size > 0 ? breadthFirstlayout : nodeData.size > 1 ? gridlayout : presetlayout}
+    <div className='knowledgeGraph-container'>
+      <h2>Knowledge Graph</h2>
+      <div className='search-bar'>
+        <Grid gridDefinition={[{ colspan: 9 }, { colspan: 3 }]}>
+          <Input
+            type='search'
+            value={searchTerm}
+            onChange={(e) => {
+              setSearchTerm(e.detail.value);
+            }}
+          ></Input>
+          <Button onClick={onSearchClicked} data-testid='search-button'>
+            <FormattedMessage
+              id='KnowledgeGraphPanel.button.search'
+              defaultMessage='Search'
+              description='Search button text'
             />
-            <Toolbar>
-              <Button
-                data-testid='fit-button'
-                className={`${STYLE_PREFIX}-button`}
-                onClick={fit}
-                iconName='zoom-to-fit'
-                variant='icon'
-              />
-              <Button
-                data-testid='center-button'
-                className={`${STYLE_PREFIX}-button`}
-                onClick={center}
-                iconName='expand'
-                variant='icon'
-              />
-              <Button
-                data-testid='zoom-in-button'
-                className={`${STYLE_PREFIX}-button`}
-                onClick={zoomIn}
-                iconName='zoom-in'
-                variant='icon'
-              />
-              <Button
-                data-testid='zoom-out-button'
-                className={`${STYLE_PREFIX}-button`}
-                onClick={zoomOut}
-                iconName='zoom-out'
-                variant='icon'
-              />
-            </Toolbar>
-          </div>
-          <div style={{ minWidth: '300px' }}>
-            <SpaceBetween direction='horizontal' size='s'>
-              <Button
-                disabled={selectedGraphNodeEntityId ? false : true}
-                onClick={onExploreClicked}
-                data-testid='explore-button'
-              >
-                <FormattedMessage
-                  id='KnowledgeGraphPanel.button.explore'
-                  defaultMessage='Explore'
-                  description='Explore button text'
-                />
-              </Button>
-              <Button disabled={queryResult ? false : true} onClick={onClearClicked} data-testid='clear-button'>
-                <FormattedMessage
-                  id='KnowledgeGraphPanel.button.clear'
-                  defaultMessage='Clear'
-                  description='Clear button text'
-                />
-              </Button>
-            </SpaceBetween>
-          </div>
+          </Button>
+        </Grid>
+      </div>
+      <div ref={containerRef} className={`${STYLE_PREFIX} ${className || ''}`.trim()} {...props}>
+        <GraphView
+          className={`${STYLE_PREFIX}-canvas`}
+          ref={cy}
+          stylesheet={stylesheet}
+          elements={getElementsDefinition([...nodeData.values()], [...edgeData.values()])}
+          layout={edgeData.size > 0 ? breadthFirstlayout : nodeData.size > 1 ? gridlayout : presetlayout}
+        />
+        <Toolbar>
+          <Button
+            data-testid='fit-button'
+            className={`${STYLE_PREFIX}-button`}
+            onClick={fit}
+            iconName='zoom-to-fit'
+            variant='icon'
+          />
+          <Button
+            data-testid='center-button'
+            className={`${STYLE_PREFIX}-button`}
+            onClick={center}
+            iconName='expand'
+            variant='icon'
+          />
+          <Button
+            data-testid='zoom-in-button'
+            className={`${STYLE_PREFIX}-button`}
+            onClick={zoomIn}
+            iconName='zoom-in'
+            variant='icon'
+          />
+          <Button
+            data-testid='zoom-out-button'
+            className={`${STYLE_PREFIX}-button`}
+            onClick={zoomOut}
+            iconName='zoom-out'
+            variant='icon'
+          />
+        </Toolbar>
+      </div>
+      <div className='action-buttons'>
+        <SpaceBetween direction='horizontal' size='s'>
+          <Button
+            disabled={selectedGraphNodeEntityId ? false : true}
+            onClick={onExploreClicked}
+            data-testid='explore-button'
+          >
+            <FormattedMessage
+              id='KnowledgeGraphPanel.button.explore'
+              defaultMessage='Explore'
+              description='Explore button text'
+            />
+          </Button>
+          <Button disabled={queryResult ? false : true} onClick={onClearClicked} data-testid='clear-button'>
+            <FormattedMessage
+              id='KnowledgeGraphPanel.button.clear'
+              defaultMessage='Clear'
+              description='Clear button text'
+            />
+          </Button>
         </SpaceBetween>
       </div>
-    </Container>
+    </div>
   );
 };
 export const KnowledgeGraph: React.FC<KnowledgeGraphInterface> = (props) => {

packages/react-components/src/components/knowledge-graph/graph/styles.scss

@@ -57,6 +57,9 @@ $prefix: 'iot-app-kit-graph';
   --#{$prefix}-color-edge-line: var(--awsui-color-grey-600);
   --#{$prefix}-color-edge-line-selected: var(--awsui-color-blue-600);
 
+  display: flex;
+  margin: 10px;
+  flex: 1;
   font-size: 1px;
   text-rendering: geometricPrecision;
   width: 100%;

packages/react-components/src/components/knowledge-graph/styles.scss

@@ -0,0 +1,16 @@
+.knowledgeGraph-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.search-bar {
+  min-width: 500px;
+  flex: 0;
+  margin: 10px;
+}
+.action-buttons {
+  min-width: 300px;
+  flex: 0;
+  margin: 10px;
+}