fix: unique id to each flow

modelscope · Apr 19, 2024 · 68400a3 · 68400a3
1 parent 59be18b
commit 68400a3
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 12 deletions.
diff --git a/.changeset/gentle-cars-give.md b/.changeset/gentle-cars-give.md
@@ -0,0 +1,7 @@
+---
+'@modelscope-studio/compiled': patch
+'modelscope_studio': patch
+'@modelscope-studio/flow': patch
+---
+
+fix: unique id to each flow
diff --git a/.github/workflows/publish.yaml b/.github/workflows/publish.yaml
@@ -1,10 +1,10 @@
 name: publish
 
-on:
-  # disabled for now
-  # push:
-  #   branches:
-  #     - main
+# on:
+# disabled for now
+# push:
+#   branches:
+#     - main
 env:
   CI: true
 

diff --git a/backend/modelscope_studio/components/Flow/__init__.py b/backend/modelscope_studio/components/Flow/__init__.py
@@ -30,6 +30,7 @@ class FlowSchemaDict(TypedDict):
 
 class BackgroundPropsDict(TypedDict):
     color: Optional[str]
+    bgColor: Optional[str]
     className: Optional[str]
     # The gap between patterns. Passing in a tuple allows you to control the x and y gap independently.
     gap: Optional[Union[int, Tuple[int, int]]]

diff --git a/docs/components/Flow/demos/component_options.py b/docs/components/Flow/demos/component_options.py
@@ -29,11 +29,12 @@ def on_data_change(_flow):
 flow_props = ["show_sidebar", "show_minimap", "show_controls"]
 
 
-def on_change(_flow_config, _bgc_variant, _bgc_color, _bgc_gap, _bgc_size,
-              _bgc_offset, _bgc_line_width):
+def on_change(_flow_config, _bgc_variant, _bgc_color, _bgc_bg_color, _bgc_gap,
+              _bgc_size, _bgc_offset, _bgc_line_width):
     new_props = {}
     new_background_props = {
         "variant": _bgc_variant,
+        "bgColor": _bgc_bg_color,
         "color": _bgc_color,
         "gap": _bgc_gap,
         "size": _bgc_size,
@@ -62,6 +63,8 @@ def on_change(_flow_config, _bgc_variant, _bgc_color, _bgc_gap, _bgc_size,
                                            value="dots")
                 with gr.Column():
                     bgc_color = gr.ColorPicker(label="color", value="")
+                with gr.Column():
+                    bgc_bg_color = gr.ColorPicker(label="bgColor", value="")
                 with gr.Column():
                     bgc_gap = gr.Slider(label="gap", value=28)
                 with gr.Column():
@@ -89,13 +92,13 @@ def on_change(_flow_config, _bgc_variant, _bgc_color, _bgc_gap, _bgc_size,
                     background_props=BackgroundPropsDict(variant='dots'))
     gr.on(triggers=[
         flow_config.change, bgc_variant.change, bgc_color.change,
-        bgc_gap.change, bgc_size.change, bgc_offset.change,
-        bgc_line_width.change
+        bgc_bg_color.change, bgc_gap.change, bgc_size.change,
+        bgc_offset.change, bgc_line_width.change
     ],
           fn=on_change,
           inputs=[
-              flow_config, bgc_variant, bgc_color, bgc_gap, bgc_size,
-              bgc_offset, bgc_line_width
+              flow_config, bgc_variant, bgc_color, bgc_bg_color, bgc_gap,
+              bgc_size, bgc_offset, bgc_line_width
           ],
           outputs=[flow])
     flow.data_change(fn=on_data_change, inputs=[flow])

diff --git a/frontend/compiled/src/Flow/index.tsx b/frontend/compiled/src/Flow/index.tsx
@@ -102,7 +102,9 @@ export const Flow = defineComponent<FlowProps>((props) => {
     style,
     background_props,
   } = props;
-
+  const id = useMemo(() => {
+    return createId();
+  }, []);
   const schema = useMemoizedEqualValue(userSchema);
 
   const { token } = AntdTheme.useToken();
@@ -491,6 +493,7 @@ export const Flow = defineComponent<FlowProps>((props) => {
       >
         <ReactFlow<FlowNode, FlowEdge>
           nodeTypes={nodeTypes}
+          id={`flow_${id}`}
           edgeTypes={edgeTypes}
           proOptions={{
             hideAttribution: true,