Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show expand collapse state on graph nodes tooltip #1708

Merged
merged 1 commit into from
Nov 6, 2023
Merged

Show expand collapse state on graph nodes tooltip #1708

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions deepfence_frontend/apps/dashboard/src/components/icons/common/ResizeDown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
export const ResizeDownIcon = () => {
return (
<svg
width="100%"
height="100%"
viewBox="0 0 37 36"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="resize-down">
<path
id="icon"
fillRule="evenodd"
clipRule="evenodd"
d="M22.4754 15H32.0654C32.6177 15 33.0654 15.4477 33.0654 16C33.0654 16.5523 32.6177 17 32.0654 17H19.0654V4C19.0654 3.44772 19.5131 3 20.0654 3C20.6177 3 21.0654 3.44772 21.0654 4V13.59L30.3154 4.34C30.7122 4.00022 31.3036 4.02307 31.673 4.39244C32.0424 4.76181 32.0652 5.35324 31.7254 5.75L22.4754 15ZM3.06543 20C3.06543 19.4477 3.51314 19 4.06543 19H17.0654V32C17.0654 32.5523 16.6177 33 16.0654 33C15.5131 33 15.0654 32.5523 15.0654 32V22.41L5.80543 31.66C5.56104 31.9454 5.17731 32.0697 4.81201 31.9818C4.44671 31.8939 4.16149 31.6087 4.07362 31.2434C3.98575 30.8781 4.11005 30.4944 4.39543 30.25L13.6554 21H4.06543C3.51314 21 3.06543 20.5523 3.06543 20Z"
fill="currentColor"
/>
</g>
</svg>
);
};
21 changes: 18 additions & 3 deletions deepfence_frontend/apps/dashboard/src/features/topology/components/TopologyGraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from 'react';
import { useEffect, useMemo, useRef, useState } from 'react';
import { useFetcher, useParams } from 'react-router-dom';
import { useDebounce, useEffectOnce, useHoverDirty, useMeasure } from 'react-use';
import { cn } from 'tailwind-preset';
Expand All @@ -7,6 +7,7 @@ import { CircleSpinner } from 'ui-components';
import { DFLink } from '@/components/DFLink';
import { DetailsLineIcon } from '@/components/icons/common/DetailsLine';
import { ErrorStandardSolidIcon } from '@/components/icons/common/ErrorStandardSolid';
import { ResizeDownIcon } from '@/components/icons/common/ResizeDown';
import { ResizeUpIcon } from '@/components/icons/common/ResizeUp';
import { NodeDetailsStackedModal } from '@/features/topology/components/NodeDetailsStackedModal';
import {
Expand Down Expand Up @@ -208,7 +209,9 @@ export const TopologyGraph = () => {
ref={tooltipRef}
>
<GraphTooltip
visible={debouncedTooltipLoc.show}
item={debouncedTooltipLoc.item}
isNodeExpanded={graphDataManagerFunctions.isNodeExpanded}
onExpandCollapseClick={(model) => {
setDebouncedTooltipLoc((prev) => {
return { ...prev, show: false };
Expand Down Expand Up @@ -282,15 +285,27 @@ const GraphTooltip = ({
item,
onExpandCollapseClick,
onViewDetailsClick,
isNodeExpanded,
visible,
}: {
item: G6Node | null;
onExpandCollapseClick: (model: NodeModel) => void;
onViewDetailsClick: (model: NodeModel) => void;
isNodeExpanded: ({ nodeId, nodeType }: { nodeId: string; nodeType: string }) => boolean;
visible: boolean;
}) => {
const model = item?.getModel() as NodeModel | undefined;
if (!model) return null;
const expands = itemExpands(model.df_data);
const hasDetails = itemHasDetails(model.df_data);

const expanded = useMemo(() => {
if (model.df_data?.id && model.df_data.type) {
return isNodeExpanded({ nodeId: model.df_data.id, nodeType: model.df_data.type });
}
return false;
}, [model.df_data, isNodeExpanded, visible]);

return (
<div
role="tooltip"
Expand All @@ -317,9 +332,9 @@ const GraphTooltip = ({
className="px-2.5 text-p6 py-1 hover:dark:bg-[#A1AFB9] flex items-center gap-2 w-full"
>
<div className="h-4 w-4 shrink-0">
<ResizeUpIcon />
{expanded ? <ResizeDownIcon /> : <ResizeUpIcon />}
</div>
<div>Expand / Collapse</div>
<div>{expanded ? 'Collapse' : 'Expand'}</div>
</button>
</div>
)}
Expand Down
Loading