Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

tgui: deferred lazy list rendering for very large lists #80743

Merged
merged 6 commits into from
Jan 7, 2024

Conversation

scriptis
Copy link
Contributor

@scriptis scriptis commented Jan 3, 2024

About The Pull Request

This PR adds a component <LazyList/> <VirtualList /> that defers rendering its children until they scroll into view. In cases where you have very long lists (air alarms with dozens of scrubbers/vents, the r&d console techweb view, or the all recipes view on techfabs), this significantly increases the load speed of those interfaces on first open, and prevents hangs (and, in some cases with especially stupid atmos setups, crashes).

There's still a bit of tidying up here, but any other pointers would be nice. I opted for a setInterval over binding to scroll, mousewheel, and resize, because it seems that IE isn't too good at handling those. I also need to do some more fiddling with the techfab anchors. Otherwise, for the moment, this vastly improves the UI load performance of air alarms and techfabs, and the R&D console.

Why It's Good For The Game

open UI faster

Changelog

🆑
refactor: some very large tgui lists (air alarms, all recipes techfab view, techweb view) are loaded on-demand as you scroll, making them not lag so hard
/:cl:

@tgstation-server tgstation-server added Refactor Makes the code harder to read UI We make the game less playable, but with round edges labels Jan 3, 2024
@Mothblocks
Copy link
Member

these are called virtualized lists, i would rename it to that

@scriptis
Copy link
Contributor Author

scriptis commented Jan 3, 2024

virtual lists typically unload elements as they exit view along with loading new ones--this only does forward loading and doesn't unload anything, but ok

@scriptis scriptis marked this pull request as ready for review January 3, 2024 02:08
@scriptis scriptis requested a review from stylemistake as a code owner January 3, 2024 02:08
@scriptis
Copy link
Contributor Author

scriptis commented Jan 3, 2024

fastest r&d console load in the west

@jlsnow301 jlsnow301 merged commit 61c863a into tgstation:master Jan 7, 2024
20 checks passed
github-actions bot added a commit that referenced this pull request Jan 7, 2024
comfyorange added a commit that referenced this pull request Jan 7, 2024
Jolly-66 pushed a commit to TaleStation/TaleStation that referenced this pull request Jan 9, 2024
…ge lists (#9357)

Original PR: tgstation/tgstation#80743
-----
## About The Pull Request

This PR adds a component ~~`<LazyList/>`~~ `<VirtualList />` that defers
rendering its children until they scroll into view. In cases where you
have very long lists (air alarms with dozens of scrubbers/vents, the r&d
console techweb view, or the all recipes view on techfabs), this
**significantly** increases the load speed of those interfaces on first
open, and prevents hangs (and, in some cases with especially stupid
atmos setups, crashes).

There's still a bit of tidying up here, but any other pointers would be
nice. I opted for a `setInterval` over binding to `scroll`,
`mousewheel`, and `resize`, because it seems that IE isn't too good at
handling those. I also need to do some more fiddling with the techfab
anchors. Otherwise, for the moment, this vastly improves the UI load
performance of air alarms and techfabs, and the R&D console.

## Why It's Good For The Game

open UI faster
## Changelog
:cl:
refactor: some very large tgui lists (air alarms, all recipes techfab
view, techweb view) are loaded on-demand as you scroll, making them not
lag so hard
/:cl:

---------

Co-authored-by: scriptis <me@scriptis.net>
github-merge-queue bot pushed a commit to cmss13-devs/cmss13 that referenced this pull request May 19, 2024
# About the pull request

This PR is a follow up to #5493 and ultimately is aimed at bringing us
back into parity with TG's version of the TGUI components again. For the
most part this PR is done via diffing TG's TGUI folder with ours. The
PRs listed below are what I found in blames and I double checked to see
what files if any they affected outside the TGUI folder.

**It is recommended to close VSC and run bin/clean.cmd and then
bin/build.cmd if you try out this branch**. You will be using the wrong
node & prettier version otherwise.

This at least partially ports these PRs (and likely many others - but
these I explicitly checked for how they affected other files):
- tgstation/tgstation#67935
- tgstation/tgstation#74638
- tgstation/tgstation#75029
- tgstation/tgstation#75431
- tgstation/tgstation#75463
- tgstation/tgstation#75534
- tgstation/tgstation#78879
- tgstation/tgstation#79322
- tgstation/tgstation#79895
- tgstation/tgstation#79898
- tgstation/tgstation#79974
- tgstation/tgstation#79991
- tgstation/tgstation#80044
- tgstation/tgstation#80057
- tgstation/tgstation#80189
- tgstation/tgstation#80304
- tgstation/tgstation#80430
- tgstation/tgstation#80453
- tgstation/tgstation#80454
- tgstation/tgstation#80920
- tgstation/tgstation#81354
- tgstation/tgstation#81381
- tgstation/tgstation#81495
- tgstation/tgstation#82334
- tgstation/tgstation#82377
- tgstation/tgstation#82385
- tgstation/tgstation#82417
- tgstation/tgstation#82420
- tgstation/tgstation#82527
- tgstation/tgstation#82571
- tgstation/tgstation#82792
- tgstation/tgstation#82854
- tgstation/tgstation#83098
- tgstation/tgstation#83096
- tgstation/tgstation#83218

Additionally it ports the new base components from: 
- tgstation/tgstation#71531
- tgstation/tgstation#71847
- tgstation/tgstation#74544
- tgstation/tgstation#74704 (just a fix to
above)
- tgstation/tgstation#80743
- tgstation/tgstation#82181 (just a fix to
above)
- tgstation/tgstation#82533
- tgstation/tgstation#83179 (just a fix to
above)

