cyberpresidentvanellope/Bubberstation
1
0
Fork 0
mirror of https://github.com/Bubberstation/Bubberstation.git synced 2026-08-26 06:29:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

[MIRROR] Fix lag when viewing ore silo long logs list (#26491)

Browse Source 
* Fix lag when viewing ore silo long logs list (#81232)

![6OrHcTlN6Z](https://github.com/tgstation/tgstation/assets/137328283/89ed9091-e85b-4032-bae1-19200d5ad10d)

## About The Pull Request

- Logs tab is now using a virtual list that renders only visible
components, thus preventing lag when logs list grows too long. More
about it
[here](https://github.com/tgstation/tgstation/pull/81016#issuecomment-1921765723).
- Minor tweaks to Ore Silo UI to account for new backend changes and TG
style guide.

## Changelog

🆑
fix: Separated logs list into pages in ore silo UI, thus fixing lag when
logs list grows too long.
/🆑

* Fix lag when viewing ore silo long logs list

---------

Co-authored-by: Interception&? <137328283+intercepti0n@users.noreply.github.com>
This commit is contained in:
SkyratBot
2024-02-12 19:05:46 -05:00
committed by GitHub
co-authored by Interception&?
parent 122d1612bf
commit 4a0653bf54
2 changed files with 69 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
code/modules/mining/machine_silo.dm
+3 -3
View File
@@ -136,8 +136,8 @@
"icon" = icon2base64(icon(initial(parent.icon), initial(parent.icon_state), frame = 1)),
"name" = parent.name,
"onHold" = !!holds[remote],
"location" = get_area_name(parent, TRUE)
)
"location" = get_area_name(parent, TRUE),
)
)
data["logs"] = list()
@@ -150,7 +150,7 @@
"action" = entry.action,
"amount" = entry.amount,
"time" = entry.timestamp,
"noun" = entry.noun
"noun" = entry.noun,
)
)
tgui/packages/tgui/interfaces/OreSilo.tsx
+66 -34
View File
@@ -13,6 +13,7 @@ import {
Stack,
Tabs,
Tooltip,
VirtualList,
} from '../components';
import { Window } from '../layouts';
import { MaterialAccessBar } from './Fabrication/MaterialAccessBar';
@@ -35,7 +36,12 @@ type Log = {
noun: string;
};
type OreSiloData = {
enum Tab {
Machines,
Logs,
}
type Data = {
SHEET_MATERIAL_AMOUNT: number;
materials: Material[];
machines: Machine[];
@@ -43,10 +49,10 @@ type OreSiloData = {
};
export const OreSilo = (props: any) => {
const { act, data } = useBackend<OreSiloData>();
const { act, data } = useBackend<Data>();
const { SHEET_MATERIAL_AMOUNT, machines, logs } = data;
const [currentTab, setCurrentTab] = useState(0);
const [currentTab, setCurrentTab] = useState<Tab>(Tab.Logs);
return (
<Window title="Ore Silo" width={620} height={600}>
@@ -56,48 +62,29 @@ export const OreSilo = (props: any) => {
<Tabs fluid>
<Tabs.Tab
icon="plug"
selected={currentTab === 0}
onClick={() => setCurrentTab(0)}
selected={currentTab === Tab.Machines}
onClick={() => setCurrentTab(Tab.Machines)}
>
Connections
</Tabs.Tab>
<Tabs.Tab
icon="book-bookmark"
selected={currentTab === 1}
onClick={() => setCurrentTab(1)}
selected={currentTab === Tab.Logs}
onClick={() => setCurrentTab(Tab.Logs)}
>
Logs
</Tabs.Tab>
</Tabs>
</Stack.Item>
<Stack.Item grow>
{currentTab === 0 ? (
!!machines && machines.length > 0 ? (
<Section fill scrollable>
{machines.map((machine, index) => (
<MachineDisplay
key={index}
machine={machine}
onPause={() => act('hold', { id: index + 1 })}
onRemove={() => act('remove', { id: index + 1 })}
/>
))}
</Section>
) : (
<NoticeBox>No machines connected!</NoticeBox>
)
) : null}
{currentTab === 1 ? (
!!logs && logs.length > 0 ? (
<Box pr={1} height="100%" overflowY="scroll">
{logs.map((log, index) => (
<LogEntry key={index} log={log} />
))}
</Box>
) : (
<NoticeBox>No log entries currently present!</NoticeBox>
)
{currentTab === Tab.Machines ? (
<MachineList
machines={machines!}
onPause={(index) => act('hold', { id: index })}
onRemove={(index) => act('remove', { id: index })}
/>
) : null}
{currentTab === Tab.Logs ? <LogsList logs={logs!} /> : null}
</Stack.Item>
<Stack.Item>
<Section fill>
@@ -116,6 +103,31 @@ export const OreSilo = (props: any) => {
);
};
type MachineListProps = {
machines: Machine[];
onPause: (index: number) => void;
onRemove: (index: number) => void;
};
const MachineList = (props: MachineListProps) => {
const { machines, onPause, onRemove } = props;
return machines.length > 0 ? (
<Section fill scrollable>
{machines.map((machine, index) => (
<MachineDisplay
key={index}
machine={machine}
onPause={() => onPause(index + 1)}
onRemove={() => onRemove(index + 1)}
/>
))}
</Section>
) : (
<NoticeBox>No machines connected!</NoticeBox>
);
};
type MachineProps = {
machine: Machine;
onPause: () => void;
@@ -130,7 +142,7 @@ const MachineDisplay = (props: MachineProps) => {
if (index >= 0) {
machineName = machineName.substring(0, index);
}
machineName = `${machineName.trimEnd()}(${machine.location})`;
machineName = `${machineName.trimEnd()} (${machine.location})`;
return (
<Box className="FabricatorRecipe">
@@ -190,6 +202,26 @@ const MachineDisplay = (props: MachineProps) => {
);
};
type LogsListProps = {
logs: Log[];
};
const LogsList = (props: LogsListProps) => {
const { logs } = props;
return logs.length > 0 ? (
<Box pr={1} height="100%" overflowY="scroll">
<VirtualList>
{logs.map((log, index) => (
<LogEntry key={index} log={log} />
))}
</VirtualList>
</Box>
) : (
<NoticeBox>No log entries currently present!</NoticeBox>
);
};
type LogProps = {
log: Log;
};