Feat: Give all widgets the name parameter #2350

ui/package.json

@@ -50,7 +50,7 @@
     "jest-canvas-mock": "^2.2.0",
     "jest-environment-jsdom": "^29.6.4",
     "jest-resolve": "^29.6.4",
-    "jest-watch-typeahead": "0.4.2",
+    "jest-watch-typeahead": "^2.2.2",
     "react-app-polyfill": "^1.0.6",
     "react-test-renderer": "^17.0.2",
     "sass": "^1.49.7",

ui/src/article.tsx

@@ -83,6 +83,8 @@ interface State {
   content?: S
   /** Collection of small buttons rendered under the title. */
   items?: Component[]
+  /** An identifying name for this component */
+  name?: S
 }
 
 export const View = bond(({ name, state, changed }: Model<State>) => {

ui/src/audio_annotator.tsx

@@ -26,6 +26,8 @@ export interface AudioAnnotatorItem {
   end: F
   /** The `name` of the audio annotator tag to refer to for the `label` and `color` of this item. */
   tag: S
+  /** An identifying name for this component */
+  name?: S
 }
 
 /**

ui/src/breadcrumbs.tsx

@@ -38,6 +38,8 @@ interface Breadcrumb {
 interface State {
   /** A list of `h2o_wave.types.Breadcrumb` instances to display. See `h2o_wave.ui.breadcrumb()` */
   items: Breadcrumb[]
+  /** An optional name for this card. */
+  name?: Id
 }
 
 const

ui/src/button.tsx

@@ -90,6 +90,8 @@ export interface MiniButtons {
   items: Component[]
   /** True if the component should be visible. Defaults to True. */
   visible?: B
+  /** An identifying name for this component. */
+  name?: S
 }
 
 /** Create a mini button - same as regular button, but smaller in size. */

ui/src/canvas.tsx

@@ -585,4 +585,3 @@ export const
   })
 
 cards.register('canvas', View)
-

ui/src/chat.tsx

@@ -180,4 +180,4 @@ export const
     return { render, init: scroll, update: scroll, changed }
   })
 
-cards.register('chat', View)
+cards.register('chat', View)

ui/src/chatbot.tsx

@@ -119,6 +119,8 @@ interface ChatbotMessage {
   content: S
   /* True if the message is from the user. */
   from_user: B
+  /** an optional identifying name for this component.*/
+  name?: S
 }
 
 /** Create a chat prompt suggestion displayed as button below the last response in the chatbot component. */

ui/src/defs.ts

@@ -60,116 +60,5 @@ export const cardDefs: CardDef[] = [
         "value": {}
       }
     ]
-  },
-  {
-    "view": "chat",
-    "icon": "OfficeChat",
-    "attrs": [
-      {
-        "name": "box",
-        "optional": false,
-        "t": "box",
-        "value": "{\"zone\":\"Body\"}"
-      },
-      {
-        "name": "title",
-        "optional": false,
-        "t": "textbox",
-        "value": "Untitled Chat"
-      },
-      {
-        "name": "data",
-        "optional": false,
-        "t": "record",
-        "value": {}
-      },
-      {
-        "name": "capacity",
-        "optional": true,
-        "t": "spinbox",
-        "value": 50,
-        "min": 10,
-        "max": 10000,
-        "step": 10
-      }
-    ]
-  },
-  {
-    "view": "frame",
-    "icon": "PageAdd",
-    "attrs": [
-      {
-        "name": "box",
-        "optional": false,
-        "t": "box",
-        "value": "{\"zone\":\"Body\"}"
-      },
-      {
-        "name": "title",
-        "optional": false,
-        "t": "textbox",
-        "value": "Untitled Frame"
-      },
-      {
-        "name": "path",
-        "optional": true,
-        "t": "textbox",
-        "value": ""
-      },
-      {
-        "name": "content",
-        "optional": true,
-        "t": "textarea",
-        "value": ""
-      }
-    ]
-  },
-  {
-    "view": "markdown",
-    "icon": "InsertTextBox",
-    "attrs": [
-      {
-        "name": "box",
-        "optional": false,
-        "t": "box",
-        "value": "{\"zone\":\"Body\"}"
-      },
-      {
-        "name": "title",
-        "optional": false,
-        "t": "textbox",
-        "value": "Untitled Content"
-      },
-      {
-        "name": "content",
-        "optional": false,
-        "t": "textarea",
-        "value": "Hello, World!"
-      }
-    ]
-  },
-  {
-    "view": "markup",
-    "icon": "FileHTML",
-    "attrs": [
-      {
-        "name": "box",
-        "optional": false,
-        "t": "box",
-        "value": "{\"zone\":\"Body\"}"
-      },
-      {
-        "name": "title",
-        "optional": false,
-        "t": "textbox",
-        "value": "Untitled Content"
-      },
-      {
-        "name": "content",
-        "optional": false,
-        "t": "textarea",
-        "value": "<div/>"
-      }
-    ]
   }
 ]

ui/src/flex.tsx

@@ -72,4 +72,4 @@ export const
     return { render, changed }
   })
 
-cards.register('flex', View)
+cards.register('flex', View)

ui/src/footer.tsx

@@ -54,6 +54,8 @@ interface State {
   caption: S
   /** The components displayed to the right of the caption. */
   items?: Component[]
+  /** An optional identifying name to the card */
+  name?: S
 }
 
 export const

ui/src/form.tsx

@@ -190,6 +190,8 @@ interface State {
   items: Packed<Component[]>
   /** The title for this card. */
   title?: S
+  /** An optional name for this form. */
+  name?: S
 }
 
 const

ui/src/frame.tsx

@@ -89,6 +89,10 @@ interface State {
    * True if title and padding should be removed. Defaults to False.
    */
   compact?: B
+  /**
+   * An optional identifying name for this component.
+   */
+  name?: S
 }
 
 const

ui/src/graphics.tsx

@@ -55,6 +55,8 @@ interface State {
    * Required only if `image` is set. 
    */
   image_type?: S
+  /** An optional identifying name for this Card. */
+  name?: S
 }
 
 const
@@ -210,4 +212,3 @@ export const
 
 cards.register('graphics', View)
 
-

ui/src/header.tsx

@@ -101,6 +101,8 @@ interface State {
   secondary_items?: Component[]
   /** Header background color. Defaults to 'primary'. */
   color?: 'card' | 'transparent' | 'primary'
+  /** An optional name for this component. */
+  name?: S
 }
 
 const

ui/src/image.tsx

@@ -48,6 +48,8 @@ interface State {
   path?: S
   /** The path or URL or data URL of the image displayed in the popup after clicking the image. Does not replace the `path` property. */
   path_popup?: S
+  /** An optional identifying name for the image */
+  name?: S
 }
 
 
@@ -67,6 +69,8 @@ export interface Image {
   visible?: B
   /** The path or URL or data URL of the image displayed in the popup after clicking the image. Does not replace the `path` property. */
   path_popup?: S
+  /** An optional identifying name for this component. */
+  name?: S
 }
 
 export const

ui/src/image_annotator.tsx

@@ -14,12 +14,16 @@ export interface ImageAnnotatorPoint {
   x: F
   /** `y` coordinate of the point. */
   y: F
+  /** An optional name for this component. */
+  name?: S
 }
 
 /** Create a polygon annotation shape. */
 export interface ImageAnnotatorPolygon {
   /** List of polygon points. */
   vertices: ImageAnnotatorPoint[]
+  /** An optional name for this component. */
+  name?: S
 }
 
 /** Create a rectangular annotation shape. */
@@ -32,6 +36,8 @@ export interface ImageAnnotatorRect {
   x2: F
   /** `y` coordinate of the diagonally opposite corner. */
   y2: F
+  /** An optional name for this component. */
+  name?: S
 }
 
 /** Create a shape to be rendered as an annotation on an image annotator. */
@@ -56,6 +62,8 @@ interface ImageAnnotatorItem {
   shape: ImageAnnotatorShape
   /** The `name` of the image annotator tag to refer to for the `label` and `color` of this item. */
   tag: S
+  /** An optional name for this component. */
+  name?: S
 }
 
 /**

ui/src/large_bar_stat.tsx

@@ -65,6 +65,8 @@ interface State {
   plot_color?: S
   /** Data for this card. */
   data?: Rec
+  /** An optional identifying name for this group. */
+  name?: S
 }
 
 export const

ui/src/large_stat.tsx

@@ -51,6 +51,8 @@ interface State {
   caption: S
   /** Data for this card. */
   data?: Rec
+  /** An optional identifying name for this card. */
+  name?: S
 }
 
 export const

ui/src/link.tsx

@@ -88,6 +88,8 @@ export interface Links {
   inline?: B
   /** The width of the links, e.g. '100px'. */
   width?: S
+  /** An identifying name for this component. */
+  name?: S
 }
 export const forceFileDownload = (path: S) => {
   const anchor = document.createElement('a')

ui/src/markdown.tsx

@@ -152,6 +152,8 @@ interface State {
  * Make spacing tighter. Defaults to True.
  **/
   compact?: B
+  /** An optional identifying name for this component. */
+  name?: S
 }
 
 export const

ui/src/markup.tsx

@@ -66,6 +66,8 @@ interface State {
    * True if outer spacing should be removed. Defaults to False.
    **/
   compact?: B
+  /** An optional identifying name for this component. */
+  name?: S
 }
 
 export const

ui/src/meta.tsx

@@ -36,6 +36,8 @@ interface InlineStylesheet {
   content: S
   /** A valid media query to set conditions for when the style should be applied. More info at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#attr-media. */
   media?: S
+  /** An optional identifying name for this stylesheet. */
+  name?: S
 }
 
 /**
@@ -48,6 +50,8 @@ interface Stylesheet {
   media?: S
   /** The CORS setting. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-crossorigin */
   cross_origin?: S
+  /** An optional identifying name for this stylesheet. */
+  name?: S
 }
 /**
  * Represents the layout structure for a page.
@@ -162,6 +166,8 @@ interface State {
   stylesheet?: InlineStylesheet
   /** External CSS files to load into the page. */
   stylesheets?: Stylesheet[]
+  /** An Optional identifying name for this page */
+  name?: S
   /** EXPERIMENTAL: True to turn on the card animations. Defaults to False. */
   animate?: B
 }

ui/src/nav.tsx

@@ -70,6 +70,8 @@ export interface State {
   secondary_items?: Component[]
   /** Card background color. Defaults to 'card'. */
   color?: 'card' | 'primary'
+  /** An optional name for this card. */
+  name?: S
 }
 
 const

ui/src/parts/lightbox.tsx

@@ -114,7 +114,7 @@ const
     iconPressed: { color: 'rgba(255, 255, 255, 0.7)' },
   }
 
-type Image = { title: S, description?: S, type?: S, image?: S, path?: S }
+type Image = { title: S, description?: S, type?: S, image?: S, path?: S, name?: S }
 
 export interface LightboxProps {
   images: Image[],

ui/src/parts/microarea.tsx

@@ -20,6 +20,7 @@ import { stylesheet } from 'typestyle'
 import { debounce } from '../ui'
 
 interface Props {
+  name?: S
   data: any[]
   zeroValue?: F
   value: S