Skip to content

add tooltips #3806

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

Open
souissimai wants to merge 5 commits into
base: main
Choose a base branch
from
Open

add tooltips #3806

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ce328aa
add tooltips
Mar 12, 2026
3ec7d0d
Merge branch 'main' into tooltips-network-modif-panel
Mathieu-Deharbe Mar 18, 2026
51624db
Merge branch 'main' into tooltips-network-modif-panel
sBouzols Mar 23, 2026
6da2332
suggestions from code review
Mathieu-Deharbe Mar 26, 2026
331e804
span to remove warning
Mathieu-Deharbe Mar 26, 2026
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
2 changes: 1 addition & 1 deletion src/components/graph/menus/network-modifications/network-modification-node-editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1284,7 +1284,7 @@ const NetworkModificationNodeEditor = () => {
</IconButton>
</span>
</Tooltip>
<Tooltip title={<FormattedMessage id={'delete'} />}>
<Tooltip title={<FormattedMessage id={'moveToTrash'} />}>
<span>
<IconButton
onClick={doStashModification}
Expand Down
19 changes: 15 additions & 4 deletions ...nents/graph/menus/network-modifications/network-modification-table/columns-definition.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/

import React, { SetStateAction } from 'react';
import { Badge, Box } from '@mui/material';
import { Badge, Box, Tooltip } from '@mui/material';
import { NetworkModificationMetadata } from '@gridsuite/commons-ui';
import { ColumnDef } from '@tanstack/react-table';
import DragHandleCell from './renderers/drag-handle-cell';
Expand All @@ -23,6 +23,7 @@ import { RemoveRedEye as RemoveRedEyeIcon } from '@mui/icons-material';
import SelectCell from './renderers/select-cell';
import SelectHeaderCell from './renderers/select-header-cell';
import { createRootNetworkChipCellSx, styles } from './styles';
import { FormattedMessage } from 'react-intl';

const CHIP_PADDING_PX = 24;
const CHAR_WIDTH_PX = 8;
Expand Down Expand Up @@ -135,6 +136,7 @@ export const createRootNetworksColumns = (
): ColumnDef<NetworkModificationMetadata>[] => {
const tagMinSizes = rootNetworks.map((rootNetwork) => computeTagMinSize(rootNetwork.tag ?? ''));
const sharedSize = Math.max(Math.min(...tagMinSizes), 56);
const currentRootNetworkTag = rootNetworks.find((item) => item.rootNetworkUuid === currentRootNetworkUuid)?.tag;

return rootNetworks.map((rootNetwork, index) => {
const rootNetworkUuid = rootNetwork.rootNetworkUuid;
Expand All @@ -146,9 +148,18 @@ export const createRootNetworksColumns = (
header: () =>
isCurrentRootNetwork && modificationsCount >= 1 ? (
<Box sx={styles.rootNetworkHeader}>
<Badge overlap="circular" color="primary" variant="dot">
<RemoveRedEyeIcon />
</Badge>
<Tooltip
title={
<FormattedMessage
id={'visualizedRootNetwork'}
values={{ tag: currentRootNetworkTag }}
/>
}
>
<Badge overlap="circular" color="primary" variant="dot">
<RemoveRedEyeIcon />
</Badge>
</Tooltip>
</Box>
) : null,
cell: ({ row }) => (
Expand Down
19 changes: 11 additions & 8 deletions ...aph/menus/network-modifications/network-modification-table/renderers/description-cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { useIsAnyNodeBuilding } from '../../../../../utils/is-any-node-building-
import { createEditDescriptionStyle } from '../styles';
import { setModificationMetadata } from '../../../../../../services/study/network-modifications';
import { AppState } from '../../../../../../redux/reducer.type';
import { FormattedMessage } from 'react-intl';

const DescriptionCell: FunctionComponent<{ data: NetworkModificationMetadata }> = (props) => {
const { data } = props;
Expand Down Expand Up @@ -59,14 +60,16 @@ const DescriptionCell: FunctionComponent<{ data: NetworkModificationMetadata }>
updateElement={updateModification}
/>
)}
<Tooltip title={description} arrow placement="right">
<IconButton
onClick={handleModifyDescription}
disabled={isLoading || isAnyNodeBuilding || mapDataLoading}
sx={createEditDescriptionStyle(data.description)}
>
<EditNoteIcon empty={empty} />
</IconButton>
<Tooltip title={description ?? <FormattedMessage id={'addDescription'} />} arrow placement="right">
<span>
<IconButton
onClick={handleModifyDescription}
disabled={isLoading || isAnyNodeBuilding || mapDataLoading}
sx={createEditDescriptionStyle(data.description)}
>
<EditNoteIcon empty={empty} />
</IconButton>
</span>
</Tooltip>
</>
);
Expand Down
5 changes: 4 additions & 1 deletion ...ts/graph/menus/network-modifications/network-modification-table/renderers/switch-cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,10 @@ const SwitchCell: FunctionComponent<SwitchCellRendererProps> = (props) => {
}, [modificationUuid, updateModification, setModifications]);

return (
<Tooltip title={<FormattedMessage id={modificationActivated ? 'disable' : 'enable'} />} arrow>
<Tooltip
title={<FormattedMessage id={modificationActivated ? 'deactivateModification' : 'activateModification'} />}
arrow
>
<span>
<Switch
size="small"
Expand Down
72 changes: 59 additions & 13 deletions ...nts/graph/menus/network-modifications/network-modification-table/row/modification-row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,12 @@
import React, { memo, useCallback } from 'react';
import { flexRender, Row } from '@tanstack/react-table';
import { mergeSx, NetworkModificationMetadata } from '@gridsuite/commons-ui';
import { TableCell, TableRow } from '@mui/material';
import { TableCell, TableRow, Tooltip } from '@mui/material';
import { createCellStyle, createRowSx, styles } from '../styles';
import { Draggable, DraggableProvided, DraggableStateSnapshot } from '@hello-pangea/dnd';
import { VirtualItem } from '@tanstack/react-virtual';
import { AUTO_EXTENSIBLE_COLUMNS, BASE_MODIFICATION_TABLE_COLUMNS } from '../columns-definition';
import { FormattedMessage } from 'react-intl';

interface ModificationRowProps {
virtualRow: VirtualItem;
Expand Down Expand Up @@ -46,18 +47,63 @@ const ModificationRow = memo<ModificationRowProps>(
data-row-id={row.original.uuid}
sx={mergeSx(styles.tableRow, createRowSx(isHighlighted, snapshot.isDragging, virtualRow))}
>
{row.getVisibleCells().map((cell) => (
<TableCell
key={cell.id}
sx={createCellStyle(cell, AUTO_EXTENSIBLE_COLUMNS.includes(cell.column.id))}
onClick={() => handleCellClickCallback(cell.column.id)}
{...(cell.column.id === BASE_MODIFICATION_TABLE_COLUMNS.DRAG_HANDLE.id
? provided.dragHandleProps
: undefined)}
>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))}
{row.getVisibleCells().map((cell) => {
const isDragHandle = cell.column.id === BASE_MODIFICATION_TABLE_COLUMNS.DRAG_HANDLE.id;
const isCheckboxColumn = cell.column.id === BASE_MODIFICATION_TABLE_COLUMNS.SELECT.id;
const cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());
// Tooltip for drag
if (isDragHandle) {
return (
<TableCell
key={cell.id}
sx={createCellStyle(cell, AUTO_EXTENSIBLE_COLUMNS.includes(cell.column.id))}
>
<Tooltip title={<FormattedMessage id={'moveModification'} />} arrow>
<span {...provided.dragHandleProps}>{cellContent}</span>
</Tooltip>
</TableCell>
);
}

// Tooltip for checkbox
if (isCheckboxColumn) {
return (
<TableCell
key={cell.id}
sx={createCellStyle(cell, AUTO_EXTENSIBLE_COLUMNS.includes(cell.column.id))}
onClick={() => handleCellClickCallback(cell.column.id)}
>
<Tooltip
title={
<FormattedMessage
id={
row.getIsSelected()
? 'deselectModification'
: 'selectModification'
}
/>
}
arrow
>
<span>{cellContent}</span>
</Tooltip>
</TableCell>
);
}

return (
<TableCell
key={cell.id}
sx={createCellStyle(cell, AUTO_EXTENSIBLE_COLUMNS.includes(cell.column.id))}
onClick={() => handleCellClickCallback(cell.column.id)}
{...(cell.column.id === BASE_MODIFICATION_TABLE_COLUMNS.DRAG_HANDLE.id
? provided.dragHandleProps
: undefined)}
Comment on lines +99 to +101
Copy link
Contributor

@Mathieu-Deharbe Mathieu-Deharbe Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you handle this case in the previous if (isDragHandle) {, what is the point of this ?

Copy link
Contributor

@sBouzols sBouzols Mar 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

then we remove all onClick prop usage ?

Copy link
Contributor

@Mathieu-Deharbe Mathieu-Deharbe Mar 26, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No I only talks about :

 {...(cell.column.id === BASE_MODIFICATION_TABLE_COLUMNS.DRAG_HANDLE.id
                                            ? provided.dragHandleProps
                                            : undefined)}

The specific case when
cell.column.id === BASE_MODIFICATION_TABLE_COLUMNS.DRAG_HANDLE.id
is already handled in the previous if (isDragHandle) { which then returns :

 <TableCell
                                            key={cell.id}
                                            sx={createCellStyle(cell, AUTO_EXTENSIBLE_COLUMNS.includes(cell.column.id))}
                                        >
                                            <Tooltip title={<FormattedMessage id={'moveModification'} />} arrow>
                                                <span {...provided.dragHandleProps}>{cellContent}</span>
                                            </Tooltip>
                                        </TableCell>

Therefore I think that case will never happen and this if can be removed. But onClick remains and should work all the same.

>
{cellContent}
</TableCell>
);
})}
</TableRow>
);
}}
Expand Down
16 changes: 11 additions & 5 deletions src/translations/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,7 @@

"button.delete": "Delete",
"button.continue": "Continue",
"filter": "Filter",
"enable": "Enable",
"disable": "Disable",
"filter": "Filter",

"deleteStudy": "Delete Study",
"studyNameDidNotMatchMsg": "The given study name did not match with ",
Expand Down Expand Up @@ -1751,5 +1749,13 @@
"Reload": "Reload",
"CopyError": "Copy Error",
"Copied": "Copied",
"downloadNetworkModifications" : "Download modifications"
}
"downloadNetworkModifications" : "Download modifications",
"moveToTrash": "Move to trash",
"visualizedRootNetwork": "Visualized root network : {tag}",
"addDescription" : "Add description",
"activateModification" : "Activate network modification",
"deactivateModification" : "Deactivate network modification",
"deselectModification": "Deselect modification",
"selectModification": "Select modification",
"moveModification": "Move modification"
}
16 changes: 11 additions & 5 deletions src/translations/fr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,7 @@

"button.delete": "Supprimer",
"button.continue": "Continuer",
"filter": "Filtre",
"enable": "Activer",
"disable": "Désactiver",
"filter": "Filtre",

"deleteStudy": "Supprimer l'étude",
"studyNameDidNotMatchMsg": "Le nom d'étude donné ne correspond pas à ",
Expand Down Expand Up @@ -1744,5 +1742,13 @@
"Reload": "Recharger",
"CopyError": "Copier l'erreur",
"Copied": "Copiée",
"downloadNetworkModifications" : "Télécharger les modifications"
}
"downloadNetworkModifications" : "Télécharger les modifications",
"moveToTrash": "Mettre à la corbeille",
"visualizedRootNetwork": "Réseau racine visualisé : {tag}",
"addDescription" : "Ajouter une description",
"activateModification" : "Activer la modification réseau",
"deactivateModification" : "Désactiver la modification réseau",
"deselectModification": "Désélectionner la modification" ,
"selectModification": "Sélectionner la modification",
"moveModification": "Déplacer la modification"
}
Loading