7459483902

Committed 09 Jan 2024 09:59AM CUT coverage: 95.485%. First build

Build # 7459483902

Build Type

Pull #98

github

Committed by

nevendyulgerov

Commit Message

feat: Add coveralls badge

Pull Request Pull Request #98: #97 Add build steps for generating and uploading test coverage

Run Details

344 of 421 branches covered (0.0%)

Branch coverage included in aggregate %.

4858 of 5027 relevant lines covered (96.64%)

14.43 hits per line

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

87.9

/apps/web/src/components/inputsTable.tsx

"use client";
import {
    Button,
    Loader,
    Table,
    Transition,
    useMantineColorScheme,
    useMantineTheme,
} from "@mantine/core";
import { FC, useCallback, useRef, useState } from "react";
import InputRow from "../components/inputRow";
import type { InputItemFragment } from "../graphql";
import { useElementVisibility } from "../hooks/useElementVisibility";
import { TableResponsiveWrapper } from "./tableResponsiveWrapper";

export interface InputsTableProps {
    inputs: InputItemFragment[];
    fetching: boolean;
    totalCount: number;
}

const InputsTable: FC<InputsTableProps> = ({
    inputs,
    fetching,
    totalCount,
}) => {
    const [timeType, setTimeType] = useState("age");
    const theme = useMantineTheme();
    const { colorScheme } = useMantineColorScheme();
    const bgColor = colorScheme === "dark" ? theme.colors.dark[7] : theme.white;
    const onChangeTimeColumnType = useCallback(() => {
        setTimeType((timeType) => (timeType === "age" ? "timestamp" : "age"));
    }, []);
    const tableRowRef = useRef<HTMLDivElement>(null);
    const { childrenRef, isVisible } = useElementVisibility({
        element: tableRowRef,
    });

    return (
        <TableResponsiveWrapper ref={tableRowRef}>
            <Table width={"100%"} style={{ borderCollapse: "collapse" }}>
                <Table.Thead>
                    <Table.Tr>
                        <Table.Th>From</Table.Th>
                        <Table.Th></Table.Th>
                        <Table.Th>To</Table.Th>
                        <Table.Th>Method</Table.Th>
                        <Table.Th>Index</Table.Th>
                        <Table.Th>
                            <Button
                                variant="transparent"
                                px={0}
                                onClick={onChangeTimeColumnType}
                            >
                                {timeType === "age" ? "Age" : "Timestamp (UTC)"}
                            </Button>
                        </Table.Th>
                        <Table.Th ref={childrenRef}>Data</Table.Th>
                        <Transition
                            mounted={isVisible}
                            transition="scale-x"
                            duration={500}
                            timingFunction="ease-out"
                        >
                            {(styles) => (
                                <th
                                    style={{
                                        ...styles,
                                        position: "sticky",
                                        top: 0,
                                        right: 0,
                                        backgroundColor: bgColor,
                                        padding:
                                            "var(--table-vertical-spacing) var(--table-horizontal-spacing, var(--mantine-spacing-lg))",
                                    }}
                                >
                                    Data
                                </th>
                            )}
                        </Transition>
                    </Table.Tr>
                </Table.Thead>
                <Table.Tbody>
                    {fetching ? (
                        <Table.Tr>
                            <Table.Td align="center" colSpan={7}>
                                <Loader data-testid="inputs-table-spinner" />
                            </Table.Td>
                        </Table.Tr>
                    ) : (
                        totalCount === 0 && (
                            <Table.Tr>
                                <Table.Td colSpan={3} align="center">
                                    No inputs
                                </Table.Td>
                            </Table.Tr>
                        )
                    )}
                    {inputs.map((input) => (
                        <InputRow
                            key={input.id}
                            input={input}
                            timeType={timeType}
                            keepDataColVisible={!isVisible}
                        />
                    ))}
                </Table.Tbody>
            </Table>
        </TableResponsiveWrapper>
    );
};

export default InputsTable;

