REA-265: Document edge tooltip support

Author: micschro

docs/features/Tooltips.mdx

@@ -28,10 +28,26 @@ You can also specify custom React components to render the tooltips according to
 <Playground
   code={`
 
-    function MyTooltipComponent({ data: { name } }: RenderTooltipProps<CustomOrgChartItem>) {
-      return <div style={{ backgroundColor: "tomato", padding: 5, borderRadius: 10, color: "white" }}>{name}</div>
+    function MyTooltipComponent({
+      data
+    }: RenderTooltipProps<CustomOrgChartItem | OrgChartConnection<CustomOrgChartItem>>) {
+      let text = ''
+      if ('name' in data) {
+        // orgchart item tooltip
+        text = data.name!
+      } else if ('source' in data) {
+        // orgchart connection tooltip
+        text = \`${data.source.name} → ${data.target.name}\`
+      }
+
+      return (
+        <div style={{ backgroundColor: 'tomato', padding: 5, borderRadius: 10, color: 'white' }}>
+          {text}
+        </div>
+      )
     }
 
+
     function App () {
       return (
         <OrgChart

examples/src/examples/Islands/index.tsx

@@ -2,6 +2,7 @@ import {
   ContextMenuItem,
   CustomOrgChartItem,
   OrgChart,
+  OrgChartConnection,
   RenderItemProps,
   RenderTooltipProps
 } from '@yworks/react-yfiles-orgchart'
@@ -14,9 +15,23 @@ export function useColorContext() {
   return useContext(ColorContext)
 }
 
-function TooltipTemplate({ data: { name } }: RenderTooltipProps<CustomOrgChartItem>) {
-  const color = useColorContext()
-  return <div style={{ backgroundColor: color }}>{name}</div>
+function MyTooltipComponent({
+  data
+}: RenderTooltipProps<CustomOrgChartItem | OrgChartConnection<CustomOrgChartItem>>) {
+  let text = ''
+  if ('name' in data) {
+    // orgchart item tooltip
+    text = data.name!
+  } else if ('source' in data) {
+    // orgchart connection tooltip
+    text = `${data.source.name} → ${data.target.name}`
+  }
+
+  return (
+    <div style={{ backgroundColor: 'tomato', padding: 5, borderRadius: 10, color: 'white' }}>
+      {text}
+    </div>
+  )
 }
 
 function RenderMenu(_: {
@@ -70,7 +85,7 @@ export default function Islands() {
         <OrgChart
           data={largeOrgchartData}
           renderItem={RenderItem}
-          renderTooltip={TooltipTemplate}
+          renderTooltip={MyTooltipComponent}
           renderContextMenu={RenderMenu}
         ></OrgChart>
       </ColorContext.Provider>

examples/src/examples/MUIDarkMode/index.tsx

@@ -3,6 +3,7 @@ import {
   ContextMenuItem,
   CustomOrgChartItem,
   OrgChart,
+  OrgChartConnection,
   OrgChartContextMenuItems,
   RenderItemProps,
   RenderTooltipProps
@@ -26,26 +27,30 @@ import {
   Tooltip
 } from '@mui/material'
 
-function TooltipTemplate({ data }: RenderTooltipProps<CustomOrgChartItem>) {
-  return (
-    <Card sx={{ minWidth: 275 }}>
-      <CardContent>
-        <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
-          {data.position}
-        </Typography>
-        <Typography variant="h5" component="div">
-          {data.name}
-        </Typography>
-        <Typography sx={{ mb: 1.5 }} color="text.secondary">
-          {data.status}
-        </Typography>
-        <Typography variant="body2">{data.email}</Typography>
-      </CardContent>
-      <CardActions>
-        <Button size="small">Learn More</Button>
-      </CardActions>
-    </Card>
-  )
+function TooltipTemplate({
+  data
+}: RenderTooltipProps<CustomOrgChartItem | OrgChartConnection<CustomOrgChartItem>>) {
+  if ('name' in data) {
+    return (
+      <Card sx={{ minWidth: 275 }}>
+        <CardContent>
+          <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
+            {data.position}
+          </Typography>
+          <Typography variant="h5" component="div">
+            {data.name}
+          </Typography>
+          <Typography sx={{ mb: 1.5 }} color="text.secondary">
+            {data.status}
+          </Typography>
+          <Typography variant="body2">{data.email}</Typography>
+        </CardContent>
+        <CardActions>
+          <Button size="small">Learn More</Button>
+        </CardActions>
+      </Card>
+    )
+  }
 }
 
 function RenderItem(props: RenderItemProps<CustomOrgChartItem>) {

examples/src/examples/OrgChartWithProvider/TooltipTemplate.tsx

@@ -1,19 +1,23 @@
 import { RenderTooltipProps } from '@yworks/react-yfiles-core'
-import { CustomOrgChartItem } from '@yworks/react-yfiles-orgchart'
+import { CustomOrgChartItem, OrgChartConnection } from '@yworks/react-yfiles-orgchart'
 
-export default function TooltipTemplate({ data }: RenderTooltipProps<CustomOrgChartItem>) {
-  return (
-    <div className={'node-background'}>
-      {
-        <div className={'detail-node'}>
-          <div className={'node-right'}>
-            <div className={'node-name'}>{data.name}</div>
-            <div className={'node-position'}>{data.position}</div>
-            <div className={'node-email'}>{data.email}</div>
-            <div className={'node-phone'}>{data.name}</div>
+export default function TooltipTemplate({
+  data
+}: RenderTooltipProps<CustomOrgChartItem | OrgChartConnection<CustomOrgChartItem>>) {
+  if ('name' in data) {
+    return (
+      <div className={'node-background'}>
+        {
+          <div className={'detail-node'}>
+            <div className={'node-right'}>
+              <div className={'node-name'}>{data.name}</div>
+              <div className={'node-position'}>{data.position}</div>
+              <div className={'node-email'}>{data.email}</div>
+              <div className={'node-phone'}>{data.name}</div>
+            </div>
           </div>
-        </div>
-      }
-    </div>
-  )
+        }
+      </div>
+    )
+  }
 }

src/OrgChart.tsx

@@ -127,9 +127,9 @@ export type CustomOrgChartData<TCustomProps> = CustomOrgChartItem<TCustomProps>[
 /**
  * The basic data type for the connections between data items visualized by the {@link OrgChart} component.
  */
-export interface OrgChartConnection {
-  source: OrgChartItem
-  target: OrgChartItem
+export interface OrgChartConnection<TOrgChartItem extends OrgChartItem> {
+  source: TOrgChartItem
+  target: TOrgChartItem
 }
 
 /**
@@ -235,7 +235,9 @@ export interface OrgChartProps<TOrgChartItem extends OrgChartItem, TNeedle> {
   /**
    * An optional component that can be used for rendering a custom tooltip.
    */
-  renderTooltip?: ComponentType<RenderTooltipProps<TOrgChartItem>>
+  renderTooltip?: ComponentType<
+    RenderTooltipProps<TOrgChartItem | OrgChartConnection<TOrgChartItem>>
+  >
   /**
    * An optional function specifying the context menu items for a data item.
    */

src/OrgChartModel.ts

@@ -80,11 +80,11 @@ export interface OrgChartModel {
   /**
    * Pans the viewport to the center of the given items.
    */
-  zoomTo(items: (OrgChartItem | OrgChartConnection)[]): void
+  zoomTo(items: (OrgChartItem | OrgChartConnection<OrgChartItem>)[]): void
   /**
    * Pans the viewport to center the given item.
    */
-  zoomToItem(item: OrgChartItem | OrgChartConnection): void
+  zoomToItem(item: OrgChartItem | OrgChartConnection<OrgChartItem>): void
   /**
    * Increases the zoom level.
    */
@@ -169,7 +169,7 @@ export function createOrgChartModel(
     onRenderedCallback = null
   }
 
-  function zoomTo(items: (OrgChartItem | OrgChartConnection)[]) {
+  function zoomTo(items: (OrgChartItem | OrgChartConnection<OrgChartItem>)[]) {
     if (items.length === 0) {
       return
     }
@@ -277,7 +277,7 @@ export function createOrgChartModel(
       return collapsibleTree.applyInitialLayout(incremental ?? false, incrementalNodes)
     },
 
-    zoomToItem(item: OrgChartItem | OrgChartConnection) {
+    zoomToItem(item: OrgChartItem | OrgChartConnection<OrgChartItem>) {
       zoomTo([item])
     },
 

src/styles/Templates.tsx

@@ -194,7 +194,7 @@ function findProperties(data: CustomOrgChartItem) {
  */
 export function RenderOrgChartTooltip<TOrgChartItem extends OrgChartItem>({
   data
-}: RenderTooltipProps<TOrgChartItem>) {
+}: RenderTooltipProps<TOrgChartItem | OrgChartConnection<TOrgChartItem>>) {
   // Currently, no tooltips are shown for edges.
   if ('source' in data && 'target' in data) {
     return null
@@ -288,7 +288,7 @@ export function OrgChartControlButtons(): ControlButton[] {
  * @returns an array of [context menu items]{@link ContextMenuProps.menuItems}.
  */
 export function OrgChartContextMenuItems(
-  item: OrgChartItem | OrgChartConnection | null
+  item: OrgChartItem | OrgChartConnection<OrgChartItem> | null
 ): ContextMenuItem<OrgChartItem>[] {
   const orgChart = useOrgChartContext()