Fixes an issue causing the "Search Current Results" input and result list to render behind the list of saved cypher queries when both are visible
Fixes an issue causing the cypher query input to incorrectly overflow the available vertical space is exceeded
Fixes an issue causing cypher query input linter messages to be cutoff when extending beyond the input box border
This is accomplished by placing the ExploreSearch and the GraphButtons components in the same vertical flexbox container and dynamically changing the size used by the cypher query input between 4 and 12 lines based on the available vertical viewport space.
In order to co-locate these components (specifically the GraphButtons component) we make use of React's useImperativeHandle hook to enable ourselves to call functions which manipulate the Sigma.js graph instance from outside of the graph context. To learn more about this pattern please read https://react.dev/reference/react/useImperativeHandle#exposing-your-own-imperative-methods
Description
This is accomplished by placing the
ExploreSearchand theGraphButtonscomponents in the same vertical flexbox container and dynamically changing the size used by the cypher query input between 4 and 12 lines based on the available vertical viewport space.In order to co-locate these components (specifically the GraphButtons component) we make use of React's
useImperativeHandlehook to enable ourselves to call functions which manipulate the Sigma.js graph instance from outside of the graph context. To learn more about this pattern please read https://react.dev/reference/react/useImperativeHandle#exposing-your-own-imperative-methodsMotivation and Context
This PR addresses:
How Has This Been Tested?
Unit tests have been updated
Screenshots (optional):
https://github.com/user-attachments/assets/3f4d22c9-1f53-441f-ac6a-e221910aeeba
Types of changes
Checklist: