diff --git a/datahub-web-react/package.json b/datahub-web-react/package.json index fa71d609a3..3ab84cb376 100644 --- a/datahub-web-react/package.json +++ b/datahub-web-react/package.json @@ -74,7 +74,6 @@ "react-router": "^5.2.0", "react-router-dom": "^5.1.6", "react-scripts": "4.0.3", - "react-split-pane": "^0.1.92", "react-syntax-highlighter": "^15.4.4", "react-timezone-select": "^1.1.15", "react-visibility-sensor": "^5.1.1", diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/EntityProfile.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/EntityProfile.tsx index f335229e05..8338982348 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/EntityProfile.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/EntityProfile.tsx @@ -1,6 +1,5 @@ -import React, { useCallback } from 'react'; +import React, { useCallback, useState } from 'react'; import { Alert, Divider } from 'antd'; -import SplitPane from 'react-split-pane'; import { MutationHookOptions, MutationTuple, QueryHookOptions, QueryResult } from '@apollo/client/react/types/types'; import styled from 'styled-components'; import { useHistory } from 'react-router'; @@ -20,6 +19,7 @@ import LineageExplorer from '../../../../lineage/LineageExplorer'; import CompactContext from '../../../../shared/CompactContext'; import DynamicTab from '../../tabs/Entity/weaklyTypedAspects/DynamicTab'; import analytics, { EventType } from '../../../../analytics'; +import { ProfileSidebarResizer } from './sidebar/ProfileSidebarResizer'; type Props = { urn: string; @@ -50,12 +50,11 @@ const ContentContainer = styled.div` display: flex; height: auto; min-height: 100%; - align-items: stretch; flex: 1; `; const HeaderAndTabs = styled.div` - flex-basis: 70%; + flex-grow: 1; min-width: 640px; height: 100%; `; @@ -81,10 +80,10 @@ const HeaderAndTabsFlex = styled.div` -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75); } `; -const Sidebar = styled.div` +const Sidebar = styled.div<{ $width: number }>` max-height: 100%; overflow: auto; - flex-basis: 30%; + flex-basis: ${(props) => props.$width}px; padding-left: 20px; padding-right: 20px; `; @@ -102,14 +101,6 @@ const TabContent = styled.div` overflow: auto; `; -const resizerStyles = { - borderLeft: `1px solid #E9E9E9`, - width: '2px', - cursor: 'col-resize', - margin: '0 5px', - height: '100%', -}; - const defaultTabDisplayConfig = { visible: (_, _1) => true, enabled: (_, _1) => true, @@ -119,6 +110,10 @@ const defaultSidebarSection = { visible: (_, _1) => true, }; +const INITIAL_SIDEBAR_WIDTH = 400; +const MAX_SIDEBAR_WIDTH = 800; +const MIN_SIDEBAR_WIDTH = 200; + /** * Container for display of the Entity Page */ @@ -142,6 +137,8 @@ export const EntityProfile = ({ display: { ...defaultSidebarSection, ...sidebarSection.display }, })); + const [sidebarWidth, setSidebarWidth] = useState(INITIAL_SIDEBAR_WIDTH); + const routeToTab = useCallback( ({ tabName, @@ -262,18 +259,7 @@ export const EntityProfile = ({ {isLineageMode ? ( ) : ( - + <>
@@ -288,10 +274,16 @@ export const EntityProfile = ({ - + + setSidebarWidth(Math.min(Math.max(width, MIN_SIDEBAR_WIDTH), MAX_SIDEBAR_WIDTH)) + } + initialSize={sidebarWidth} + /> + - + )} diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/ProfileSidebarResizer.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/ProfileSidebarResizer.tsx new file mode 100644 index 0000000000..fb29e4acc5 --- /dev/null +++ b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/ProfileSidebarResizer.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import styled from 'styled-components'; +import { ANTD_GRAY } from '../../../constants'; + +type Props = { + setSidePanelWidth: (width: number) => void; + initialSize: number; +}; + +const ResizerBar = styled.div` + min-height: 100%; + border: 1px solid ${ANTD_GRAY[4]}; + cursor: col-resize; +`; +export const ProfileSidebarResizer = ({ setSidePanelWidth, initialSize }: Props) => { + let dragState: { initialX: number; initialSize: number } | undefined; + + const dragContinue = (event: MouseEvent) => { + if (!dragState) { + return; + } + + const xDifference = event.clientX - (dragState.initialX || 0); + setSidePanelWidth(dragState.initialSize - xDifference); + }; + + const stopDragging = () => { + window.removeEventListener('mousemove', dragContinue, false); + window.removeEventListener('mouseup', stopDragging, false); + }; + + const onDrag = (event: React.MouseEvent) => { + const { clientX } = event; + dragState = { initialX: clientX, initialSize }; + + window.addEventListener('mousemove', dragContinue, false); + window.addEventListener('mouseup', stopDragging, false); + event.preventDefault(); + }; + + return ( + { + onDrag(event); + }} + /> + ); +}; diff --git a/datahub-web-react/yarn.lock b/datahub-web-react/yarn.lock index d9fbc05bf7..666e4ba263 100644 --- a/datahub-web-react/yarn.lock +++ b/datahub-web-react/yarn.lock @@ -13321,15 +13321,6 @@ prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.1, object-assign "^4.1.1" react-is "^16.8.1" -prop-types@^15.5.4: - version "15.8.1" - resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" - integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== - dependencies: - loose-envify "^1.4.0" - object-assign "^4.1.1" - react-is "^16.13.1" - property-information@^5.0.0, property-information@^5.3.0: version "5.6.0" resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69" @@ -13955,7 +13946,7 @@ react-icons@4.3.1: resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca" integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ== -react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1: +react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -13965,11 +13956,6 @@ react-is@^17.0.0, react-is@^17.0.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== -react-lifecycles-compat@^3.0.4: - version "3.0.4" - resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" - integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== - react-markdown@6.0.2: version "6.0.2" resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-6.0.2.tgz#d89be45c278b1e5f0196f851fffb11e30c69f027" @@ -14102,22 +14088,6 @@ react-select@^5.1.0: prop-types "^15.6.0" react-transition-group "^4.3.0" -react-split-pane@^0.1.92: - version "0.1.92" - resolved "https://registry.yarnpkg.com/react-split-pane/-/react-split-pane-0.1.92.tgz#68242f72138aed95dd5910eeb9d99822c4fc3a41" - integrity sha512-GfXP1xSzLMcLJI5BM36Vh7GgZBpy+U/X0no+VM3fxayv+p1Jly5HpMofZJraeaMl73b3hvlr+N9zJKvLB/uz9w== - dependencies: - prop-types "^15.7.2" - react-lifecycles-compat "^3.0.4" - react-style-proptype "^3.2.2" - -react-style-proptype@^3.2.2: - version "3.2.2" - resolved "https://registry.yarnpkg.com/react-style-proptype/-/react-style-proptype-3.2.2.tgz#d8e998e62ce79ec35b087252b90f19f1c33968a0" - integrity sha512-ywYLSjNkxKHiZOqNlso9PZByNEY+FTyh3C+7uuziK0xFXu9xzdyfHwg4S9iyiRRoPCR4k2LqaBBsWVmSBwCWYQ== - dependencies: - prop-types "^15.5.4" - react-syntax-highlighter@^15.4.4: version "15.4.4" resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.4.4.tgz#dc9043f19e7bd063ff3ea78986d22a6eaa943b2a"