But these are missing documentation in the components readme, and we do
not have any interface that utilizes them yet. I wanted to explicitly
mention them separately so people can see what they can do.

Changes I still intend to do in this PR or investigate:
- [X] Fix Button.Confirm not properly handling clicks (Sort of stumped
on this atm)
- [X] Fix Relay Viewer buttons not always updating
- [X] Port TGSay 1.1 & TextArea changes
(tgstation/tgstation#75431)
- [X] Fix ByondUI in Drop pod panel
- [X] Check parity with TG again and port anything else that may have
been done during the creation of this PR
- [X] Find a way to prevent TGSay passthrough when hotkeying InputList
(and maybe others)? tgstation/tgstation#75463

Other notable changes not directly related to the above ports, but done
as I was fixing other problems:
- Strip panel is now larger with sprites at 64x64 instead of 48 because
as an Image component now they didn't alias the same.
- VOX panel's second tab now doesn't overlap the other buttons
- Wiring panel from #1623 is
now restored to use circular indicators again instead of the regression
to ColorBox in #2641
- Smart fridge interface is more in line with sorted inventories as far
as layout & tooltips
- Tacmap drawing interface is tweaked a little to deal with the changes
to dropdowns + clicking the tab is now disabled again until the tacmap
is ready (It needs minimap subsystem to fire to have icons when
flattening the map to be up to date)
- Fixes runtimes when quickly switching between tgsay categories
- Basically reverts #5651 in
favor of how TG ended up solving it via
tgstation/tgstation#81495
- Rolls back SWC to the version TG is currently using because of
#6196 (comment)
- Adds these commands from
tgstation/tgstation#81381 though I also have it
check jsx files that somereason TG doesn't do (needs to have been built
once to function - just run build.bat):

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/ed107278-93ee-4a2a-bbf2-b38e60417099)
- Chat: Adds a clear chat button clearing the current tab, mute button
to disable unread notifications for a tab, and updates the word
highlight regex for case sensitivity. I left out one of the Cyrillic
fixes since we shouldn't normally be handling Cyrillic anyways.
- Ship manipulator window can now replace any existing shuttle and
generally is polished up more than it was.
- Ports TGSay 1.1 though I discarded basically all the layout changes
they did.
- TGUI modals can now accept a ui_state in case you want an alert for
say a mob that might qdel while it is open.
- Finishes porting the reservation changes to shuttles.dm from
tgstation/tgstation#73261 that some reason were
absent from #5165
- Fixes F5 refreshing a window if default is prevented (e.g. when the
hotkey interface is waiting for a key press).
- All depreciated useLocalState is now removed. In almost all situations
I could useState, but a few things for MFD on CAS I needed to use
sharedState.

# Explain why it's good for the game
Prepares us for 516 (though still more changes will be necessary) and
finalizes the react port.

# Testing Photographs and Procedure
<details>
<summary>Screenshots & Videos</summary>

New list modal w/ duplicate key handling:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/b84e2db6-4e42-42d3-9b6d-4ae418f63c60)

Fixed VOX panel (sound files used to overlap type select):

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/a3cde1ea-1816-4187-b7a4-040803e52d4e)

Updated shuttle manipulator window:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/f978c2e2-9174-4635-9da7-6d2768f9fbff)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/607a0b91-5c64-4ca0-9256-d981c7073fb9)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/9b69cfb2-d4c2-4caf-846d-1d32f965cff0)

With replace any shuttle support: 

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/ace7f58a-0991-4147-b13f-d2be2d012b21)

Erase current tab chat history:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/9554ccfe-43da-4eee-b9ae-ad5cbec0523b)

Working case sensitivity highlights: 

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/182971ac-a0f2-42de-ad41-fa12991d760c)

Unread counter toggle per tab:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/9de5b9ae-5cb2-4905-9592-556e9cf45ad2)

