15257190808

Committed 26 May 2025 03:08PM UTC coverage: 51.267% (-0.9%) from 52.215%

Build # 15257190808

Build Type

push

github

Committed by

kunkoala

Commit Message

:wrench: enhance drag and drop functionalities

- Added `isDragging` prop to `DataCard`, `CardTooltip`, and `MainCard` components to manage drag state.
- Updated tooltip visibility logic to show when dragging or hovering.
- Adjusted cursor style during dragging for better user experience.

Run Details

397 of 504 branches covered (78.77%)

Branch coverage included in aggregate %.

8 of 8 new or added lines in 3 files covered. (100.0%)

119 existing lines in 12 files now uncovered.

3771 of 7626 relevant lines covered (49.45%)

4.72 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

91.6

/src/components/ScenarioComponents/CardsComponents/MainCard/MainCard.tsx

// SPDX-FileCopyrightText: 2024 German Aerospace Center (DLR)
// SPDX-License-Identifier: Apache-2.0

import React, {Dispatch} from 'react';
import {Box, useTheme} from '@mui/material';
import CardTitle from './CardTitle';
import CardTooltip from './CardTooltip';
import CardRows from './CardRows';
import {Localization} from 'types/localization';
import {hexToRGB} from 'util/util';
import type {SyntheticListenerMap} from '@dnd-kit/core/dist/hooks/utilities';
import type {DraggableAttributes} from '@dnd-kit/core';

interface MainCardProps {
  /** A unique identifier for the card. */
  id: string;

  /** The title of the card. */
  label: string;

  /** The color of the card. */
  color: string;

  /** A dictionary of compartment values associated with the card. */
  compartmentValues: Record<string, number | null> | null;

  /** A dictionary of start values used for calculating the rate. This determines whether the values have increased, decreased, or remained the same. */
  referenceValues: Record<string, number> | null;

  /** A boolean indicating whether the compartments are expanded. */
  compartmentsExpanded: boolean;

  /** The compartment that is currently selected. */
  selectedCompartmentId: string | null;

  /** A boolean indicating whether the user is hovering over the card. */
  hover: boolean;

  /** A function to set the hover state of the card. */
  setHover: Dispatch<boolean>;

  /** A boolean indicating whether the scenario is selected. */
  isSelected: boolean;

  /** A function to set the selected scenario. */
  setSelected: Dispatch<{id: string; state: boolean}>;

  /** A boolean indicating whether the scenario is active. */
  isActive: boolean;

  /** A function to set the active scenario. */
  setActive: Dispatch<{id: string; state: boolean}>;

  hide: Dispatch<string>;

  /** The minimum number of compartment rows. */
  minCompartmentsRows: number;

  /** The maximum number of compartment rows. */
  maxCompartmentsRows: number;

  /** The drag attributes of the card. */
  dragAttributes: DraggableAttributes;

  /** The drag listeners of the card. */
  dragListeners: SyntheticListenerMap | undefined;

  /** A boolean indicating whether the card is being dragged. */
  isDragging: boolean;

  /** The activator node ref of the card. */
  setActivatorNodeRef: (element: HTMLElement | null) => void;

  /** An object containing localization information (translation & number formattation).*/
  localization?: Localization;

  /** Boolean to determine if the arrow is displayed */
  arrow?: boolean;
}

/**
 * This component renders a card for either the case data or the scenario cards. Each card contains a title,
 * a list of compartment values, and change rates relative to the simulation start. Additionally, a tooltip is used to set whether the card is active or not.
 * Furthermore, the card is clickable, and if clicked, it will become the selected scenario.
 */
