Skip to content

Commit 767ec05

Browse files
denialhaagdenialhaag
committed
Format TypeScript files with prettier
1 parent b5f6304 commit 767ec05

15 files changed

+1142
-758
lines changed

‎.pre-commit-config.yaml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ repos:
5151
name: Disallow improper capitalization
5252
language: pygrep
5353
entry: Numpy|Github|PyTest|Mqt|Tum
54-
exclude: .pre-commit-config.yaml
54+
exclude: ^(.pre-commit-config.yaml|webpage/package-lock.json|.*.zip)
5555
priority: 0
5656

5757
## Check for spelling
@@ -109,7 +109,7 @@ repos:
109109
rev: v3.8.1
110110
hooks:
111111
- id: prettier
112-
types_or: [yaml, markdown, html, css, scss, javascript, json]
112+
types_or: [yaml, markdown, html, css, scss, javascript, json, ts, tsx]
113113
priority: 1
114114

115115
## Python linting using ruff

‎webpage/app/edgeCollector.tsx‎

Lines changed: 76 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,87 @@
1-
import React, { useState } from 'react';
2-
import Toggle from './toggle';
3-
import EdgeDisplay from './edgeDisplay';
1+
import React, { useState } from "react";
2+
import Toggle from "./toggle";
3+
import EdgeDisplay from "./edgeDisplay";
44

55
interface EdgeCollectorProps {
6-
title: string;
7-
cols?: number;
8-
allVertices: string[];
9-
onChange?: (edges: string[][]) => void;
6+
title: string;
7+
cols?: number;
8+
allVertices: string[];
9+
onChange?: (edges: string[][]) => void;
1010
}
1111

