github.com/turbot/steampipe@v1.7.0-rc.0.0.20240517123944-7cef272d4458/ui/dashboard/src/components/dashboards/graphs/Graph/FloatingEdge.tsx (about)

     1  import RowProperties, { RowPropertiesTitle } from "./RowProperties";
     2  import Tooltip from "./Tooltip";
     3  import {
     4    buildLabelTextShadow,
     5    circleGetBezierPath,
     6    getEdgeParams,
     7  } from "./utils";
     8  import { classNames } from "../../../../utils/styles";
     9  import { colorToRgb } from "../../../../utils/color";
    10  import { EdgeLabelRenderer, useStore } from "reactflow";
    11  import { useCallback } from "react";
    12  
    13  const FloatingEdge = ({
    14    id,
    15    source,
    16    target,
    17    markerEnd,
    18    style,
    19    data: {
    20      category,
    21      color,
    22      properties,
    23      labelOpacity,
    24      lineOpacity,
    25      row_data,
    26      label,
    27      themeColors,
    28    },
    29  }) => {
    30    const sourceNode = useStore(
    31      useCallback((store) => store.nodeInternals.get(source), [source])
    32    );
    33    const targetNode = useStore(
    34      useCallback((store) => store.nodeInternals.get(target), [target])
    35    );
    36  
    37    if (!sourceNode || !targetNode) {
    38      return null;
    39    }
    40  
    41    const { sx, sy, mx, my, tx, ty } = getEdgeParams(sourceNode, targetNode);
    42  
    43    const d = circleGetBezierPath({
    44      sourceX: sx,
    45      sourceY: sy,
    46      targetX: tx,
    47      targetY: ty,
    48    });
    49  
    50    const colorRgb = colorToRgb(color, themeColors);
    51  
    52    const edgeLabel = (
    53      <span
    54        title={label}
    55        className={classNames(
    56          "block italic max-w-[70px] text-sm text-center text-wrap leading-tight line-clamp-2",
    57          row_data && row_data.properties ? "border-b border-dashed" : null
    58        )}
    59        style={{
    60          borderColor: `rgba(${colorRgb[0]},${colorRgb[1]},${colorRgb[2]},${labelOpacity})`,
    61          color: `rgba(${colorRgb[0]},${colorRgb[1]},${colorRgb[2]},${labelOpacity})`,
    62          textDecorationColor: `rgba(${colorRgb[0]},${colorRgb[1]},${colorRgb[2]},${labelOpacity})`,
    63          textShadow: buildLabelTextShadow(themeColors.dashboardPanel),
    64        }}
    65      >
    66        {label}
    67      </span>
    68    );
    69  
    70    const edgeLabelWrapper = (
    71      <>
    72        {row_data && row_data.properties && (
    73          <Tooltip
    74            overlay={
    75              <RowProperties
    76                propertySettings={properties || null}
    77                properties={row_data.properties}
    78              />
    79            }
    80            title={<RowPropertiesTitle category={category} title={label} />}
    81          >
    82            {edgeLabel}
    83          </Tooltip>
    84        )}
    85        {(!row_data || !row_data.properties) && edgeLabel}
    86      </>
    87    );
    88  
    89    return (
    90      <>
    91        <path
    92          id={id}
    93          d={d}
    94          markerEnd={markerEnd}
    95          style={{
    96            ...(style || {}),
    97            opacity: lineOpacity,
    98            stroke: color,
    99            strokeWidth: 1,
   100          }}
   101        />
   102        <EdgeLabelRenderer>
   103          <div
   104            className="absolute pointer-events-auto cursor-grab"
   105            style={{
   106              transform: `translate(-50%, -50%) translate(${mx}px,${my}px)`,
   107            }}
   108          >
   109            {edgeLabelWrapper}
   110          </div>
   111        </EdgeLabelRenderer>
   112      </>
   113    );
   114  };
   115  
   116  export default FloatingEdge;