Skip to content

Commit b054555

Browse files
WallemationsWallemations
authored
Fixes the experiscanner (#739)
1 parent f913e5e commit b054555

1 file changed

Lines changed: 136 additions & 110 deletions

File tree

tgui/packages/tgui/interfaces/ExperimentConfigure.jsx renamed to tgui/packages/tgui/interfaces/ExperimentConfigure.tsx

Lines changed: 136 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
import { sortBy } from 'common/collections';
21
import {
32
Box,
43
Button,
5-
Flex,
64
Icon,
75
LabeledList,
86
Section,
@@ -14,17 +12,44 @@ import {
1412
import { useBackend } from '../backend';
1513
import { Window } from '../layouts';
1614

17-
const ExperimentStages = (props) => {
15+
type Techweb = {
16+
all_servers: string[];
17+
ref: string;
18+
selected: number;
19+
web_id: string;
20+
web_org: string;
21+
};
22+
23+
type ExperimentData = {
24+
description: string;
25+
name: string;
26+
performance_hint: string;
27+
progress: Progress[];
28+
ref: string;
29+
selected: number;
30+
tag: string;
31+
};
32+
33+
type Progress = [string, string, number, number];
34+
35+
type Data = {
36+
always_active: boolean;
37+
experiments: ExperimentData[];
38+
has_start_callback: boolean;
39+
techwebs: Techweb[];
40+
};
41+
42+
function ExperimentStages(props) {
1843
return (
1944
<Table ml={2} className="ExperimentStage__Table">
2045
{props.children.map((stage, idx) => (
2146
<ExperimentStageRow key={idx} {...stage} />
2247
))}
2348
</Table>
2449
);
25-
};
50+
}
2651

27-
const ExperimentStageRow = (props) => {
52+
function ExperimentStageRow(props) {
2853
const [type, description, value, altValue] = props;
2954

3055
// Determine completion based on type of stage
@@ -62,35 +87,36 @@ const ExperimentStageRow = (props) => {
6287
</Table.Cell>
6388
</Table.Row>
6489
);
65-
};
90+
}
6691

67-
export const TechwebServer = (props) => {
68-
const { act, data } = useBackend();
92+
function TechwebServer(props) {
93+
const { act } = useBackend<Data>();
6994
const { techwebs } = props;
7095

7196
return techwebs.map((server, index) => (
7297
<Box key={index} m={1} className="ExperimentTechwebServer__Web">
73-
<Flex
98+
<Stack
7499
align="center"
75100
justify="space-between"
76101
className="ExperimentTechwebServer__WebHeader"
77102
>
78-
<Flex.Item className="ExperimentTechwebServer__WebName">
103+
<Stack.Item className="ExperimentTechwebServer__WebName">
79104
{server.web_id} / {server.web_org}
80-
</Flex.Item>
81-
<Flex.Item>
105+
</Stack.Item>
106+
<Stack.Item>
82107
<Button
83108
onClick={() =>
84109
server.selected
85110
? act('clear_server')
86111
: act('select_server', { ref: server.ref })
87112
}
88-
content={server.selected ? 'Disconnect' : 'Connect'}
89113
backgroundColor={server.selected ? 'good' : 'rgba(0, 0, 0, 0.4)'}
90114
className="ExperimentTechwebServer__ConnectButton"
91-
/>
92-
</Flex.Item>
93-
</Flex>
115+
>
116+
{server.selected ? 'Disconnect' : 'Connect'}
117+
</Button>
118+
</Stack.Item>
119+
</Stack>
94120
<Box className="ExperimentTechwebServer__WebContent">
95121
<span>
96122
Connectivity to this web is maintained by the following servers...
@@ -103,82 +129,10 @@ export const TechwebServer = (props) => {
103129
</Box>
104130
</Box>
105131
));
106-
};
107-
108-
export const ExperimentConfigure = (props) => {
109-
const { act, data } = useBackend();
110-
const { always_active, has_start_callback } = data;
111-
let techwebs = data.techwebs ?? [];
112-
113-
const experiments = sortBy(data.experiments ?? [], (exp) => exp.name);
114-
115-
// Group servers together by web
116-
let webs = new Map();
117-
techwebs.forEach((x) => {
118-
if (x.web_id !== null) {
119-
if (!webs.has(x.web_id)) {
120-
webs.set(x.web_id, []);
121-
}
122-
webs.get(x.web_id).push(x);
123-
}
124-
});
132+
}
125133

126-
return (
127-
<Window resizable width={600} height={735}>
128-
<Window.Content>
129-
<Flex direction="column" height="100%">
130-
<Flex.Item mb={1}>
131-
<Section title="Servers">
132-
<Box>
133-
{webs.size > 0
134-
? 'Please select a techweb to connect to...'
135-
: 'Found no servers connected to a techweb!'}
136-
</Box>
137-
{webs.size > 0 &&
138-
Array.from(webs, ([techweb, techwebs]) => (
139-
<TechwebServer key={techweb} techwebs={techwebs} />
140-
))}
141-
</Section>
142-
</Flex.Item>
143-
<Flex.Item mb={has_start_callback ? 1 : 0} grow={1}>
144-
{techwebs.some((e) => e.selected) && (
145-
<Stack.Item>
146-
<Section
147-
title="Experiments"
148-
className="ExperimentConfigure__ExperimentsContainer"
149-
fill
150-
>
151-
{/* <Box mb={1} color="label">
152-
{textContent}
153-
</Box> */}
154-
{experiments.map((exp, i) => (
155-
<Experiment key={i} exp={exp} />
156-
))}
157-
</Section>
158-
</Stack.Item>
159-
)}
160-
</Flex.Item>
161-
{!!has_start_callback && (
162-
<Flex.Item>
163-
<Button
164-
fluid
165-
className="ExperimentConfigure__PerformExperiment"
166-
onClick={() => act('start_experiment_callback')}
167-
disabled={!experiments.some((e) => e.selected)}
168-
icon="flask"
169-
>
170-
Perform Experiment
171-
</Button>
172-
</Flex.Item>
173-
)}
174-
</Flex>
175-
</Window.Content>
176-
</Window>
177-
);
178-
};
179-
180-
export const Experiment = (props) => {
181-
const { act, data } = useBackend();
134+
export function Experiment(props) {
135+
const { act } = useBackend<Data>();
182136
const { exp } = props;
183137
const { name, description, tag, selected, progress, performance_hint, ref } =
184138
exp;
@@ -195,28 +149,100 @@ export const Experiment = (props) => {
195149
backgroundColor={selected ? 'good' : '#40628a'}
196150
className="ExperimentConfigure__ExperimentName"
197151
>
198-
<Flex align="center" justify="space-between">
199-
<Flex.Item color={'white'}>{name}</Flex.Item>
200-
<Flex.Item color={'rgba(255, 255, 255, 0.5)'}>
201-
<Box className="ExperimentConfigure__TagContainer">
202-
<Stack>
203-
<Stack.Item>{tag}</Stack.Item>
204-
<Stack.Item>
205-
<Tooltip content={performance_hint} position="bottom-start">
206-
<Icon name="question-circle" mx={0.5} />
207-
<div className="ExperimentConfigure__PerformanceHint" />
208-
</Tooltip>
209-
</Stack.Item>
210-
</Stack>
211-
</Box>
212-
</Flex.Item>
213-
</Flex>
152+
<Stack>
153+
<Stack.Item>{name}</Stack.Item>
154+
<Stack.Item color="rgba(255, 255, 255, 0.5)">
155+
<div className="ExperimentConfigure__TagContainer">
156+
{tag}
157+
<Tooltip content={performance_hint} position="bottom-start">
158+
<Icon name="question-circle" mx={0.5} />
159+
<div className="ExperimentConfigure__PerformanceHint" />
160+
</Tooltip>
161+
</div>
162+
</Stack.Item>
163+
</Stack>
214164
</Button>
215-
<Box className={'ExperimentConfigure__ExperimentContent'}>
165+
<div className="ExperimentConfigure__ExperimentContent">
216166
<Box mb={1}>{description}</Box>
217167
{props.children}
218168
<ExperimentStages>{progress}</ExperimentStages>
219-
</Box>
169+
</div>
220170
</Box>
221171
);
222-
};
172+
}
173+
174+
export function ExperimentConfigure(props) {
175+
const { act, data } = useBackend<Data>();
176+
const { always_active, has_start_callback } = data;
177+
178+
let techwebs = data.techwebs ?? [];
179+
180+
const experiments = data.experiments.sort((a, b) =>
181+
a.name.localeCompare(b.name),
182+
);
183+
184+
// Group servers together by web
185+
let webs = new Map();
186+
for (const x of techwebs) {
187+
if (x.web_id !== null) {
188+
if (!webs.has(x.web_id)) {
189+
webs.set(x.web_id, []);
190+
}
191+
webs.get(x.web_id).push(x);
192+
}
193+
}
194+
195+
let textContent = '';
196+
if (experiments.length === 0) {
197+
textContent = 'No experiments found on this web';
198+
} else if (always_active) {
199+
textContent =
200+
'This device is configured to attempt to perform all available experiments, so no further configuration is necessary.';
201+
} else {
202+
textContent = 'Select one of the following experiments...';
203+
}
204+
205+
return (
206+
<Window width={600} height={735}>
207+
<Window.Content scrollable>
208+
<Section title="Servers">
209+
<Box color="label">
210+
{webs.size > 0
211+
? 'Please select a techweb to connect to...'
212+
: 'Found no servers connected to a techweb!'}
213+
</Box>
214+
{webs.size > 0 &&
215+
Array.from(webs, ([techweb, techwebs]) => (
216+
<TechwebServer key={techweb} techwebs={techwebs} />
217+
))}
218+
</Section>
219+
220+
{techwebs.some((e) => e.selected) && (
221+
<Section
222+
title="Experiments"
223+
className="ExperimentConfigure__ExperimentsContainer"
224+
>
225+
<Box mb={1} color="label">
226+
{textContent}
227+
</Box>
228+
{experiments.map((exp, i) => (
229+
<Experiment key={i} exp={exp} />
230+
))}
231+
</Section>
232+
)}
233+
234+
{!!has_start_callback && (
235+
<Button
236+
fluid
237+
className="ExperimentConfigure__PerformExperiment"
238+
onClick={() => act('start_experiment_callback')}
239+
disabled={!experiments.some((e) => e.selected)}
240+
icon="flask"
241+
>
242+
Perform Experiment
243+
</Button>
244+
)}
245+
</Window.Content>
246+
</Window>
247+
);
248+
}

0 commit comments

Comments
 (0)