16340435677

Committed 17 Jul 2025 08:42AM UTC coverage: 52.615% (-1.5%) from 54.09%

Build # 16340435677

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #416 from DLR-SC/feature/fix-filters

Fix Filters

Run Details

473 of 607 branches covered (77.92%)

Branch coverage included in aggregate %.

0 of 153 new or added lines in 5 files covered. (0.0%)

194 existing lines in 7 files now uncovered.

4527 of 8896 relevant lines covered (50.89%)

10.59 hits per line

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

90.71

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

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

import React, {Dispatch, useState} from 'react';
import Box from '@mui/material/Box';
import useTheme from '@mui/material/styles/useTheme';
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;

  /** A description of the card's contents. */
  description?: JSX.Element;

  /** 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 reference 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 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}>;

  /** A function to hide/remove the card. */
  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;

  /** Boolean to determine if the card is draggable. */
  draggable: 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.
 */
export default function MainCard({
  id,
  label,
  description,
  compartmentValues,
  referenceValues,
  compartmentsExpanded,
  selectedCompartmentId,
  color,
  isSelected,
  isActive,
  minCompartmentsRows,
  setSelected,
  setActive,
  hide,
  maxCompartmentsRows,
  dragAttributes,
  dragListeners,
  isDragging,
  draggable,
  setActivatorNodeRef,
  localization = {
    formatNumber: (value: number) => value.toString(),
    customLang: 'global',
    overrides: {},
  },
  arrow = true,
}: MainCardProps) {
  const theme = useTheme();
  const [hover, setHover] = useState<boolean>(false);
  const [showDescription, setShowDescription] = useState<boolean>(false);

  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>
        {description && showDescription && isActive ? (
          description
        ) : (
          <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}
        draggable={draggable}
        setShowDescription={setShowDescription}
        showDescription={showDescription}
        setActivatorNodeRef={setActivatorNodeRef}
      />
    </Box>
  );
}

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

DLR-SC / ESID / 16340435677

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