Larger strip panel:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/2229c7d4-935a-427e-9699-942acae1cfbf)

Tacmap panel polish (button positioning + dropdown text color when
highlighted):

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/dcdf86fa-ba48-4d6f-bd42-bb8f3c1dd2bf)

Minor tweak to camera panel:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/930d64b8-1c36-4cc4-a24d-900d57c642b0)

Dropdowns will now display above if too little space below: 

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/3f4916d9-f020-489d-8494-277bde9cd741)

Kitchen sink works again (F12 w/ tgui-dev):

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/aa3bd2c7-b320-4158-ae8f-cea4896f0a9c)

Layout mode works again (F11 w/ tgui-dev):

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/cb683cd2-e62b-4cdf-bb38-10e7e1902030)

New checkbox modal (with theme support):

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/ddc2da93-8987-44f2-be3f-1c2694d9489e)

![checkbox](https://github.com/cmss13-devs/cmss13/assets/76988376/6a6ddab9-25b6-47cb-b833-295b3b7bf6c2)

New handling for button sizes in alert modals (stacked list since
options wanted to use more horizontal space than limit):

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/976a2a86-c1c6-421a-bb7a-80f20cc8f22d)

Polished smart fridge + restore wiring panel:
![smart
fridge](https://github.com/cmss13-devs/cmss13/assets/76988376/5524132f-c657-45d2-a7bc-aa09e00eb45b)

Fixed byondui in supply pod menu:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/18555668-34fe-4aa7-83aa-c1045bc54dd0)

TG Say:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/cc66a143-22ba-4f90-865a-0c00e7dd8bfa)

Some unchanged panels (to just show working):

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/adb8e0cb-64a4-45c4-9bac-1cecc6791667)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/d330bd51-995b-48f4-8f18-5aedd0e2adaf)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/cb5edc05-949d-4564-9548-f255971bb0f8)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/0559cd17-8b5e-4585-8152-d8ac67a82f35)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/31bf0233-dd05-408c-b2c6-5ebee9b2381c)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/314fdec8-cc5c-4815-9ca9-b85422880a29)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/36bf1d5e-91fd-4cb0-8ce5-07ce4746902f)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/b63ee6aa-e80c-4928-9295-05d0e6314a16)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/9b93df2e-a92d-4eeb-a5d4-07018c848c54)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/7b45ba04-30c7-405c-90c2-d52ca99d7890)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/f3ae0b6d-ca77-4dd8-bfc7-8616018211d1)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/9aa28a52-e86d-4bb0-be23-a9ee1b39d97c)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/8108494f-9ce9-44dd-b94b-5306c9ef7e09)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/996b5dd3-89fa-4d19-bebc-de52774de23b)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/2bccace6-2a68-4f8f-ada6-c231aab836f9)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/8362f2ff-b38f-4682-a5c7-b26934e5972e)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/8584e849-8d8d-4ff2-9ff8-932749ea6da5)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/813b21e2-9705-4b5f-8710-e452384c56d9)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/dcd933c5-65bd-41a2-b8c9-e1dcba446231)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/1d81b490-168c-4f88-9d88-099f768cd665)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/1dbe39d6-08fc-4734-bdf6-afc71fef6e6f)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/f7fc5461-5138-4427-ab1a-89627baefb4b)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/032cc12c-802e-4d0a-b8d3-568a48f7d469)

