fix: auto-loading & tour

modelscope · Nov 25, 2024 · d95225d · d95225d
1 parent f87e7c7
commit d95225d
Show file tree

Hide file tree

Showing 14 changed files with 190 additions and 11 deletions.
diff --git a/docs/app.py b/docs/app.py
@@ -174,10 +174,22 @@ def get_docs(file_path: str, type: Literal["antd", "base"]):
     "children": [{
         "label": get_text("AutoComplete", "AutoComplete 自动完成"),
         "key": "auto_complete"
+    }, {
+        "label": get_text("Cascader", "Cascader 级联选择"),
+        "key": "cascader"
     }, {
         "label": get_text("Select", "Select 选择器"),
         "key": "select"
     }]
+}, {
+    "label":
+    get_text("Data Display", "数据展示"),
+    "type":
+    "group",
+    "children": [{
+        "label": get_text("Tour", "Tour 漫游式引导"),
+        "key": "tour"
+    }]
 }, {
     "label":
     get_text("Other", "其他"),

diff --git a/docs/components/antd/cascader/README-zh_CN.md b/docs/components/antd/cascader/README-zh_CN.md
@@ -0,0 +1,8 @@
+# Cascader
+
+Cascade selection box. See [Ant Design](https://ant.design/components/cascader/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="panel" title="Panel"></demo>
diff --git a/docs/components/antd/cascader/README.md b/docs/components/antd/cascader/README.md
@@ -0,0 +1,8 @@
+# Cascader
+
+Cascade selection box. See [Ant Design](https://ant.design/components/cascader/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="panel" title="Panel"></demo>
diff --git a/docs/components/antd/cascader/app.py b/docs/components/antd/cascader/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+    docs.render().queue().launch()
diff --git a/docs/components/antd/cascader/demos/basic.py b/docs/components/antd/cascader/demos/basic.py
@@ -0,0 +1,48 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            antd.Cascader(elem_style=dict(width=300),
+                          options=[{
+                              "value":
+                              'zhejiang',
+                              "label":
+                              'Zhejiang',
+                              "children": [{
+                                  "value": 'hangzhou',
+                                  "label": 'Hangzhou'
+                              }],
+                          }, {
+                              "value":
+                              'jiangsu',
+                              "label":
+                              'Jiangsu',
+                              "children": [{
+                                  "value": 'nanjing',
+                                  "label": 'Nanjing'
+                              }],
+                          }, {
+                              "value": 'shanghai',
+                              "label": 'Shanghai',
+                              "disabled": True
+                          }])
+            antd.Divider("Multiple")
+            with antd.Cascader(elem_style=dict(width='100%'),
+                               multiple=True,
+                               max_tag_count="responsive"):
+                antd.Cascader.Option(label="Light", value="light")
+                with antd.Cascader.Option(label="Bamboo", value="bamboo"):
+                    with antd.Cascader.Option(label="Little", value="little"):
+                        antd.Cascader.Option(label="Toy Fish",
+                                             value="fish",
+                                             disabled=True)
+                        antd.Cascader.Option(label="Toy Bird", value="bird")
+                        with antd.Cascader.Option(value="cat"):
+                            with ms.Slot("label"):
+                                antd.Typography.Text("Toy Cat", type="success")
+if __name__ == "__main__":
+    demo.queue().launch()
diff --git a/docs/components/antd/cascader/demos/panel.py b/docs/components/antd/cascader/demos/panel.py
@@ -0,0 +1,32 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            antd.Cascader.Panel(options=[
+                {
+                    "value": 'zhejiang',
+                    "label": 'Zhejiang',
+                    "children": [{
+                        "value": 'hangzhou',
+                        "label": 'Hangzhou'
+                    }],
+                }, {
+                    "value": 'jiangsu',
+                    "label": 'Jiangsu',
+                    "children": [{
+                        "value": 'nanjing',
+                        "label": 'Nanjing'
+                    }],
+                }, {
+                    "value": 'shanghai',
+                    "label": 'Shanghai',
+                    "disabled": True
+                }
+            ])
+
+if __name__ == "__main__":
+    demo.queue().launch()
diff --git a/docs/components/antd/tour/README-zh_CN.md b/docs/components/antd/tour/README-zh_CN.md
@@ -0,0 +1,7 @@
+# Tour
+
+A popup component for guiding users through a product. See [Ant Design](https://ant.design/components/tour/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/docs/components/antd/tour/README.md b/docs/components/antd/tour/README.md
@@ -0,0 +1,7 @@
+# Tour
+
+A popup component for guiding users through a product. See [Ant Design](https://ant.design/components/tour/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
diff --git a/docs/components/antd/tour/app.py b/docs/components/antd/tour/app.py
@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+    docs.render().queue().launch()
diff --git a/docs/components/antd/tour/demos/basic.py b/docs/components/antd/tour/demos/basic.py
@@ -0,0 +1,38 @@
+import gradio as gr
+
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            btn = antd.Button("Begin Tour",
+                              type="primary",
+                              elem_id="tour-begin-btn")
+            with antd.Tour(open=False) as tour:
+                antd.Tour.Step(
+                    title="Center",
+                    description="Displayed in the center of screen.",
+                    get_target=None)
+                antd.Tour.Step(
+                    title="Right",
+                    description="On the right of target.",
+                    get_target=
+                    "() => document.querySelector('#tour-begin-btn')",
+                    placement="right")
+                with antd.Tour.Step(
+                        title="Top",
+                        get_target=
+                        "() => document.querySelector('#tour-begin-btn')",
+                        placement="top"):
+                    with ms.Slot("description"):
+                        antd.Typography.Text("On the top of target.",
+                                             type="success")
+
+            btn.click(lambda: gr.update(open=True), outputs=[tour])
+            gr.on([tour.close, tour.finish],
+                  lambda: gr.update(open=False),
+                  outputs=[tour])
+
+if __name__ == "__main__":
+    demo.queue().launch()
diff --git a/frontend/antd/cascader/panel/cascader.panel.tsx b/frontend/antd/cascader/panel/cascader.panel.tsx
@@ -30,6 +30,7 @@ export const CascaderPanel = sveltify<
       onValueChange,
       value: props.value,
     });
+
     return (
       <>
         <div style={{ display: 'none' }}>{children}</div>

diff --git a/frontend/antd/tour/Index.svelte b/frontend/antd/tour/Index.svelte
@@ -25,7 +25,6 @@
   $: updatedProps.update((prev) => ({ ...prev, ...props }));
   export let _internal: Record<string, any> = {};
   export let as_item: string | undefined;
-  export let open: boolean = true;
   // gradio properties
   export let visible = true;
   export let elem_id = '';
@@ -40,7 +39,6 @@
     elem_classes,
     elem_style,
     as_item,
-    open,
     restProps: $$restProps,
   });
   const setSlotParams = getSetSlotParamsFn();
@@ -54,7 +52,6 @@
     elem_classes,
     elem_style,
     as_item,
-    open,
     restProps: $$restProps,
   });
   const { steps, default: children } = getItems(['steps', 'default']);

diff --git a/frontend/antd/tour/step/Index.svelte b/frontend/antd/tour/step/Index.svelte
@@ -66,9 +66,12 @@
       ...$mergedProps.restProps,
       ...$mergedProps.props,
       ...bindEvents($mergedProps),
-      target: createFunction(
-        $mergedProps.props.target || $mergedProps.restProps.target
-      ),
+      target:
+        createFunction(
+          $mergedProps.props.target || $mergedProps.restProps.target
+        ) ||
+        $mergedProps.props.target ||
+        $mergedProps.restProps.target,
     },
     slots: $slots,
   });

diff --git a/frontend/base/auto-loading/useLoadingStatus.ts b/frontend/base/auto-loading/useLoadingStatus.ts
@@ -50,14 +50,20 @@ export function useLoadingStatus(loadingStatus?: LoadingStatus | null) {
   }, [startTimer, status, stopTimer]);
 
   useEffect(() => {
-    if (eta === null) {
-      setEta(oldEta);
+    setEta(loadingStatus?.eta ?? null);
+  }, [loadingStatus?.eta]);
+
+  useEffect(() => {
+    let _eta = eta;
+    if (_eta === null) {
+      _eta = oldEta;
+      setEta(_eta);
     }
-    if (eta !== null && oldEta !== eta) {
+    if (_eta !== null && oldEta !== _eta) {
       setFormattedEta(
-        ((performance.now() - timerStart) / 1000 + eta).toFixed(1)
+        ((performance.now() - timerStart) / 1000 + _eta).toFixed(1)
       );
-      setOldEta(eta);
+      setOldEta(_eta);
     }
   }, [eta, oldEta, timerStart]);