Skip to content

Commit

Permalink
Toogle labels option (#814)
Browse files Browse the repository at this point in the history 
* Added switch to toggle node lable names

* Adding functionality to toggle label visibility

* Fixed with some spacing, fixed global viewstate

* Removed uneccesary List element

* Formating

* Total rewrite

* fix: fix bug causing edge labels to re-appear after dragging a node even when edge labels have been hidden

* feat: align menu buttons with BHE implementation

* fix: update GraphButtons.test.tsx

---------

Co-authored-by: Eli K Miller <[email protected]>
  • Loading branch information
@Palt @elikmiller
Palt and elikmiller authored Nov 14, 2024
1 parent 8acb5fb commit 4465cf9
Show file tree
Hide file tree
Showing 7 changed files with 113 additions and 7 deletions.
40 changes: 40 additions & 0 deletions cmd/ui/src/components/GraphButtons/GraphButtons.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,11 @@ describe('GraphLayoutButtons', () => {
const testOnRunSequentialLayout = vi.fn();
const testOnExportJson = vi.fn();
const testOnSearchCurrentResults = vi.fn();
const testOnToggleAllLabels = vi.fn();
const testOnToggleNodeLabels = vi.fn();
const testOnToggleEdgeLabels = vi.fn();
const testShowNodeLabels = true;
const testShowEdgeLabels = true;
const testIsCurrentSearchOpen = false;
render(
<SigmaContainer>
Expand All @@ -37,6 +42,11 @@ describe('GraphLayoutButtons', () => {
onRunSequentialLayout={testOnRunSequentialLayout}
onExportJson={testOnExportJson}
onSearchCurrentResults={testOnSearchCurrentResults}
onToggleAllLabels={testOnToggleAllLabels}
onToggleNodeLabels={testOnToggleNodeLabels}
onToggleEdgeLabels={testOnToggleEdgeLabels}
showNodeLabels={testShowNodeLabels}
showEdgeLabels={testShowEdgeLabels}
isCurrentSearchOpen={testIsCurrentSearchOpen}
/>
</SigmaContainer>
Expand All @@ -55,6 +65,11 @@ describe('GraphLayoutButtons', () => {
const testOnRunSequentialLayout = vi.fn();
const testOnExportJson = vi.fn();
const testOnSearchCurrentResults = vi.fn();
const testOnToggleAllLabels = vi.fn();
const testOnToggleNodeLabels = vi.fn();
const testOnToggleEdgeLabels = vi.fn();
const testShowNodeLabels = true;
const testShowEdgeLabels = true;
const testIsCurrentSearchOpen = false;
render(
<SigmaContainer>
Expand All @@ -64,6 +79,11 @@ describe('GraphLayoutButtons', () => {
onRunSequentialLayout={testOnRunSequentialLayout}
onExportJson={testOnExportJson}
onSearchCurrentResults={testOnSearchCurrentResults}
onToggleAllLabels={testOnToggleAllLabels}
onToggleNodeLabels={testOnToggleNodeLabels}
onToggleEdgeLabels={testOnToggleEdgeLabels}
showNodeLabels={testShowNodeLabels}
showEdgeLabels={testShowEdgeLabels}
isCurrentSearchOpen={testIsCurrentSearchOpen}
/>
</SigmaContainer>
Expand All @@ -87,6 +107,11 @@ describe('GraphLayoutButtons', () => {
const testOnRunSequentialLayout = vi.fn();
const testOnExportJson = vi.fn();
const testOnSearchCurrentResults = vi.fn();
const testOnToggleAllLabels = vi.fn();
const testOnToggleNodeLabels = vi.fn();
const testOnToggleEdgeLabels = vi.fn();
const testShowNodeLabels = true;
const testShowEdgeLabels = true;
const testIsCurrentSearchOpen = false;
render(
<SigmaContainer>
Expand All @@ -96,6 +121,11 @@ describe('GraphLayoutButtons', () => {
onRunSequentialLayout={testOnRunSequentialLayout}
onExportJson={testOnExportJson}
onSearchCurrentResults={testOnSearchCurrentResults}
onToggleAllLabels={testOnToggleAllLabels}
onToggleNodeLabels={testOnToggleNodeLabels}
onToggleEdgeLabels={testOnToggleEdgeLabels}
showNodeLabels={testShowNodeLabels}
showEdgeLabels={testShowEdgeLabels}
isCurrentSearchOpen={testIsCurrentSearchOpen}
/>
</SigmaContainer>
Expand All @@ -116,6 +146,11 @@ describe('GraphLayoutButtons', () => {
const testOnRunSequentialLayout = vi.fn();
const testOnExportJson = vi.fn();
const testOnSearchCurrentResults = vi.fn();
const testOnToggleAllLabels = vi.fn();
const testOnToggleNodeLabels = vi.fn();
const testOnToggleEdgeLabels = vi.fn();
const testShowNodeLabels = true;
const testShowEdgeLabels = true;
const testIsCurrentSearchOpen = false;
render(
<SigmaContainer>
Expand All @@ -125,6 +160,11 @@ describe('GraphLayoutButtons', () => {
onRunSequentialLayout={testOnRunSequentialLayout}
onExportJson={testOnExportJson}
onSearchCurrentResults={testOnSearchCurrentResults}
onToggleAllLabels={testOnToggleAllLabels}
onToggleNodeLabels={testOnToggleNodeLabels}
onToggleEdgeLabels={testOnToggleEdgeLabels}
showNodeLabels={testShowNodeLabels}
showEdgeLabels={testShowEdgeLabels}
isCurrentSearchOpen={testIsCurrentSearchOpen}
/>
</SigmaContainer>,
Expand Down
18 changes: 18 additions & 0 deletions cmd/ui/src/components/GraphButtons/GraphButtons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,11 @@ interface GraphButtonsProps {
onRunSequentialLayout: () => void;
onExportJson: () => void;
onSearchCurrentResults: () => void;
onToggleAllLabels: () => void;
onToggleNodeLabels: () => void;
onToggleEdgeLabels: () => void;
showNodeLabels: boolean;
showEdgeLabels: boolean;
isCurrentSearchOpen: boolean;
}

Expand All @@ -37,6 +42,11 @@ const GraphButtons: FC<GraphButtonsProps> = ({
onRunSequentialLayout,
onExportJson,
onSearchCurrentResults,
onToggleAllLabels,
onToggleNodeLabels,
onToggleEdgeLabels,
showNodeLabels,
showEdgeLabels,
isCurrentSearchOpen,
}) => {
const exportableGraphState = useAppSelector((state) => state.explore.export);
Expand All @@ -45,6 +55,14 @@ const GraphButtons: FC<GraphButtonsProps> = ({
<Box display={'flex'} gap={1}>
<GraphButton onClick={onReset} displayText={<FontAwesomeIcon icon={faCropAlt} />} />

<GraphMenu label={'Hide Labels'}>
<MenuItem onClick={onToggleAllLabels}>
{!showNodeLabels || !showEdgeLabels ? 'Show' : 'Hide'} All Labels
</MenuItem>
<MenuItem onClick={onToggleNodeLabels}>{showNodeLabels ? 'Hide' : 'Show'} Node Labels</MenuItem>
<MenuItem onClick={onToggleEdgeLabels}>{showEdgeLabels ? 'Hide' : 'Show'} Edge Labels</MenuItem>
</GraphMenu>

<GraphMenu label='Layout'>
<MenuItem onClick={onRunSequentialLayout}>Sequential</MenuItem>
<MenuItem onClick={onRunStandardLayout}>Standard</MenuItem>
Expand Down
24 changes: 21 additions & 3 deletions cmd/ui/src/components/GraphEvents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,21 @@ export interface GraphEventProps {
onClickStage?: () => void;
edgeReducer?: (edge: string, data: Attributes, graph: AbstractGraph) => Attributes;
onRightClickNode?: (event: SigmaNodeEventPayload) => void;
showNodeLabels?: boolean;
showEdgeLabels?: boolean;
}

export const GraphEvents = forwardRef(function GraphEvents(
{ onDoubleClickNode, onClickNode, onClickEdge, onClickStage, onRightClickNode, edgeReducer }: GraphEventProps,
{
onDoubleClickNode,
onClickNode,
onClickEdge,
onClickStage,
onRightClickNode,
edgeReducer,
showNodeLabels = true,
showEdgeLabels = true,
}: GraphEventProps,
ref
) {
const dispatch = useAppDispatch();
Expand Down Expand Up @@ -302,9 +313,9 @@ export const GraphEvents = forwardRef(function GraphEvents(
if (draggedNode) {
setSettings({ renderEdgeLabels: false });
} else {
setSettings({ renderEdgeLabels: true });
setSettings({ renderEdgeLabels: showEdgeLabels });
}
}, [draggedNode, setSettings]);
}, [draggedNode, setSettings, showEdgeLabels]);

useEffect(() => {
resetCamera(sigma);
Expand All @@ -321,5 +332,12 @@ export const GraphEvents = forwardRef(function GraphEvents(
}
}, [selectedNode]);

useEffect(() => {
setSettings({
renderLabels: showNodeLabels,
renderEdgeLabels: showEdgeLabels,
});
}, [setSettings, showNodeLabels, showEdgeLabels]);

return null;
});
9 changes: 8 additions & 1 deletion cmd/ui/src/components/SigmaChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ interface SigmaChartProps {
onClickStage: () => void;
edgeReducer: (edge: string, data: Attributes, graph: AbstractGraph) => Attributes;
handleContextMenu: (event: SigmaNodeEventPayload) => void;
showNodeLabels?: boolean;
showEdgeLabels?: boolean;
}

const SigmaChart = forwardRef(function SigmaChart(
Expand All @@ -52,6 +54,8 @@ const SigmaChart = forwardRef(function SigmaChart(
onClickStage,
edgeReducer,
handleContextMenu,
showNodeLabels = true,
showEdgeLabels = true,
}: Partial<SigmaChartProps>,
ref
) {
Expand Down Expand Up @@ -82,7 +86,8 @@ const SigmaChart = forwardRef(function SigmaChart(
self: SelfEdgeArrowProgram,
arrow: EdgeArrowProgram,
},
renderEdgeLabels: true,
renderEdgeLabels: showEdgeLabels,
renderLabels: showNodeLabels,
hoverRenderer: drawHover,
edgeLabelRenderer: drawEdgeLabel,
edgeLabelSize: 12,
Expand All @@ -100,6 +105,8 @@ const SigmaChart = forwardRef(function SigmaChart(
onClickStage={onClickStage}
edgeReducer={edgeReducer}
onRightClickNode={handleContextMenu}
showNodeLabels={showNodeLabels}
showEdgeLabels={showEdgeLabels}
ref={ref}
/>
</SigmaContainer>
Expand Down
23 changes: 23 additions & 0 deletions cmd/ui/src/views/Explore/GraphView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,10 @@ const GraphView: FC = () => {

const [columns, setColumns] = useState(columnsDefault);

const [showNodeLabels, setShowNodeLabels] = useState(true);

const [showEdgeLabels, setShowEdgeLabels] = useState(true);

useEffect(() => {
let items: any = graphState.chartProps.items;
if (!items) return;
Expand Down Expand Up @@ -221,6 +225,8 @@ const GraphView: FC = () => {
graph={graphologyGraph}
onClickNode={handleClickNode}
handleContextMenu={handleContextMenu}
showNodeLabels={showNodeLabels}
showEdgeLabels={showEdgeLabels}
ref={sigmaChartRef}
/>

Expand Down Expand Up @@ -271,6 +277,23 @@ const GraphView: FC = () => {
onSearchCurrentResults={() => {
toggleCurrentSearch();
}}
onToggleAllLabels={() => {
if (!showNodeLabels || !showEdgeLabels) {
setShowNodeLabels(true);
setShowEdgeLabels(true);
} else {
setShowNodeLabels(false);
setShowEdgeLabels(false);
}
}}
onToggleNodeLabels={() => {
setShowNodeLabels((prev) => !prev);
}}
onToggleEdgeLabels={() => {
setShowEdgeLabels((prev) => !prev);
}}
showNodeLabels={showNodeLabels}
showEdgeLabels={showEdgeLabels}
isCurrentSearchOpen={false}
/>
<Popper
Expand Down
4 changes: 2 additions & 2 deletions packages/javascript/bh-shared-ui/src/components/GraphButton/GraphButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

import { Button } from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import { FC } from 'react';
import { FC, ReactNode } from 'react';

const useStyles = makeStyles((theme) => ({
button: {
Expand All @@ -42,7 +42,7 @@ const useStyles = makeStyles((theme) => ({

export interface GraphButtonProps {
onClick: (e?: any) => void;
displayText: string | JSX.Element;
displayText: string | ReactNode;
disabled?: boolean;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/javascript/bh-shared-ui/src/components/GraphMenu/GraphMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { Menu } from '@mui/material';
import GraphButton from '../GraphButton';
import { Children, FC, ReactNode, useState } from 'react';

const GraphMenu: FC<{ label: string; children: ReactNode }> = ({ children, label }) => {
const GraphMenu: FC<{ label: ReactNode; children: ReactNode }> = ({ children, label }) => {
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);

const open = Boolean(anchorEl);
Expand Down

0 comments on commit 4465cf9

Please sign in to comment.