![dropship](https://github.com/cmss13-devs/cmss13/assets/76988376/c85a4ed3-b4a9-4c44-a34b-1990f7ac7d31)

</details>

# Changelog
:cl: Drathek, mullenpaul
ui: Finalizes the TGUI React port and brings us back into parity again
with TG's interface components
ui: Strip panel is now larger with sprites at 64x64 instead of 48
because as an Image component now they didn't alias the same.
ui: VOX panel's second tab now doesn't overlap the other buttons
ui: Wiring panel for some machines is now restored to use circular
indicators again
ui: Smart fridge interface is more in line with sorted inventories as
far as layout & tooltips
ui: Tacmap drawing interface is tweaked a little to deal with the
changes to dropdowns + clicking the tab is now disabled again until the
tacmap is ready (It needs minimap subsystem to fire to have icons when
flattening the map to be up to date)
ui: Reworks RestrictedInput number handling
ui: Adds the DMIcon, VirtualList (deferred lazy list), Dialogue,
MenuBar, StyleableSection, and Checkbox TGUI components (but nothing
uses them yet)
ui: Chat: Adds a clear chat button clearing the current tab, mute button
to disable unread notifications for a tab, and updates the word
highlight regex for case sensitivity
ui: Updates the ship manipulator window to allow replacing any Shuttle
ui: Fixes the supply pod panel not displaying its byondui map correctly
ui: Fixes the research terminal duplicating papers in display old mode.
ui: Updates the tgui_input_list to for new features like hotkey
selection, duplicate key handling, etc
fix: Fixes thinking runtimes when quickly switching between tgsay
categories
code: Shuttle subsystem now is less aggressive with reservations
(skipping deletion if below a threshold, delaying reservation if above a
threshold)
fix: Fixes F5 key still refreshing a TGUI window even if default was set
to be prevented (e.g. Hotkey interface)
/:cl:

---------

Co-authored-by: Jerm <jlsnow301@pm.me>
github-merge-queue bot pushed a commit to cmss13-devs/cmss13 that referenced this pull request May 19, 2024
# About the pull request

This PR is a follow up to #5493 and ultimately is aimed at bringing us
back into parity with TG's version of the TGUI components again. For the
most part this PR is done via diffing TG's TGUI folder with ours. The
PRs listed below are what I found in blames and I double checked to see
what files if any they affected outside the TGUI folder.

**It is recommended to close VSC and run bin/clean.cmd and then
bin/build.cmd if you try out this branch**. You will be using the wrong
node & prettier version otherwise.

This at least partially ports these PRs (and likely many others - but
these I explicitly checked for how they affected other files):
- tgstation/tgstation#67935
- tgstation/tgstation#74638
- tgstation/tgstation#75029
- tgstation/tgstation#75431
- tgstation/tgstation#75463
- tgstation/tgstation#75534
- tgstation/tgstation#78879
- tgstation/tgstation#79322
- tgstation/tgstation#79895
- tgstation/tgstation#79898
- tgstation/tgstation#79974
- tgstation/tgstation#79991
- tgstation/tgstation#80044
- tgstation/tgstation#80057
- tgstation/tgstation#80189
- tgstation/tgstation#80304
- tgstation/tgstation#80430
- tgstation/tgstation#80453
- tgstation/tgstation#80454
- tgstation/tgstation#80920
- tgstation/tgstation#81354
- tgstation/tgstation#81381
- tgstation/tgstation#81495
- tgstation/tgstation#82334
- tgstation/tgstation#82377
- tgstation/tgstation#82385
- tgstation/tgstation#82417
- tgstation/tgstation#82420
- tgstation/tgstation#82527
- tgstation/tgstation#82571
- tgstation/tgstation#82792
- tgstation/tgstation#82854
- tgstation/tgstation#83098
- tgstation/tgstation#83096
- tgstation/tgstation#83218

Additionally it ports the new base components from: 
- tgstation/tgstation#71531
- tgstation/tgstation#71847
- tgstation/tgstation#74544
- tgstation/tgstation#74704 (just a fix to
above)
- tgstation/tgstation#80743
- tgstation/tgstation#82181 (just a fix to
above)
- tgstation/tgstation#82533
- tgstation/tgstation#83179 (just a fix to
above)

But these are missing documentation in the components readme, and we do
not have any interface that utilizes them yet. I wanted to explicitly
mention them separately so people can see what they can do.

Changes I still intend to do in this PR or investigate:
- [X] Fix Button.Confirm not properly handling clicks (Sort of stumped
on this atm)
- [X] Fix Relay Viewer buttons not always updating
- [X] Port TGSay 1.1 & TextArea changes
(tgstation/tgstation#75431)
- [X] Fix ByondUI in Drop pod panel
- [X] Check parity with TG again and port anything else that may have
been done during the creation of this PR
- [X] Find a way to prevent TGSay passthrough when hotkeying InputList
(and maybe others)? tgstation/tgstation#75463

Other notable changes not directly related to the above ports, but done
as I was fixing other problems:
- Strip panel is now larger with sprites at 64x64 instead of 48 because
as an Image component now they didn't alias the same.
- VOX panel's second tab now doesn't overlap the other buttons
- Wiring panel from #1623 is
now restored to use circular indicators again instead of the regression
to ColorBox in #2641
- Smart fridge interface is more in line with sorted inventories as far
as layout & tooltips
- Tacmap drawing interface is tweaked a little to deal with the changes
to dropdowns + clicking the tab is now disabled again until the tacmap
is ready (It needs minimap subsystem to fire to have icons when
flattening the map to be up to date)
- Fixes runtimes when quickly switching between tgsay categories
- Basically reverts #5651 in
favor of how TG ended up solving it via
tgstation/tgstation#81495
- Rolls back SWC to the version TG is currently using because of
#6196 (comment)
- Adds these commands from
tgstation/tgstation#81381 though I also have it
check jsx files that somereason TG doesn't do (needs to have been built
once to function - just run build.bat):

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/ed107278-93ee-4a2a-bbf2-b38e60417099)
- Chat: Adds a clear chat button clearing the current tab, mute button
to disable unread notifications for a tab, and updates the word
highlight regex for case sensitivity. I left out one of the Cyrillic
fixes since we shouldn't normally be handling Cyrillic anyways.
- Ship manipulator window can now replace any existing shuttle and
generally is polished up more than it was.
- Ports TGSay 1.1 though I discarded basically all the layout changes
they did.
- TGUI modals can now accept a ui_state in case you want an alert for
say a mob that might qdel while it is open.
- Finishes porting the reservation changes to shuttles.dm from
tgstation/tgstation#73261 that some reason were
absent from #5165
- Fixes F5 refreshing a window if default is prevented (e.g. when the
hotkey interface is waiting for a key press).
- All depreciated useLocalState is now removed. In almost all situations
I could useState, but a few things for MFD on CAS I needed to use
sharedState.