function MainCard({
  id,
  label,
  hover,
  compartmentValues,
  referenceValues,
  setHover,
  compartmentsExpanded,
  selectedCompartmentId,
  color,
  isSelected,
  isActive,
  minCompartmentsRows,
  setSelected,
  setActive,
  hide,
  maxCompartmentsRows,
  dragAttributes,
  dragListeners,
  isDragging,
  setActivatorNodeRef,
  localization = {
    formatNumber: (value: number) => value.toString(),
    customLang: 'global',
    overrides: {},
  },
  arrow = true,
}: MainCardProps) {
  const theme = useTheme();
  return (
    <Box
      id={`main-card-external-container-${id}`}
      sx={{
        display: 'flex',
        flexDirection: 'column',
        backgroundColor: ((hover || isSelected) && isActive) || hover ? hexToRGB(color, 0.4) : null,
        zIndex: 3,
        boxShadow: ((hover || isSelected) && isActive) || hover ? `0 0 0 6px ${hexToRGB(color, 0.4)}` : null,
        borderRadius: ((hover || isSelected) && isActive) || hover ? 1 : null,
        borderColor: color,
      }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={() => {
        if (isActive) {
          setSelected({id, state: true});
        } else {
          setActive({id, state: true});
          setSelected({id, state: true});
        }
      }}
    >
      <Box
        id={`main-card-title&compartments-container-${id}`}
        className='hide-scrollbar'
        sx={{
          maxHeight: compartmentsExpanded
            ? maxCompartmentsRows > 5
              ? `${(340 / 6) * maxCompartmentsRows}px`
              : `${(480 / 6) * maxCompartmentsRows}px`
            : 'auto',
          paddingBottom: '9px',
          boxSizing: 'border-box',
          width: '200px',
          bgcolor: theme.palette.background.paper,
          zIndex: 0,
          display: 'flex',
          flexDirection: 'column',
          border: 2,
          borderRadius: 1,
          borderColor: color,
          transition: 'transform 0.5s',
          transformStyle: 'preserve-3d',
          transform: isActive ? 'none' : 'rotateY(180deg)',
        }}
      >
        <Box
          id={`main-card-title-container-${id}`}
          sx={{
            display: 'flex',
            height: '65px',
            alignItems: 'self-end',
            justifyContent: 'left',
            width: 'full',
            transform: isActive ? 'none' : 'rotateY(180deg)',
          }}
        >
          <CardTitle label={label} color={color} />
        </Box>
        <CardRows
          compartmentValues={compartmentValues}
          referenceValues={referenceValues}
          isFlipped={isActive}
          compartmentExpanded={compartmentsExpanded}
          selectedCompartmentId={selectedCompartmentId}
          color={color}
          minCompartmentsRows={minCompartmentsRows}
          maxCompartmentsRows={maxCompartmentsRows}
          localization={localization}
          arrow={arrow}
        />
      </Box>
      <CardTooltip
        hover={hover}
        color={color}
        id={id}
        isActive={isActive}
        setActive={setActive}
        hide={hide}
        setSelected={setSelected}
        localization={localization}
        dragAttributes={dragAttributes}
        dragListeners={dragListeners}
        isDragging={isDragging}
        setActivatorNodeRef={setActivatorNodeRef}
      />
    </Box>
  );
}

export default MainCard;

1	// SPDX-FileCopyrightText: 2024 German Aerospace Center (DLR)
2	// SPDX-License-Identifier: Apache-2.0
3
4	import React, {Dispatch} from 'react';
5	import {Box, useTheme} from '@mui/material';	1✔
6	import CardTitle from './CardTitle';	1✔
7	import CardTooltip from './CardTooltip';	1✔
8	import CardRows from './CardRows';	1✔
9	import {Localization} from 'types/localization';
10	import {hexToRGB} from 'util/util';	1✔
11	import type {SyntheticListenerMap} from '@dnd-kit/core/dist/hooks/utilities';
12	import type {DraggableAttributes} from '@dnd-kit/core';
13
14	interface MainCardProps {
15	/** A unique identifier for the card. */
16	id: string;
17
18	/** The title of the card. */
19	label: string;
20
21	/** The color of the card. */
22	color: string;
23
24	/** A dictionary of compartment values associated with the card. */
25	compartmentValues: Record<string, number \| null> \| null;
26
27	/** A dictionary of start values used for calculating the rate. This determines whether the values have increased, decreased, or remained the same. */
28	referenceValues: Record<string, number> \| null;
29
30	/** A boolean indicating whether the compartments are expanded. */
31	compartmentsExpanded: boolean;
32
33	/** The compartment that is currently selected. */
34	selectedCompartmentId: string \| null;
35
36	/** A boolean indicating whether the user is hovering over the card. */
37	hover: boolean;
38
39	/** A function to set the hover state of the card. */
40	setHover: Dispatch<boolean>;
41
42	/** A boolean indicating whether the scenario is selected. */
43	isSelected: boolean;
44
45	/** A function to set the selected scenario. */
46	setSelected: Dispatch<{id: string; state: boolean}>;
47
48	/** A boolean indicating whether the scenario is active. */
49	isActive: boolean;
50
51	/** A function to set the active scenario. */
52	setActive: Dispatch<{id: string; state: boolean}>;
53
54	hide: Dispatch<string>;
55
56	/** The minimum number of compartment rows. */
57	minCompartmentsRows: number;
58
59	/** The maximum number of compartment rows. */
60	maxCompartmentsRows: number;
61
62	/** The drag attributes of the card. */
63	dragAttributes: DraggableAttributes;
64
65	/** The drag listeners of the card. */
66	dragListeners: SyntheticListenerMap \| undefined;
67
68	/** A boolean indicating whether the card is being dragged. */
69	isDragging: boolean;
70
71	/** The activator node ref of the card. */
72	setActivatorNodeRef: (element: HTMLElement \| null) => void;
73
74	/** An object containing localization information (translation & number formattation).*/
75	localization?: Localization;
76
77	/** Boolean to determine if the arrow is displayed */
78	arrow?: boolean;
79	}
80
81	/**
82	* This component renders a card for either the case data or the scenario cards. Each card contains a title,
83	* a list of compartment values, and change rates relative to the simulation start. Additionally, a tooltip is used to set whether the card is active or not.
84	* Furthermore, the card is clickable, and if clicked, it will become the selected scenario.
85	*/
86	function MainCard({	27✔
87	id,	27✔
88	label,	27✔
89	hover,	27✔
90	compartmentValues,	27✔
91	referenceValues,	27✔
92	setHover,	27✔
93	compartmentsExpanded,	27✔
94	selectedCompartmentId,	27✔
95	color,	27✔
96	isSelected,	27✔
97	isActive,	27✔
98	minCompartmentsRows,	27✔
99	setSelected,	27✔
100	setActive,	27✔
101	hide,	27✔
102	maxCompartmentsRows,	27✔
103	dragAttributes,	27✔
104	dragListeners,	27✔
105	isDragging,	27✔
106	setActivatorNodeRef,	27✔
107	localization = {	27✔
108	formatNumber: (value: number) => value.toString(),	27✔
109	customLang: 'global',	27✔
110	overrides: {},	27✔
111	},	27✔
112	arrow = true,	27✔
113	}: MainCardProps) {	27✔
114	const theme = useTheme();	27✔
115	return (	27✔
116	<Box	27✔
117	id={`main-card-external-container-${id}`}	27✔
118	sx={{	27✔
119	display: 'flex',	27✔
120	flexDirection: 'column',	27✔
121	backgroundColor: ((hover \|\| isSelected) && isActive) \|\| hover ? hexToRGB(color, 0.4) : null,	27✔
122	zIndex: 3,	27✔
123	boxShadow: ((hover \|\| isSelected) && isActive) \|\| hover ? `0 0 0 6px ${hexToRGB(color, 0.4)}` : null,	27✔
124	borderRadius: ((hover \|\| isSelected) && isActive) \|\| hover ? 1 : null,	27✔
125	borderColor: color,	27✔
126	}}	27✔
127	onMouseEnter={() => setHover(true)}	27✔
128	onMouseLeave={() => setHover(false)}	27✔
129	onClick={() => {	27✔
130	if (isActive) {	×
UNCOV 131	setSelected({id, state: true});	×
132	} else {	×
UNCOV 133	setActive({id, state: true});	×
UNCOV 134	setSelected({id, state: true});	×
UNCOV 135	}	×
UNCOV 136	}}	×
137	>
138	<Box	27✔
139	id={`main-card-title&compartments-container-${id}`}	27✔
140	className='hide-scrollbar'	27✔
141	sx={{	27✔
142	maxHeight: compartmentsExpanded	27✔
143	? maxCompartmentsRows > 5	27!
UNCOV 144	? `${(340 / 6) * maxCompartmentsRows}px`	×
145	: `${(480 / 6) * maxCompartmentsRows}px`	27!
UNCOV 146	: 'auto',	×
147	paddingBottom: '9px',	27✔
148	boxSizing: 'border-box',	27✔
149	width: '200px',	27✔
150	bgcolor: theme.palette.background.paper,	27✔
151	zIndex: 0,	27✔
152	display: 'flex',	27✔
153	flexDirection: 'column',	27✔
154	border: 2,	27✔
155	borderRadius: 1,	27✔
156	borderColor: color,	27✔
157	transition: 'transform 0.5s',	27✔
158	transformStyle: 'preserve-3d',	27✔
159	transform: isActive ? 'none' : 'rotateY(180deg)',	27✔
160	}}	27✔
161	>
162	<Box	27✔
163	id={`main-card-title-container-${id}`}	27✔
164	sx={{	27✔
165	display: 'flex',	27✔
166	height: '65px',	27✔
167	alignItems: 'self-end',	27✔
168	justifyContent: 'left',	27✔
169	width: 'full',	27✔
170	transform: isActive ? 'none' : 'rotateY(180deg)',	27✔
171	}}	27✔
172	>
173	<CardTitle label={label} color={color} />	27✔
174	</Box>	27✔
175	<CardRows	27✔
176	compartmentValues={compartmentValues}	27✔
177	referenceValues={referenceValues}	27✔
178	isFlipped={isActive}	27✔
179	compartmentExpanded={compartmentsExpanded}	27✔
180	selectedCompartmentId={selectedCompartmentId}	27✔
181	color={color}	27✔
182	minCompartmentsRows={minCompartmentsRows}	27✔
183	maxCompartmentsRows={maxCompartmentsRows}	27✔
184	localization={localization}	27✔
185	arrow={arrow}	27✔
186	/>	27✔
187	</Box>	27✔
188	<CardTooltip	27✔
189	hover={hover}	27✔
190	color={color}	27✔
191	id={id}	27✔
192	isActive={isActive}	27✔
193	setActive={setActive}	27✔
194	hide={hide}	27✔
195	setSelected={setSelected}	27✔
196	localization={localization}	27✔
197	dragAttributes={dragAttributes}	27✔
198	dragListeners={dragListeners}	27✔
199	isDragging={isDragging}	27✔
200	setActivatorNodeRef={setActivatorNodeRef}	27✔
201	/>	27✔
202	</Box>	27✔
203	);
204	}	27✔
205
206	export default MainCard;	1✔

DLR-SC / ESID / 15257190808

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous