feat: progress bar

blocks/flojoy/visualization/big_num.py

@@ -0,0 +1,2 @@
+def big_num(x):
+    return x

blocks/flojoy/visualization/progress_bar.py

@@ -0,0 +1,2 @@
+def progress_bar(x):
+    return x

captain/tests/test_reactive.py

@@ -9,7 +9,7 @@ def test_add():
         _Block(id="constant1", block_type="flojoy.math.constant"),
         _Block(id="constant2", block_type="flojoy.math.constant"),
         _Block(id="add", block_type="flojoy.math.arithmetic.add"),
-        _Block(id="bignum", block_type="flojoy.visualization.bignum"),
+        _Block(id="big_num", block_type="flojoy.visualization.big_num"),
     ]
 
     edges = [
@@ -20,7 +20,7 @@ def test_add():
             target="add", source="constant2", targetParam="y", sourceParam="value"
         ),
         FCConnection(
-            target="bignum", source="add", targetParam="x", sourceParam="value"
+            target="big_num", source="add", targetParam="x", sourceParam="value"
         ),
     ]
 
@@ -39,4 +39,4 @@ def pub(x, id):
     assert outputs["constant1"] == 2
     assert outputs["constant2"] == 2
     assert outputs["add"] == 4
-    assert outputs["bignum"] == 4
+    assert outputs["big_num"] == 4

captain/types/flowchart.py

@@ -5,7 +5,8 @@
 # TODO: This is hardcoded for now
 BlockType = Literal[
     "flojoy.control.slider",
-    "flojoy.visualization.bignum",
+    "flojoy.visualization.big_num",
+    "flojoy.visualization.progress_bar",
     "flojoy.math.arithmetic.add",
     "flojoy.math.arithmetic.subtract",
     "flojoy.math.constant",

src/renderer/src/components/blocks/control/ProgressDisplay.tsx

@@ -0,0 +1,16 @@
+import { BlockProps } from '@/types/block';
+import { useBlockState } from '@/hooks/useBlockState';
+import { Progress } from '@/components/ui/Progress';
+
+const ProgressDisplay = ({ id }: BlockProps) => {
+  const [value] = useBlockState<number>(id);
+
+  return (
+    <div className="flex w-64 items-center gap-2 border p-4">
+      <Progress value={value} />
+      <div>{value}%</div>
+    </div>
+  );
+};
+
+export default ProgressDisplay;

src/renderer/src/components/blocks/flow/ProgressBlock.tsx

@@ -0,0 +1,15 @@
+import { Percent } from 'lucide-react';
+import { Handle, Position } from 'reactflow';
+
+const ProgressBlock = () => {
+  return (
+    <>
+      <div className="border p-4">
+        <Percent />
+      </div>
+      <Handle type="target" position={Position.Left} id="x" />
+    </>
+  );
+};
+
+export default ProgressBlock;

src/renderer/src/components/flow/BlocksLibrary.tsx

@@ -13,13 +13,19 @@ const BlocksLibrary = () => {
       </div>
       <div className="py-2"></div>
       <div className="flex flex-col gap-2">
+        {/* TODO: This should be auto generated */}
         <BlockCard
           name="Add"
           desc="Add a bunch of stuff together"
           block_type="flojoy.math.arithmetic.add"
         />
         <BlockCard name="Slider" desc="it slides" block_type="flojoy.control.slider" />
-        <BlockCard name="Big Number" desc="Big number" block_type="flojoy.visualization.bignum" />
+        <BlockCard name="Big Number" desc="Big number" block_type="flojoy.visualization.big_num" />
+        <BlockCard
+          name="Progress Bar"
+          desc="progress bar"
+          block_type="flojoy.visualization.progress_bar"
+        />
       </div>
     </div>
   );

src/renderer/src/configs/control.ts

@@ -1,7 +1,9 @@
 import SliderControl from '@/components/blocks/control/SliderControl';
 import BigNumberDisplay from '@/components/blocks/control/BigNumberDisplay';
+import ProgressDisplay from '@/components/blocks/control/ProgressDisplay';
 
 export const nodeTypes = {
   'flojoy.control.slider': SliderControl,
-  'flojoy.visualization.bignum': BigNumberDisplay
+  'flojoy.visualization.big_num': BigNumberDisplay,
+  'flojoy.visualization.progress_bar': ProgressDisplay
 };

src/renderer/src/configs/flowchart.ts

@@ -1,9 +1,11 @@
 import AddBlock from '@/components/blocks/flow/AddBlock';
 import BigNumberBlock from '@/components/blocks/flow/BigNumberBlock';
+import ProgressBlock from '@/components/blocks/flow/ProgressBlock';
 import SliderBlock from '@/components/blocks/flow/SliderBlock';
 
 export const nodeTypes = {
   'flojoy.control.slider': SliderBlock,
-  'flojoy.visualization.bignum': BigNumberBlock,
+  'flojoy.visualization.big_num': BigNumberBlock,
+  'flojoy.visualization.progress_bar': ProgressBlock,
   'flojoy.math.arithmetic.add': AddBlock
 };

src/renderer/src/types/block.ts

@@ -3,7 +3,8 @@ import { NodeProps } from 'reactflow';
 // TODO: This should not be hardcoded
 export type BlockType =
   | 'flojoy.control.slider'
-  | 'flojoy.visualization.bignum'
+  | 'flojoy.control.progress_bar'
+  | 'flojoy.visualization.big_num'
   | 'flojoy.math.arithmetic.add'
   | 'flojoy.math.arithmetic.subtract'
   | 'flojoy.math.constant';