1	"use client";	1✔
2	import {	1✔
3	Button,	1✔
4	Loader,	1✔
5	Table,	1✔
6	Transition,	1✔
7	useMantineColorScheme,	1✔
8	useMantineTheme,	1✔
9	} from "@mantine/core";	1✔
10	import { FC, useCallback, useRef, useState } from "react";	1✔
11	import InputRow from "../components/inputRow";	1✔
12	import type { InputItemFragment } from "../graphql";	1✔
13	import { useElementVisibility } from "../hooks/useElementVisibility";	1✔
14	import { TableResponsiveWrapper } from "./tableResponsiveWrapper";	1✔
15		1✔
16	export interface InputsTableProps {	1✔
17	inputs: InputItemFragment[];	1✔
18	fetching: boolean;	1✔
19	totalCount: number;	1✔
20	}	1✔
21		1✔
22	const InputsTable: FC<InputsTableProps> = ({	1✔
23	inputs,	7✔
24	fetching,	7✔
25	totalCount,	7✔
26	}) => {	7✔
27	const [timeType, setTimeType] = useState("age");	7✔
28	const theme = useMantineTheme();	7✔
29	const { colorScheme } = useMantineColorScheme();	7✔
30	const bgColor = colorScheme === "dark" ? theme.colors.dark[7] : theme.white;	7!
31	const onChangeTimeColumnType = useCallback(() => {	7✔
32	setTimeType((timeType) => (timeType === "age" ? "timestamp" : "age"));	1!
33	}, []);	7✔
34	const tableRowRef = useRef<HTMLDivElement>(null);	7✔
35	const { childrenRef, isVisible } = useElementVisibility({	7✔
36	element: tableRowRef,	7✔
37	});	7✔
38		7✔
39	return (	7✔
40	<TableResponsiveWrapper ref={tableRowRef}>	7✔
41	<Table width={"100%"} style={{ borderCollapse: "collapse" }}>	7✔
42	<Table.Thead>	7✔
43	<Table.Tr>	7✔
44	<Table.Th>From</Table.Th>	7✔
45	<Table.Th></Table.Th>	7✔
46	<Table.Th>To</Table.Th>	7✔
47	<Table.Th>Method</Table.Th>	7✔
48	<Table.Th>Index</Table.Th>	7✔
49	<Table.Th>	7✔
50	<Button	7✔
51	variant="transparent"	7✔
52	px={0}	7✔
53	onClick={onChangeTimeColumnType}	7✔
54	>	7✔
55	{timeType === "age" ? "Age" : "Timestamp (UTC)"}	7✔
56	</Button>	7✔
57	</Table.Th>	7✔
58	<Table.Th ref={childrenRef}>Data</Table.Th>	7✔
59	<Transition	7✔
60	mounted={isVisible}	7✔
61	transition="scale-x"	7✔
62	duration={500}	7✔
63	timingFunction="ease-out"	7✔
64	>	7✔
65	{(styles) => (	7✔
66	<th	×
67	style={{	×
68	...styles,	×
69	position: "sticky",	×
70	top: 0,	×
71	right: 0,	×
72	backgroundColor: bgColor,	×
73	padding:	×
74	"var(--table-vertical-spacing) var(--table-horizontal-spacing, var(--mantine-spacing-lg))",	×
75	}}	×
76	>	×
77	Data	×
78	</th>	×
79	)}	7✔
80	</Transition>	7✔
81	</Table.Tr>	7✔
82	</Table.Thead>	7✔
83	<Table.Tbody>	7✔
84	{fetching ? (	7✔
85	<Table.Tr>	1✔
86	<Table.Td align="center" colSpan={7}>	1✔
87	<Loader data-testid="inputs-table-spinner" />	1✔
88	</Table.Td>	1✔
89	</Table.Tr>	1✔
90	) : (	6✔
91	totalCount === 0 && (	6✔
92	<Table.Tr>	1✔
93	<Table.Td colSpan={3} align="center">	1✔
94	No inputs	1✔
95	</Table.Td>	1✔
96	</Table.Tr>	1✔
97	)	7✔
98	)}	7✔
99	{inputs.map((input) => (	7✔
100	<InputRow	6✔
101	key={input.id}	6✔
102	input={input}	6✔
103	timeType={timeType}	6✔
104	keepDataColVisible={!isVisible}	6✔
105	/>	6✔
106	))}	7✔
107	</Table.Tbody>	7✔
108	</Table>	7✔
109	</TableResponsiveWrapper>	7✔
110	);	7✔
111	};	7✔
112		1✔
113	export default InputsTable;	1✔

cartesi / rollups-explorer / 7459483902

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