{
17 | public state = {
18 | activeAnchorId: "",
19 | };
20 | private disable_scroll = false
21 | private mounted = false;
22 | private updateId = -1;
23 |
24 | // Send message to COI
25 | postMessage(COI_method: string,
26 | data?: {
27 | anchor_id?: string;
28 | anchor_ids?:string[];
29 | auto_update_anchor?: boolean
30 | styles?: { [key: string]: CSSProperties }
31 | disable_scroll?: boolean
32 | }): boolean {
33 | const { key } = this.props.args;
34 | if (key == null || typeof key !== "string") {
35 | throw new Error("Invalid key: key must be a string.");
36 | }
37 | window.parent.postMessage({ COI_method, key, ...data }, "*");
38 |
39 | console.debug("postMessage from ", key, ": ", COI_method, data);
40 | return true;
41 | }
42 |
43 |
44 | postRegister(auto_update_anchor:boolean): void {
45 | this.postMessage("register", { auto_update_anchor } );
46 | }
47 | postUpdateConfig(): void {
48 | let styles = this.styles;
49 | let disable_scroll = this.disable_scroll;
50 | this.postMessage("updateConfig", {styles, disable_scroll} );
51 | }
52 | postScroll(anchor_id: string): void {
53 | this.postMessage("scroll", { anchor_id });
54 | }
55 | postTrackAnchors(anchor_ids: string[]): void {
56 | this.postMessage("trackAnchors", { anchor_ids });
57 | }
58 | postUpdateActiveAnchor(anchor_id: string): void {
59 | const { auto_update_anchor } = this.getCleanedArgs();
60 | if (auto_update_anchor)
61 | this.postMessage("updateActiveAnchor", { anchor_id });
62 | }
63 |
64 | private setComponentValue(value:string) {
65 | Streamlit.setComponentValue(value);
66 | }
67 | // Handle menu item click
68 | private handleMenuClick = (anchorId: string) => {
69 | // Update active anchor for component and COI
70 | this.setState({ activeAnchorId: anchorId });
71 |
72 | // Scroll to anchor with COI and update COI's active anchor
73 | this.postScroll(anchorId);
74 |
75 | //Send component value to Streamlit
76 | this.setComponentValue(anchorId);
77 | };
78 |
79 | public componentDidMount(): void {
80 | const { anchor_ids, auto_update_anchor, disable_scroll} = this.getCleanedArgs();
81 | const initialAnchorId = anchor_ids[0];
82 |
83 | this.disable_scroll = disable_scroll;
84 | // Register component
85 | this.postRegister(auto_update_anchor);
86 | // Send styles to COI
87 | this.postUpdateConfig();
88 | // Tell COI to track anchors for visibility
89 | this.postTrackAnchors(anchor_ids);
90 | // Set initial active anchor for component and COI
91 | this.setState({ activeAnchorId: initialAnchorId });
92 | this.postUpdateActiveAnchor(anchor_ids[0]);
93 | // Listen for messages from COI
94 | window.addEventListener("message", this.handleMessage.bind(this));
95 |
96 | //Send component value to streamlit
97 | this.setComponentValue(initialAnchorId);
98 |
99 | this.mounted = true;
100 | }
101 |
102 | componentDidUpdate(): void {
103 | // Call streamlit's componentDidUpdate
104 | super.componentDidUpdate();
105 |
106 | const { anchor_ids, force_anchor } = this.getCleanedArgs();
107 | // If force_anchor is provided, simulate clicking on it
108 | if (force_anchor != null) {
109 | if (anchor_ids.includes(force_anchor)) {
110 | this.handleMenuClick(force_anchor);
111 | } else {
112 | throw new Error("Invalid force_anchor: force_anchor must be one of the anchor_ids.");
113 | }
114 | }
115 | }
116 |
117 | // Handle messages from COI
118 | private handleMessage(event: MessageEvent) {
119 | const { COMPONENT_method, key } = event.data;
120 | // Check if message is for this component
121 | if (COMPONENT_method == null || key == null) {
122 | return;
123 | }
124 | if (key !== this.props.args.key) {
125 | return;
126 | }
127 |
128 | console.debug("handleMessage", event.data);
129 | if (COMPONENT_method === "updateActiveAnchor") {
130 | const { anchor_id, update_id} = event.data;
131 | console.debug(key, "updateActiveAnchor: ", "Received updateActiveAnchor message with anchor_id: ", anchor_id, "update_id: ", update_id);
132 | //validate anchor_id and debug error if invalid
133 | if (anchor_id == null || typeof anchor_id !== "string") {
134 | console.error("Invalid anchor_id: anchor_id must be a string.");
135 | return;
136 | }
137 | //Validate updateId as number and debug error if invalid
138 | if (update_id == null || typeof update_id !== "number") {
139 | console.error("Invalid updateId: updateId must be a number.");
140 | return;
141 | }
142 |
143 | const {auto_update_anchor} = this.getCleanedArgs();
144 | //If auto_update_anchor is false, do not update the active anchor from external source
145 | if (!auto_update_anchor) {
146 | return;
147 | }
148 |
149 | //Check if the updateId is the latest
150 | if (update_id > this.updateId) {
151 | this.setState({ activeAnchorId: anchor_id });
152 | console.debug(key, "updateActiveAnchor: ", "Updating `active` anchor to ", anchor_id);
153 | this.updateId = update_id;
154 | }
155 | else {
156 | console.debug("Ignoring updateActiveAnchor message with outdated updateId");
157 | }
158 | //Send back to Streamlit
159 | this.setComponentValue(anchor_id);
160 | }
161 | }
162 |
163 | private getCleanedArgs(): {
164 | anchor_ids: string[],
165 | anchor_labels: string[],
166 | anchor_icons: string[],
167 | force_anchor: string,
168 | key: string,
169 | orientation: string,
170 | override_styles: { [key: string]: CSSProperties },
171 | auto_update_anchor: boolean,
172 | disable_scroll: boolean }
173 | {
174 | let { key, anchor_ids, anchor_labels, anchor_icons, force_anchor, orientation, override_styles, auto_update_anchor, disable_scroll} = this.props.args;
175 | //key is required
176 | if (key == null || typeof key !== "string") {
177 | throw new Error("Invalid key: key must be a string.");
178 | }
179 |
180 | // anchor_ids is required
181 | if (anchor_ids == null || !Array.isArray(anchor_ids) || !anchor_ids.every((a) => typeof a === "string")) {
182 | throw new Error("Invalid anchors: anchors must be a list of strings.");
183 | }
184 |
185 | // anchor_labels is an optional list
186 | if (anchor_labels == null) {
187 | anchor_labels = anchor_ids;
188 | } else {
189 | if (!Array.isArray(anchor_labels) || !anchor_labels.every((a) => typeof a === "string")) {
190 | throw new Error("Invalid anchor_labels: anchor_labels must be a list of strings with length matching anchor_ids.");
191 | }
192 | }
193 |
194 | // anchor_icons is an optional list
195 | if (anchor_icons == null) {
196 | // List of null icons
197 | anchor_icons = new Array(anchor_ids.length).fill(null);
198 | } else {
199 | if (!Array.isArray(anchor_icons) || !anchor_icons.every((a) => typeof a === "string")) {
200 | throw new Error("Invalid anchor_icons: anchor_icons must be a list of strings with length matching anchor_ids.");
201 | }
202 | }
203 |
204 | // force_anchor is an optional string
205 | if (force_anchor != null && typeof force_anchor !== "string") {
206 | throw new Error("Invalid force_anchor: force_anchor must be a string.");
207 | }
208 |
209 | //orientation is an optional string. If not provided, default to "vertical"
210 | //If provided, it must be "vertical" or "horizontal"
211 | if (orientation == null) {
212 | orientation = "vertical";
213 | } else {
214 | if (orientation !== "vertical" && orientation !== "horizontal") {
215 | throw new Error("Invalid orientation: orientation must be 'vertical' or 'horizontal'.");
216 | }
217 | }
218 |
219 | //button_style is an optional dictionary with CSS styles that override the styles in styles
220 | if (override_styles == null) {
221 | override_styles = {};
222 | } else {
223 | if (typeof override_styles !== "object" || Array.isArray(override_styles)) {
224 | throw new Error("Invalid override_styles: override_styles must be an object.");
225 | }
226 |
227 | /* Commenting out to allow for any style key
228 | // Check if override_styles contains relevant keys
229 | const style_keys = Object.keys(this.styles);
230 | for (const key of Object.keys(override_styles)) {
231 | if (!style_keys.includes(key)) {
232 | throw new Error(`Invalid override_styles key: ${key} is not a valid style key.`);
233 | }
234 | }*/
235 | }
236 |
237 | //auto_update_active is an optional boolean
238 | //If not provided, default to true
239 | //If provided, it must be a boolean
240 | if (auto_update_anchor == null) {
241 | auto_update_anchor = true;
242 | } else {
243 | if (typeof auto_update_anchor !== "boolean") {
244 | throw new Error("Invalid auto_update_anchor: auto_update_anchor must be a boolean.");
245 | }
246 | }
247 |
248 | //disable_scroll is an optional boolean
249 | //If not provided, default to false
250 | //If provided, it must be a boolean
251 | if (disable_scroll == null) {
252 | disable_scroll = false;
253 | } else {
254 | if (typeof disable_scroll !== "boolean") {
255 | throw new Error("Invalid disable_scroll: disable_scroll must be a boolean.");
256 | }
257 | }
258 |
259 | return { anchor_ids, anchor_labels, anchor_icons, force_anchor, key, orientation, override_styles, auto_update_anchor, disable_scroll};
260 | }
261 |
262 | static getBiName(icon: string) {
263 | //If bi prefix is not provided, add it
264 | if (!icon.startsWith("bi-")) {
265 | return "bi-" + icon;
266 | }
267 | return icon;
268 | }
269 |
270 | // Render menu items dynamically based on props from Streamlit
271 | public renderMenuItems = (): ReactNode => {
272 | const { activeAnchorId } = this.state;
273 | const { anchor_ids, anchor_labels, anchor_icons, orientation } = this.getCleanedArgs();
274 |
275 | // Determine if orientation is horizontal or vertical
276 | const isHorizontal = orientation === "horizontal";
277 |
278 | return anchor_ids.map((anchor_id: string, index: number) => (
279 | this.handleMenuClick(anchor_id)}
282 | //This is navbar button style
283 | style={{
284 | //Apply base navbarButton style
285 | ...this.styles.navbarButtonBase,
286 | //Use horizontal or vertical navbarButton
287 | ...this.styles[isHorizontal ? "navbarButtonHorizontal" : "navbarButtonVertical"],
288 | //Set active style if active
289 | ...(activeAnchorId === anchor_id ? this.styles.navbarButtonActive : {}),
290 | }}
291 |
292 | //Change style on hover
293 | onMouseEnter={(e) => {
294 | //Apply ...styles.navbarButtonHover
295 | const newStyle: CSSProperties = {
296 | ...this.styles.navbarButtonHover,
297 | }
298 | e.currentTarget.style.backgroundColor = newStyle.backgroundColor || "";
299 | e.currentTarget.style.color = newStyle.color || "";
300 | }}
301 | //Reset style on mouse leave
302 | onMouseLeave={(e: React.MouseEvent) => {
303 | const newStyle: CSSProperties = {
304 | backgroundColor: this.styles.navbarButtonBase.backgroundColor,
305 | color: this.styles.navbarButtonBase.color,
306 | ...(activeAnchorId === anchor_id ? this.styles.navbarButtonActive : {}),
307 | }
308 | e.currentTarget.style.backgroundColor = newStyle.backgroundColor || "";
309 | e.currentTarget.style.color = newStyle.color || "";
310 | }}
311 | >
312 |
313 | {anchor_icons && anchor_icons[index] && (
314 | )}
316 | {anchor_labels[index]
317 | }
318 |
319 | ));
320 | };
321 |
322 | // Render sidebar with dynamic orientation handling
323 | public render = (): ReactNode => {
324 | const { orientation, override_styles, disable_scroll} = this.getCleanedArgs();
325 |
326 | if (this.mounted) {
327 | // Deep merge override_styles into styles
328 | const mergeDeep = (target: any, source: any) => {
329 | let changed = false;
330 | for (const key in source) {
331 | if (source[key] instanceof Object && key in target) {
332 | const { changed: childChanged } = mergeDeep(target[key], source[key]);
333 | if (childChanged) {
334 | changed = true;
335 | }
336 | } else {
337 | if (target[key] !== source[key]) {
338 | target[key] = source[key];
339 | changed = true;
340 | }
341 | }
342 | }
343 | return { result: target, changed };
344 | };
345 | let { changed } = mergeDeep(this.styles, override_styles);
346 |
347 | // Update disable_scroll if it has changed
348 | if (disable_scroll !== this.disable_scroll) {
349 | this.disable_scroll = disable_scroll;
350 | changed = true;
351 | }
352 |
353 | //Communicate new styles and other config to COI
354 | if (changed) {
355 | this.postUpdateConfig()
356 | }
357 | }
358 |
359 | // Adjust layout direction based on orientation
360 | const isHorizontal = orientation === "horizontal";
361 | return (
362 |
368 |
369 | {this.renderMenuItems()}
370 |
371 |