# Explain why it's good for the game
Prepares us for 516 (though still more changes will be necessary) and
finalizes the react port.

# Testing Photographs and Procedure
<details>
<summary>Screenshots & Videos</summary>

New list modal w/ duplicate key handling:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/b84e2db6-4e42-42d3-9b6d-4ae418f63c60)

Fixed VOX panel (sound files used to overlap type select):

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/a3cde1ea-1816-4187-b7a4-040803e52d4e)

Updated shuttle manipulator window:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/f978c2e2-9174-4635-9da7-6d2768f9fbff)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/607a0b91-5c64-4ca0-9256-d981c7073fb9)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/9b69cfb2-d4c2-4caf-846d-1d32f965cff0)

With replace any shuttle support: 

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/ace7f58a-0991-4147-b13f-d2be2d012b21)

Erase current tab chat history:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/9554ccfe-43da-4eee-b9ae-ad5cbec0523b)

Working case sensitivity highlights: 

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/182971ac-a0f2-42de-ad41-fa12991d760c)

Unread counter toggle per tab:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/9de5b9ae-5cb2-4905-9592-556e9cf45ad2)

Larger strip panel:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/2229c7d4-935a-427e-9699-942acae1cfbf)

Tacmap panel polish (button positioning + dropdown text color when
highlighted):

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/dcdf86fa-ba48-4d6f-bd42-bb8f3c1dd2bf)

Minor tweak to camera panel:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/930d64b8-1c36-4cc4-a24d-900d57c642b0)

Dropdowns will now display above if too little space below: 

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/3f4916d9-f020-489d-8494-277bde9cd741)

Kitchen sink works again (F12 w/ tgui-dev):

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/aa3bd2c7-b320-4158-ae8f-cea4896f0a9c)

Layout mode works again (F11 w/ tgui-dev):

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/cb683cd2-e62b-4cdf-bb38-10e7e1902030)

New checkbox modal (with theme support):

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/ddc2da93-8987-44f2-be3f-1c2694d9489e)

![checkbox](https://github.com/cmss13-devs/cmss13/assets/76988376/6a6ddab9-25b6-47cb-b833-295b3b7bf6c2)

New handling for button sizes in alert modals (stacked list since
options wanted to use more horizontal space than limit):

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/976a2a86-c1c6-421a-bb7a-80f20cc8f22d)

Polished smart fridge + restore wiring panel:
![smart
fridge](https://github.com/cmss13-devs/cmss13/assets/76988376/5524132f-c657-45d2-a7bc-aa09e00eb45b)

Fixed byondui in supply pod menu:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/18555668-34fe-4aa7-83aa-c1045bc54dd0)

TG Say:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/cc66a143-22ba-4f90-865a-0c00e7dd8bfa)

Some unchanged panels (to just show working):

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/adb8e0cb-64a4-45c4-9bac-1cecc6791667)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/d330bd51-995b-48f4-8f18-5aedd0e2adaf)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/cb5edc05-949d-4564-9548-f255971bb0f8)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/0559cd17-8b5e-4585-8152-d8ac67a82f35)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/31bf0233-dd05-408c-b2c6-5ebee9b2381c)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/314fdec8-cc5c-4815-9ca9-b85422880a29)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/36bf1d5e-91fd-4cb0-8ce5-07ce4746902f)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/b63ee6aa-e80c-4928-9295-05d0e6314a16)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/9b93df2e-a92d-4eeb-a5d4-07018c848c54)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/7b45ba04-30c7-405c-90c2-d52ca99d7890)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/f3ae0b6d-ca77-4dd8-bfc7-8616018211d1)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/9aa28a52-e86d-4bb0-be23-a9ee1b39d97c)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/8108494f-9ce9-44dd-b94b-5306c9ef7e09)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/996b5dd3-89fa-4d19-bebc-de52774de23b)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/2bccace6-2a68-4f8f-ada6-c231aab836f9)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/8362f2ff-b38f-4682-a5c7-b26934e5972e)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/8584e849-8d8d-4ff2-9ff8-932749ea6da5)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/813b21e2-9705-4b5f-8710-e452384c56d9)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/dcd933c5-65bd-41a2-b8c9-e1dcba446231)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/1d81b490-168c-4f88-9d88-099f768cd665)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/1dbe39d6-08fc-4734-bdf6-afc71fef6e6f)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/f7fc5461-5138-4427-ab1a-89627baefb4b)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/032cc12c-802e-4d0a-b8d3-568a48f7d469)

