rename progress component visibility prop to hidden

Author: clarasb

chartlets.js/CHANGES.md

@@ -6,9 +6,9 @@
 	- `vite: ^8.0.16`
 	- `vitest: ^4.1.8`
 
-* Added `visible` support for progress components. Progress indicators can
-  now be hidden via `visible={false}` and are automatically shown while a
-  server-side callback with an output such as `Output("progress", "visible")`
+* Added `hidden` support for progress components. Progress indicators can
+  now be hidden via `hidden={false}` and are automatically shown while a
+  server-side callback with an output such as `Output("progress", "hidden")`
   is pending.
 
 ## Version 0.2.0 (from 2026/03/11)

chartlets.js/packages/lib/src/actions/helpers/invokeCallbacks.test.ts

@@ -7,7 +7,10 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import { store } from "@/store";
-import type { CallbackRequest, StateChangeRequest } from "@/types/model/callback";
+import type {
+  CallbackRequest,
+  StateChangeRequest,
+} from "@/types/model/callback";
 import type { ComponentState } from "@/types/state/component";
 import { invokeCallbacks } from "./invokeCallbacks";
 
@@ -20,8 +23,8 @@ function createDeferred<T>() {
 }
 
 function getProgressComponent() {
-  return (store.getState().contributionsRecord.panels[0].component!
-    .children![0] as ComponentState);
+  return store.getState().contributionsRecord.panels[0].component!
+    .children![0] as ComponentState;
 }
 
 const callbackRequest: CallbackRequest = {
@@ -51,15 +54,15 @@ describe("invokeCallbacks", () => {
                 {
                   type: "CircularProgress",
                   id: "progress",
-                  visible: false,
+                  hidden: false,
                 },
               ],
             },
             callbacks: [
               {
                 function: { name: "calculate", parameters: [], return: {} },
                 inputs: [{ id: "run", property: "clicked" }],
-                outputs: [{ id: "progress", property: "visible" }],
+                outputs: [{ id: "progress", property: "hidden" }],
               },
             ],
             initialState: {},
@@ -80,29 +83,33 @@ describe("invokeCallbacks", () => {
 
     invokeCallbacks([callbackRequest]);
 
-    expect(getProgressComponent().visible).toBe(true);
+    expect(getProgressComponent().hidden).toBe(true);
 
-    deferred.resolve(createCallbackResponse([
-      {
-        contribPoint: "panels",
-        contribIndex: 0,
-        stateChanges: [{ id: "progress", property: "visible", value: false }],
-      },
-    ]));
+    deferred.resolve(
+      createCallbackResponse([
+        {
+          contribPoint: "panels",
+          contribIndex: 0,
+          stateChanges: [{ id: "progress", property: "hidden", value: false }],
+        },
+      ]),
+    );
 
     await vi.waitFor(() => {
-      expect(getProgressComponent().visible).toBe(false);
+      expect(getProgressComponent().hidden).toBe(false);
     });
   });
 
   it("logs and releases pending progress when a callback fails", async () => {
     const deferred = createDeferred<Response>();
-    const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
+    const consoleError = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
     globalThis.fetch = vi.fn().mockReturnValue(deferred.promise);
 
     invokeCallbacks([callbackRequest]);
 
-    expect(getProgressComponent().visible).toBe(true);
+    expect(getProgressComponent().hidden).toBe(true);
 
     deferred.resolve({
       ok: true,
@@ -112,7 +119,7 @@ describe("invokeCallbacks", () => {
     } as unknown as Response);
 
     await vi.waitFor(() => {
-      expect(getProgressComponent().visible).toBe(false);
+      expect(getProgressComponent().hidden).toBe(false);
     });
     expect(consoleError).toHaveBeenCalledOnce();
   });
@@ -140,4 +147,4 @@ function createCallbackResponse(result: StateChangeRequest[]) {
     statusText: "ok",
     json: vi.fn().mockResolvedValue({ result }),
   } as unknown as Response;
-}
+}

chartlets.js/packages/lib/src/actions/helpers/pendingProgress.test.ts

@@ -24,8 +24,8 @@ const callbackRequest: CallbackRequest = {
 };
 
 function getProgressComponent() {
-  return (store.getState().contributionsRecord.panels[0].component!
-    .children![0] as ComponentState);
+  return store.getState().contributionsRecord.panels[0].component!
+    .children![0] as ComponentState;
 }
 
 describe("pendingProgress", () => {
@@ -47,33 +47,33 @@ describe("pendingProgress", () => {
                 {
                   type: "CircularProgress",
                   id: "progress",
-                  visible: false,
+                  hidden: false,
                 },
                 {
                   type: "Typography",
                   id: "text",
-                  visible: false,
+                  hidden: false,
                 },
               ],
             },
             callbacks: [
               {
                 function: { name: "calculate", parameters: [], return: {} },
                 inputs: [{ id: "run", property: "clicked" }],
-                outputs: [{ id: "progress", property: "visible" }],
+                outputs: [{ id: "progress", property: "hidden" }],
               },
               {
                 function: { name: "duplicate", parameters: [], return: {} },
                 inputs: [{ id: "run", property: "clicked" }],
                 outputs: [
-                  { id: "progress", property: "visible" },
-                  { id: "progress", property: "visible" },
+                  { id: "progress", property: "hidden" },
+                  { id: "progress", property: "hidden" },
                 ],
               },
               {
                 function: { name: "text", parameters: [], return: {} },
                 inputs: [{ id: "run", property: "clicked" }],
-                outputs: [{ id: "text", property: "visible" }],
+                outputs: [{ id: "text", property: "hidden" }],
               },
               {
                 function: { name: "value", parameters: [], return: {} },
@@ -89,13 +89,13 @@ describe("pendingProgress", () => {
     });
   });
 
-  it("finds progress components targeted by visible callback outputs", () => {
+  it("finds progress components targeted by hidden callback outputs", () => {
     expect(getPendingProgressTargets([callbackRequest])).toEqual([
       {
         contribPoint: "panels",
         contribIndex: 0,
         id: "progress",
-        output: { id: "progress", property: "visible" },
+        output: { id: "progress", property: "hidden" },
       },
     ]);
   });
@@ -108,7 +108,7 @@ describe("pendingProgress", () => {
     expect(targets).toHaveLength(1);
   });
 
-  it("ignores non-progress components and non-visible outputs", () => {
+  it("ignores non-progress components and non-hidden outputs", () => {
     expect(
       getPendingProgressTargets([{ ...callbackRequest, callbackIndex: 2 }]),
     ).toEqual([]);
@@ -137,25 +137,25 @@ describe("pendingProgress", () => {
 
     showPendingProgressTargets(targets);
 
-    expect(getProgressComponent().visible).toBe(true);
+    expect(getProgressComponent().hidden).toBe(true);
 
     releasePendingProgressTargets(targets, false);
 
-    expect(getProgressComponent().visible).toBe(false);
+    expect(getProgressComponent().hidden).toBe(false);
   });
 
-  it("keeps progress visible until overlapping callbacks have completed", () => {
+  it("keeps progress hidden until overlapping callbacks have completed", () => {
     const targets = getPendingProgressTargets([callbackRequest]);
 
     showPendingProgressTargets(targets);
     showPendingProgressTargets(targets);
 
     releasePendingProgressTargets(targets, true);
 
-    expect(getProgressComponent().visible).toBe(true);
+    expect(getProgressComponent().hidden).toBe(true);
 
     releasePendingProgressTargets(targets, false);
 
-    expect(getProgressComponent().visible).toBe(false);
+    expect(getProgressComponent().hidden).toBe(false);
   });
-});
+});

chartlets.js/packages/lib/src/actions/helpers/pendingProgress.ts

@@ -39,7 +39,7 @@ export function getPendingProgressTargets(
     const callback = contribution?.callbacks?.[callbackIndex];
     callback?.outputs?.forEach((output) => {
       if (
-        formatObjPath(output.property) === "visible" &&
+        formatObjPath(output.property) === "hidden" &&
         isProgressComponent(contribution.component, output.id)
       ) {
         const target = { contribPoint, contribIndex, id: output.id, output };
@@ -99,7 +99,7 @@ function decrementPendingProgressCounts(targets: PendingProgressTarget[]) {
 
 function applyPendingProgressTargets(
   targets: PendingProgressTarget[],
-  visible: boolean,
+  hidden: boolean,
 ) {
   if (targets.length === 0) {
     return;
@@ -108,7 +108,7 @@ function applyPendingProgressTargets(
     targets.map<StateChangeRequest>((target) => ({
       contribPoint: target.contribPoint,
       contribIndex: target.contribIndex,
-      stateChanges: [{ ...target.output, value: visible }],
+      stateChanges: [{ ...target.output, value: hidden }],
     })),
   );
 }

chartlets.js/packages/lib/src/plugins/mui/CircularProgress.test.tsx

@@ -23,12 +23,12 @@ describe("CircularProgress", () => {
     expect(screen.getByRole("progressbar")).not.toBeUndefined();
   });
 
-  it("should not render when visible is false", () => {
+  it("should not render when hidden is false", () => {
     render(
       <CircularProgress
         type="CircularProgress"
         id="cp"
-        visible={false}
+        hidden={false}
         onChange={() => {}}
       />,
     );

chartlets.js/packages/lib/src/plugins/mui/CircularProgress.tsx

@@ -22,9 +22,9 @@ export const CircularProgress = ({
   size,
   value,
   variant,
-  visible = true,
+  hidden = true,
 }: CircularProgressProps) => {
-  if (!visible) {
+  if (!hidden) {
     return null;
   }
 

chartlets.js/packages/lib/src/plugins/mui/LinearProgress.test.tsx

@@ -23,12 +23,12 @@ describe("LinearProgress", () => {
     expect(screen.getByRole("progressbar")).not.toBeUndefined();
   });
 
-  it("should not render when visible is false", () => {
+  it("should not render when hidden is false", () => {
     render(
       <LinearProgress
         type="LinearProgress"
         id="cp"
-        visible={false}
+        hidden={false}
         onChange={() => {}}
       />,
     );

chartlets.js/packages/lib/src/plugins/mui/LinearProgress.tsx

@@ -21,9 +21,9 @@ export const LinearProgress = ({
   style,
   value,
   variant,
-  visible = true,
+  hidden = true,
 }: LinearProgressProps) => {
-  if (!visible) {
+  if (!hidden) {
     return null;
   }
 

chartlets.js/packages/lib/src/types/state/component.ts

@@ -30,7 +30,7 @@ export interface ComponentState {
   label?: string;
   color?: string;
   tooltip?: string;
-  visible?: boolean;
+  hidden?: boolean;
 }
 
 export interface ContainerState extends ComponentState {

chartlets.py/CHANGES.md

@@ -1,8 +1,8 @@
 ## Version 0.2.1 (in development)
 
-* Added `visible` property to the base `Component` class, so components can
+* Added `hidden` property to the base `Component` class, so components can
   be shown or hidden through callback outputs such as
-  `Output("progress", "visible")`.
+  `Output("progress", "hidden")`.
 
 ## Version 0.2.0 (from 2026/03/11)