Graph HTML renderer v1

lonestone · Oct 3, 2024 · d5354eb · d5354eb
1 parent d809d60
commit d5354eb
Show file tree

Hide file tree

Showing 12 changed files with 235 additions and 180 deletions.
diff --git a/packages/webapp/share/OrgPage.tsx b/packages/webapp/share/OrgPage.tsx
@@ -6,7 +6,7 @@ import { useElementSize } from '@/common/hooks/useElementSize'
 import useOverflowHidden from '@/common/hooks/useOverflowHidden'
 import useQueryParams from '@/common/hooks/useQueryParams'
 import Page404 from '@/common/pages/Page404'
-import CirclesSVGGraph from '@/graph/CirclesSVGGraph'
+import CirclesHTMLGraph from '@/graph/CirclesHTMLGraph'
 import { GraphProvider } from '@/graph/contexts/GraphContext'
 import { CirclesGraphViews, GraphEvents } from '@/graph/types'
 import { Box } from '@chakra-ui/react'
@@ -130,7 +130,7 @@ export default function OrgPage() {
         {loading ? <Loading center active /> : !data?.circle[0] && <Page404 />}
 
         {circles && boxSize && (
-          <CirclesSVGGraph
+          <CirclesHTMLGraph
             view={view}
             circles={circles}
             events={events}

diff --git a/packages/webapp/src/features/circle/components/CirclesGraphOptions.tsx b/packages/webapp/src/features/circle/components/CirclesGraphOptions.tsx
@@ -15,8 +15,6 @@ import GraphViewsSelect from './GraphViewsSelect'
 interface CirclesGraphOptionsProps extends StyleProps {
   view: CirclesGraphViews
   onViewChange: (view: CirclesGraphViews) => void
-  beta: boolean
-  onBetaChange: (beta: boolean) => void
 }
 
 const buttonsProps = {
@@ -45,8 +43,6 @@ const buttonsProps = {
 export default function CirclesGraphOptions({
   view,
   onViewChange,
-  beta,
-  onBetaChange,
   ...styleProps
 }: CirclesGraphOptionsProps) {
   const { t } = useTranslation()
@@ -109,16 +105,6 @@ export default function CirclesGraphOptions({
         </>
       )}
 
-      <Button
-        size="sm"
-        border={0}
-        opacity={beta ? 1 : 0}
-        _hover={{ opacity: 1 }}
-        onClick={() => onBetaChange(!beta)}
-      >
-        {beta ? 'Disable beta' : 'Try beta'}
-      </Button>
-
       {baseRolesModal.isOpen && (
         <BaseRolesModal isOpen onClose={baseRolesModal.onClose} />
       )}

diff --git a/packages/webapp/src/features/circle/modals/CirclePickerModal.tsx b/packages/webapp/src/features/circle/modals/CirclePickerModal.tsx
@@ -1,6 +1,6 @@
 import { useElementSize } from '@/common/hooks/useElementSize'
 import useWindowSize from '@/common/hooks/useWindowSize'
-import CirclesSVGGraph from '@/graph/CirclesSVGGraph'
+import CirclesHTMLGraph from '@/graph/CirclesHTMLGraph'
 import { CirclesGraphViews, GraphEvents } from '@/graph/types'
 import {
   Button,
@@ -51,7 +51,7 @@ export default function CirclePickerModal({ onSelect, ...modalProps }: Props) {
       <ModalContent border="3px solid">
         <ModalBody ref={boxRef} p={0} position="relative">
           {circles && boxSize && (
-            <CirclesSVGGraph
+            <CirclesHTMLGraph
               view={CirclesGraphViews.SimpleCircles}
               circles={circles}
               events={events}

diff --git a/packages/webapp/src/features/circle/pages/CirclesPage.tsx b/packages/webapp/src/features/circle/pages/CirclesPage.tsx
@@ -4,7 +4,6 @@ import { useElementSize } from '@/common/hooks/useElementSize'
 import useOverflowHidden from '@/common/hooks/useOverflowHidden'
 import useQueryParams from '@/common/hooks/useQueryParams'
 import CirclesHTMLGraph from '@/graph/CirclesHTMLGraph'
-import CirclesSVGGraph from '@/graph/CirclesSVGGraph'
 import { GraphProvider } from '@/graph/contexts/GraphContext'
 import useCirclesEvents from '@/graph/hooks/useGraphEvents'
 import { CirclesGraphViews } from '@/graph/types'
@@ -46,7 +45,6 @@ export default function CirclesPage() {
   const queryParams = useQueryParams<CirclesPageParams>()
   const navigateOrg = useNavigateOrg()
   const org = useCurrentOrg()
-  const [beta, setBeta] = useState(false)
   const [ready, setReady] = useState(false)
 
   // Content size
@@ -129,34 +127,19 @@ export default function CirclesPage() {
         right={0}
         overflow="hidden"
       >
-        {org &&
-          circles &&
-          boxSize &&
-          (beta ? (
-            <CirclesHTMLGraph
-              key={view + colorMode}
-              view={view}
-              circles={circles}
-              events={events}
-              width={boxSize.width}
-              height={boxSize.height}
-              focusCrop={focusCrop}
-              selectedCircleId={circleId}
-              onReady={() => setReady(true)}
-            />
-          ) : (
-            <CirclesSVGGraph
-              key={view + colorMode}
-              view={view}
-              circles={circles}
-              events={events}
-              width={boxSize.width}
-              height={boxSize.height}
-              focusCrop={focusCrop}
-              selectedCircleId={circleId}
-              onReady={() => setReady(true)}
-            />
-          ))}
+        {org && circles && boxSize && (
+          <CirclesHTMLGraph
+            key={view + colorMode}
+            view={view}
+            circles={circles}
+            events={events}
+            width={boxSize.width}
+            height={boxSize.height}
+            focusCrop={focusCrop}
+            selectedCircleId={circleId}
+            onReady={() => setReady(true)}
+          />
+        )}
       </Box>
 
       {panel === Panels.Circle && circleId && (
@@ -184,8 +167,6 @@ export default function CirclesPage() {
       <CirclesGraphOptions
         view={view}
         onViewChange={setView}
-        beta={beta}
-        onBetaChange={setBeta}
         p={2}
         pl={
           sidebarContext?.minimize.isOpen && !sidebarContext?.isMobile ? 12 : 2

diff --git a/packages/webapp/src/features/dashboard/components/DashboardOrgChart.tsx b/packages/webapp/src/features/dashboard/components/DashboardOrgChart.tsx
@@ -1,5 +1,5 @@
 import { useElementSize } from '@/common/hooks/useElementSize'
-import CirclesSVGGraph from '@/graph/CirclesSVGGraph'
+import CirclesHTMLGraph from '@/graph/CirclesHTMLGraph'
 import useCirclesEvents from '@/graph/hooks/useGraphEvents'
 import { CirclesGraphViews } from '@/graph/types'
 import useCurrentOrg from '@/org/hooks/useCurrentOrg'
@@ -26,7 +26,7 @@ export default function DashboardOrgChart(boxProps: BoxProps) {
   return (
     <Box ref={boxRef} h={size} {...boxProps}>
       {org && circles && size && (
-        <CirclesSVGGraph
+        <CirclesHTMLGraph
           key={colorMode}
           view={CirclesGraphViews.AllCircles}
           circles={circles}

diff --git a/packages/webapp/src/features/graph/CirclesHTMLGraph.tsx b/packages/webapp/src/features/graph/CirclesHTMLGraph.tsx
@@ -44,6 +44,7 @@ export default forwardRef<CirclesGraph | undefined, CirclesGraphProps>(
         ref={containerRef}
         width={props.width}
         height={props.height}
+        overflow="hidden"
         style={
           {
             '--graph-min-size': graphMinSize,