![dropship](https://github.com/cmss13-devs/cmss13/assets/76988376/c85a4ed3-b4a9-4c44-a34b-1990f7ac7d31)

</details>

# Changelog
:cl: Drathek, mullenpaul
ui: Finalizes the TGUI React port and brings us back into parity again
with TG's interface components
ui: Strip panel is now larger with sprites at 64x64 instead of 48
because as an Image component now they didn't alias the same.
ui: VOX panel's second tab now doesn't overlap the other buttons
ui: Wiring panel for some machines is now restored to use circular
indicators again
ui: Smart fridge interface is more in line with sorted inventories as
far as layout & tooltips
ui: Tacmap drawing interface is tweaked a little to deal with the
changes to dropdowns + clicking the tab is now disabled again until the
tacmap is ready (It needs minimap subsystem to fire to have icons when
flattening the map to be up to date)
ui: Reworks RestrictedInput number handling
ui: Adds the DMIcon, VirtualList (deferred lazy list), Dialogue,
MenuBar, StyleableSection, and Checkbox TGUI components (but nothing
uses them yet)
ui: Chat: Adds a clear chat button clearing the current tab, mute button
to disable unread notifications for a tab, and updates the word
highlight regex for case sensitivity
ui: Updates the ship manipulator window to allow replacing any Shuttle
ui: Fixes the supply pod panel not displaying its byondui map correctly
ui: Fixes the research terminal duplicating papers in display old mode.
ui: Updates the tgui_input_list to for new features like hotkey
selection, duplicate key handling, etc
fix: Fixes thinking runtimes when quickly switching between tgsay
categories
code: Shuttle subsystem now is less aggressive with reservations
(skipping deletion if below a threshold, delaying reservation if above a
threshold)
fix: Fixes F5 key still refreshing a TGUI window even if default was set
to be prevented (e.g. Hotkey interface)
/:cl:

---------

Co-authored-by: Jerm <jlsnow301@pm.me>
Doubleumc pushed a commit to Doubleumc/PvE-CMSS13 that referenced this pull request Jul 25, 2024
This PR is a follow up to #5493 and ultimately is aimed at bringing us
back into parity with TG's version of the TGUI components again. For the
most part this PR is done via diffing TG's TGUI folder with ours. The
PRs listed below are what I found in blames and I double checked to see
what files if any they affected outside the TGUI folder.

**It is recommended to close VSC and run bin/clean.cmd and then
bin/build.cmd if you try out this branch**. You will be using the wrong
node & prettier version otherwise.

This at least partially ports these PRs (and likely many others - but
these I explicitly checked for how they affected other files):
- tgstation/tgstation#67935
- tgstation/tgstation#74638
- tgstation/tgstation#75029
- tgstation/tgstation#75431
- tgstation/tgstation#75463
- tgstation/tgstation#75534
- tgstation/tgstation#78879
- tgstation/tgstation#79322
- tgstation/tgstation#79895
- tgstation/tgstation#79898
- tgstation/tgstation#79974
- tgstation/tgstation#79991
- tgstation/tgstation#80044
- tgstation/tgstation#80057
- tgstation/tgstation#80189
- tgstation/tgstation#80304
- tgstation/tgstation#80430
- tgstation/tgstation#80453
- tgstation/tgstation#80454
- tgstation/tgstation#80920
- tgstation/tgstation#81354
- tgstation/tgstation#81381
- tgstation/tgstation#81495
- tgstation/tgstation#82334
- tgstation/tgstation#82377
- tgstation/tgstation#82385
- tgstation/tgstation#82417
- tgstation/tgstation#82420
- tgstation/tgstation#82527
- tgstation/tgstation#82571
- tgstation/tgstation#82792
- tgstation/tgstation#82854
- tgstation/tgstation#83098
- tgstation/tgstation#83096
- tgstation/tgstation#83218

Additionally it ports the new base components from:
- tgstation/tgstation#71531
- tgstation/tgstation#71847
- tgstation/tgstation#74544
- tgstation/tgstation#74704 (just a fix to
above)
- tgstation/tgstation#80743
- tgstation/tgstation#82181 (just a fix to
above)
- tgstation/tgstation#82533
- tgstation/tgstation#83179 (just a fix to
above)

But these are missing documentation in the components readme, and we do
not have any interface that utilizes them yet. I wanted to explicitly
mention them separately so people can see what they can do.

Changes I still intend to do in this PR or investigate:
- [X] Fix Button.Confirm not properly handling clicks (Sort of stumped
on this atm)
- [X] Fix Relay Viewer buttons not always updating
- [X] Port TGSay 1.1 & TextArea changes
(tgstation/tgstation#75431)
- [X] Fix ByondUI in Drop pod panel
- [X] Check parity with TG again and port anything else that may have
been done during the creation of this PR
- [X] Find a way to prevent TGSay passthrough when hotkeying InputList
(and maybe others)? tgstation/tgstation#75463

Other notable changes not directly related to the above ports, but done
as I was fixing other problems:
- Strip panel is now larger with sprites at 64x64 instead of 48 because
as an Image component now they didn't alias the same.
- VOX panel's second tab now doesn't overlap the other buttons
- Wiring panel from cmss13-devs/cmss13#1623 is
now restored to use circular indicators again instead of the regression
to ColorBox in cmss13-devs/cmss13#2641
- Smart fridge interface is more in line with sorted inventories as far
as layout & tooltips
- Tacmap drawing interface is tweaked a little to deal with the changes
to dropdowns + clicking the tab is now disabled again until the tacmap
is ready (It needs minimap subsystem to fire to have icons when
flattening the map to be up to date)
- Fixes runtimes when quickly switching between tgsay categories
- Basically reverts cmss13-devs/cmss13#5651 in
favor of how TG ended up solving it via
tgstation/tgstation#81495
- Rolls back SWC to the version TG is currently using because of
cmss13-devs/cmss13#6196 (comment)
- Adds these commands from
tgstation/tgstation#81381 though I also have it
check jsx files that somereason TG doesn't do (needs to have been built
once to function - just run build.bat):

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/ed107278-93ee-4a2a-bbf2-b38e60417099)
- Chat: Adds a clear chat button clearing the current tab, mute button
to disable unread notifications for a tab, and updates the word
highlight regex for case sensitivity. I left out one of the Cyrillic
fixes since we shouldn't normally be handling Cyrillic anyways.
- Ship manipulator window can now replace any existing shuttle and
generally is polished up more than it was.
- Ports TGSay 1.1 though I discarded basically all the layout changes
they did.
- TGUI modals can now accept a ui_state in case you want an alert for
say a mob that might qdel while it is open.
- Finishes porting the reservation changes to shuttles.dm from
tgstation/tgstation#73261 that some reason were
absent from cmss13-devs/cmss13#5165
- Fixes F5 refreshing a window if default is prevented (e.g. when the
hotkey interface is waiting for a key press).
- All depreciated useLocalState is now removed. In almost all situations
I could useState, but a few things for MFD on CAS I needed to use
sharedState.

Prepares us for 516 (though still more changes will be necessary) and
finalizes the react port.

<details>
<summary>Screenshots & Videos</summary>

New list modal w/ duplicate key handling:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/b84e2db6-4e42-42d3-9b6d-4ae418f63c60)

Fixed VOX panel (sound files used to overlap type select):

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/a3cde1ea-1816-4187-b7a4-040803e52d4e)

Updated shuttle manipulator window:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/f978c2e2-9174-4635-9da7-6d2768f9fbff)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/607a0b91-5c64-4ca0-9256-d981c7073fb9)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/9b69cfb2-d4c2-4caf-846d-1d32f965cff0)

With replace any shuttle support:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/ace7f58a-0991-4147-b13f-d2be2d012b21)

Erase current tab chat history:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/9554ccfe-43da-4eee-b9ae-ad5cbec0523b)

Working case sensitivity highlights:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/182971ac-a0f2-42de-ad41-fa12991d760c)

Unread counter toggle per tab:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/9de5b9ae-5cb2-4905-9592-556e9cf45ad2)

Larger strip panel:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/2229c7d4-935a-427e-9699-942acae1cfbf)

Tacmap panel polish (button positioning + dropdown text color when
highlighted):

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/dcdf86fa-ba48-4d6f-bd42-bb8f3c1dd2bf)

Minor tweak to camera panel:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/930d64b8-1c36-4cc4-a24d-900d57c642b0)

Dropdowns will now display above if too little space below:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/3f4916d9-f020-489d-8494-277bde9cd741)

Kitchen sink works again (F12 w/ tgui-dev):

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/aa3bd2c7-b320-4158-ae8f-cea4896f0a9c)

Layout mode works again (F11 w/ tgui-dev):

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/cb683cd2-e62b-4cdf-bb38-10e7e1902030)