12-
const EdgeCollector: React.FC<EdgeCollectorProps> = ({ title, cols = 4, allVertices, onChange}) => {
13-
// Component logic goes here
14-
const [items, setItems] = useState<string[][]>([]);
12+
const EdgeCollector: React.FC<EdgeCollectorProps> = ({
13+
title,
14+
cols = 4,
15+
allVertices,
16+
onChange,
17+
}) => {
18+
// Component logic goes here
19+
const [items, setItems] = useState<string[][]>([]);
1520

16-
const itemAdded = (fromVertex: string, toVertex: string) => {
17-
if(fromVertex === "" || toVertex === "")
18-
return;
19-
if(items.some((item) => item[0] == fromVertex && item[1] == toVertex))
20-
return;
21-
const newItems = [...items];
22-
newItems.push([fromVertex, toVertex]);
23-
setItems(newItems);
24-
onChange?.(newItems);
25-
}
21+
const itemAdded = (fromVertex: string, toVertex: string) => {
22+
if (fromVertex === "" || toVertex === "") return;
23+
if (items.some((item) => item[0] == fromVertex && item[1] == toVertex))
24+
return;
25+
const newItems = [...items];
26+
newItems.push([fromVertex, toVertex]);
27+
setItems(newItems);
28+
onChange?.(newItems);
29+
};
2630

27-
const itemRemoved = (fromVertex: string, toVertex: string) => {
28-
const newItems = [...items];
29-
newItems.splice(newItems.findIndex((item) => item[0] == fromVertex && item[1] == toVertex), 1);
30-
setItems(newItems);
31-
onChange?.(newItems);
32-
}
31+
const itemRemoved = (fromVertex: string, toVertex: string) => {
32+
const newItems = [...items];
33+
newItems.splice(
34+
newItems.findIndex(
35+
(item) => item[0] == fromVertex && item[1] == toVertex,
36+
),
37+
1,
38+
);
39+
setItems(newItems);
40+
onChange?.(newItems);
41+
};
3342

34-
const fromRef = React.createRef<HTMLSelectElement>();
35-
const toRef = React.createRef<HTMLSelectElement>();
43+
const fromRef = React.createRef<HTMLSelectElement>();
44+
const toRef = React.createRef<HTMLSelectElement>();
3645

37-
return (
38-
// JSX markup goes here
39-
<div>
40-
<h1>{title}</h1>
41-
<div className='flex flex-row gap-4 mb-2'>
42-
<select ref={fromRef} className="border-2 rounded-sm p-1">
43-
{
44-
allVertices.map((vertex, index) => (
45-
<option key={index}>{vertex}</option>
46-
))
47-
}
48-
</select>
49-
<span className="pb-1 pt-1">➔</span>
50-
<select ref={toRef} className="border-2 rounded-sm p-1">
51-
{
52-
allVertices.map((vertex, index) => (
53-
<option key={index}>{vertex}</option>
54-
))
55-
}
56-
</select>
57-
<button className='border-2 rounded-sm bg-slate-100 p-1 hover:bg-slate-200 active:bg-slate-300'
58-
onClick={() => itemAdded(fromRef.current?.value ?? "", toRef.current?.value ?? "")}>Add</button>
59-
</div>
60-
<div className={`grid grid-cols-${cols} gap-4`}>
61-
{
62-
items.map((item, index) => (
63-
<EdgeDisplay
64-
onClick={(fromVertex, toVertex) => itemRemoved?.(fromVertex, toVertex)}
65-
fromVertex={item[0]}
66-
toVertex={item[1]}
67-
key={index}>
68-
</EdgeDisplay>
69-
))
70-
}
71-
</div>
72-
</div>
73-
);
46+
return (
47+
// JSX markup goes here
48+
<div>
49+
<h1>{title}</h1>
50+
<div className="flex flex-row gap-4 mb-2">
51+
<select ref={fromRef} className="border-2 rounded-sm p-1">
52+
{allVertices.map((vertex, index) => (
53+
<option key={index}>{vertex}</option>
54+
))}
55+
</select>
56+
<span className="pb-1 pt-1">➔</span>
57+
<select ref={toRef} className="border-2 rounded-sm p-1">
58+
{allVertices.map((vertex, index) => (
59+
<option key={index}>{vertex}</option>
60+
))}
61+
</select>
62+
<button
63+
className="border-2 rounded-sm bg-slate-100 p-1 hover:bg-slate-200 active:bg-slate-300"
64+
onClick={() =>
65+
itemAdded(fromRef.current?.value ?? "", toRef.current?.value ?? "")
66+
}
67+
>
68+
Add
69+
</button>
70+
</div>
71+
<div className={`grid grid-cols-${cols} gap-4`}>
72+
{items.map((item, index) => (
73+
<EdgeDisplay
74+
onClick={(fromVertex, toVertex) =>
75+
itemRemoved?.(fromVertex, toVertex)
76+
}
77+
fromVertex={item[0]}
78+
toVertex={item[1]}
79+
key={index}
80+
></EdgeDisplay>
81+
))}
82+
</div>
83+
</div>
84+
);
7485
};
7586

7687
export default EdgeCollector;

‎webpage/app/edgeDisplay.tsx‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,26 @@
1-
2-
import React from 'react';
1+
import React from "react";
32

43
interface EdgeDisplayProps {
5-
fromVertex: string;
6-
toVertex: string;
7-
onClick?: (fromVertex: string, toVertex: string) => void;
4+
fromVertex: string;
5+
toVertex: string;
6+
onClick?: (fromVertex: string, toVertex: string) => void;
87
}
98

10-
const EdgeDisplay: React.FC<EdgeDisplayProps> = ({ fromVertex, toVertex, onClick }) => {
11-
return (
12-
<div onClick={() => onClick?.(fromVertex, toVertex)} className={`text-center border-2 rounded-sm p-1 ${onClick !== undefined ? "cursor-pointer" : ""}`}>
13-
<span>{fromVertex}</span>
14-
<span className="ml-3 mr-3">➔</span>
15-
<span>{toVertex}</span>
16-
</div>
17-
);
9+
const EdgeDisplay: React.FC<EdgeDisplayProps> = ({
10+
fromVertex,
11+
toVertex,
12+
onClick,
13+
}) => {
14+
return (
15+
<div
16+
onClick={() => onClick?.(fromVertex, toVertex)}
17+
className={`text-center border-2 rounded-sm p-1 ${onClick !== undefined ? "cursor-pointer" : ""}`}
18+
>
19+
<span>{fromVertex}</span>
20+
<span className="ml-3 mr-3">➔</span>
21+
<span>{toVertex}</span>
22+
</div>
23+
);
1824
};
1925

2026
export default EdgeDisplay;

0 commit comments

Comments
 (0)