WH

Reorder Containers that can Expand and Collapse

To further expand upon prior discussion of collapsible panels from previous posts

Superqt - Distributing QCollapsible Containers

PyQT - Collapsible Sections

In the previous article, the panels were referred to as containers, but in this article they will be referred to as panels instead. The term container might be confused with the element that houses all the panels.

We will want to improve our panels beyond being only collapsible by adding draggable/sortable capabilities.

Demo of Behavior

Icon Sidebar as Tabs

A common UI paradigm for grouping access of different functionalities to different portions of a GUI application is use a tabset with tabs that are situated in either the left or vertical portion of the screen.

Choices and Versatility

Asdf is a tools and program installer that has been around for some time, but there is a newer tool that grants you the powers of asdf with even more capabilities such as automatic dependency management, larger choice of programs with support from different source registries and temporary dependency switching which comes from mise.

These aren't the only functionality of mise, but they are a few that can make an impact on improving your dependency management workflow.

Automatic Dependency Change Upon Project Folder Navigation

Mise simplifies the way you manage your runtime or programming language versions when you need to switch to different project folders that require a certain version.

Supposedly that you are interested in install different versions of nodejs, one LTS and the other more newer non-LTS version.

mise install node@22.12.0
mise install node@23.11.0

Set the version of nodejs that is to be the global default. This should generally be a LTS version of nodejs.

mise use --global node@22.12.0

Code Block Advice

Use the cache=TRUE option

To speed up the compilation time when you write R graphing code, you will have to use the caching option.

```{r cache=TRUE}

Custom Timeout

In the situation where your tests might actually run slower on another person's machine, you should give them an option to increase the timeout to prevent timeout failures.

At first glance, you might do something like this to run the command to accept a timeout value.

npm run test -- --testTimeout=50000

Read Observables Values Correctly

As the JavaScript world have adopted promises to handle asynchronous events, it would be no surprise that Vitest would also support promises.

Stepping away for Vitest for a moment, the general method of testing RxJS observables was through marble diagram testing such as using TestScheduler, but the TestScheduler is more suited for testing the order of emitted values from observables.

If your observable only emits one final value, it is more suitable to convert the observable to a promise and check the return value in Vitest as shown below

import { lastValueFrom } from 'rxjs';

// Depending on your application, you might need to switch
// out lastValueFrom with firstValueFrom for the conversion to work.
const promiseResults = await lastValueFrom(returnsObservable());
expect(result).toBe(valueExpected);

One Plugin for Multiple Programming Languages

To quickly look at the output of a variable, you can use the print or console statement in your programming language of choice. Most of the language packages you add with the vscode extensions do not have a shortcut hotkey combination to quickly print or log out a variable. A good majority of the extensions also caters to the more common programming languages such as JavaScript or Python.

It would be most beneficial to have a general logger where you can activate the statement with a use of a shortcut key combination if you tend to work with multiple languages. There are a couple of general print loggers on the vscode extension marketplace, but the variable-print plugin stood out in that it was the one that offered the option of adding new languages to support custom print statements.