New checkbox modal (with theme support):

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/ddc2da93-8987-44f2-be3f-1c2694d9489e)

![checkbox](https://github.com/cmss13-devs/cmss13/assets/76988376/6a6ddab9-25b6-47cb-b833-295b3b7bf6c2)

New handling for button sizes in alert modals (stacked list since
options wanted to use more horizontal space than limit):

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/976a2a86-c1c6-421a-bb7a-80f20cc8f22d)

Polished smart fridge + restore wiring panel:
![smart
fridge](https://github.com/cmss13-devs/cmss13/assets/76988376/5524132f-c657-45d2-a7bc-aa09e00eb45b)

Fixed byondui in supply pod menu:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/18555668-34fe-4aa7-83aa-c1045bc54dd0)

TG Say:

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/cc66a143-22ba-4f90-865a-0c00e7dd8bfa)

Some unchanged panels (to just show working):

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/adb8e0cb-64a4-45c4-9bac-1cecc6791667)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/d330bd51-995b-48f4-8f18-5aedd0e2adaf)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/cb5edc05-949d-4564-9548-f255971bb0f8)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/0559cd17-8b5e-4585-8152-d8ac67a82f35)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/31bf0233-dd05-408c-b2c6-5ebee9b2381c)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/314fdec8-cc5c-4815-9ca9-b85422880a29)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/36bf1d5e-91fd-4cb0-8ce5-07ce4746902f)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/b63ee6aa-e80c-4928-9295-05d0e6314a16)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/9b93df2e-a92d-4eeb-a5d4-07018c848c54)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/7b45ba04-30c7-405c-90c2-d52ca99d7890)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/f3ae0b6d-ca77-4dd8-bfc7-8616018211d1)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/9aa28a52-e86d-4bb0-be23-a9ee1b39d97c)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/8108494f-9ce9-44dd-b94b-5306c9ef7e09)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/996b5dd3-89fa-4d19-bebc-de52774de23b)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/2bccace6-2a68-4f8f-ada6-c231aab836f9)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/8362f2ff-b38f-4682-a5c7-b26934e5972e)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/8584e849-8d8d-4ff2-9ff8-932749ea6da5)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/813b21e2-9705-4b5f-8710-e452384c56d9)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/dcd933c5-65bd-41a2-b8c9-e1dcba446231)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/1d81b490-168c-4f88-9d88-099f768cd665)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/1dbe39d6-08fc-4734-bdf6-afc71fef6e6f)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/f7fc5461-5138-4427-ab1a-89627baefb4b)

![image](https://github.com/cmss13-devs/cmss13/assets/76988376/032cc12c-802e-4d0a-b8d3-568a48f7d469)

![dropship](https://github.com/cmss13-devs/cmss13/assets/76988376/c85a4ed3-b4a9-4c44-a34b-1990f7ac7d31)

</details>

:cl: Drathek, mullenpaul
ui: Finalizes the TGUI React port and brings us back into parity again
with TG's interface components
ui: Strip panel is now larger with sprites at 64x64 instead of 48
because as an Image component now they didn't alias the same.
ui: VOX panel's second tab now doesn't overlap the other buttons
ui: Wiring panel for some machines is now restored to use circular
indicators again
ui: Smart fridge interface is more in line with sorted inventories as
far as layout & tooltips
ui: Tacmap drawing interface is tweaked a little to deal with the
changes to dropdowns + clicking the tab is now disabled again until the
tacmap is ready (It needs minimap subsystem to fire to have icons when
flattening the map to be up to date)
ui: Reworks RestrictedInput number handling
ui: Adds the DMIcon, VirtualList (deferred lazy list), Dialogue,
MenuBar, StyleableSection, and Checkbox TGUI components (but nothing
uses them yet)
ui: Chat: Adds a clear chat button clearing the current tab, mute button
to disable unread notifications for a tab, and updates the word
highlight regex for case sensitivity
ui: Updates the ship manipulator window to allow replacing any Shuttle
ui: Fixes the supply pod panel not displaying its byondui map correctly
ui: Fixes the research terminal duplicating papers in display old mode.
ui: Updates the tgui_input_list to for new features like hotkey
selection, duplicate key handling, etc
fix: Fixes thinking runtimes when quickly switching between tgsay
categories
code: Shuttle subsystem now is less aggressive with reservations
(skipping deletion if below a threshold, delaying reservation if above a
threshold)
fix: Fixes F5 key still refreshing a TGUI window even if default was set
to be prevented (e.g. Hotkey interface)
/:cl:

---------

Co-authored-by: Jerm <jlsnow301@pm.me>
@scriptis scriptis deleted the refactor/dynamic-lists branch October 21, 2024 03:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Refactor Makes the code harder to read UI We make the game less playable, but with round edges
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants