Tom/update state docs #333
Conversation
|
One more thing I think we could add is more examples of comparing var operations on the front-end to doing the same thing with a computed var on the backend and when we want to do either approach |
| self.number_1 = random.randint(-10, 10) | ||
| self.number_2 = random.randint(-10, 10) | ||
|
|
||
| def var_comparison_example(): |
There was a problem hiding this comment.
Lets make this display into a table for a clean visual look
|
turn all the examples into tables and add badges of green and red for true and false |
docs/state/var-operations.md
Outdated
| return rx.vstack( | ||
| rx.heading(f"The number: {VarOperationState.number}", size="lg"), | ||
|
|
||
| rx.heading(f"The negated number is {-VarOperationState.number}", size="md"), |
There was a problem hiding this comment.
Can we make this more aesthetic and concise?
How about just showing the number at the top, with an hstack below of badges that are short ex Negated: -89, Absolute Val: 89, Len: 4
There was a problem hiding this comment.
Done, but I feel the numbers look a little small now
docs/state/var-operations.md
Outdated
| headers=["Integer 1", "Integer 2", "Operation", "Outcome"], | ||
| rows=[ | ||
| (VarComparisonState.number_1, VarComparisonState.number_2, "are equal (==)", f"{VarComparisonState.number_1 == VarComparisonState.number_2}"), | ||
| (VarComparisonState.number_1, VarComparisonState.number_2, "are not equal (!=)", f"{VarComparisonState.number_1 != VarComparisonState.number_2}"), |
There was a problem hiding this comment.
I like the table but I think the operations section doesn't need the explanation as it makes it hard to consume.
Since all the operations are in Python I think we should just do the operation without the description
docs/state/var-operations.md
Outdated
| ```python exec | ||
| import random | ||
|
|
||
| class VarComparisonState(State): |
There was a problem hiding this comment.
Let's call the States something shorted as it will reduce the code significantly in the examples VarComparisonState -> CompState same with the rest of the states in this file
docs/state/var-operations.md
Outdated
| rx.table( | ||
| headers=["Integer 1", "Integer 2", "Operation", "Outcome"], | ||
| rows=[ | ||
| (VarDivState.number_1, VarDivState.number_2, "True Division of Int 1 by Int 2 (/)", f"{VarDivState.number_1 / VarDivState.number_2}"), |
There was a problem hiding this comment.
Same here about not needing the comment, as these are regular Python operations
docs/state/var-operations.md
Outdated
| rx.heading(f"List 2: {VarListState.list_2}", size="lg"), | ||
| rx.heading(f"List 3: {VarListState.list_3}", size="lg"), | ||
|
|
||
| rx.heading(f"Does List 1 contain the number 3: {VarListState.list_1.contains(3)}", size="md"), |
There was a problem hiding this comment.
I think a clean way to display this section would be to have an
hstack(
vstack(
rx.heading(f"List 1: {VarListState.list_1}", size="lg"),
rx.heading(f"Contains 3: {VarListState.list_1.contains(3)}", size="md"),
),
vstack(
rx.heading(f"List 2: {VarListState.list_2}", size="lg"),
rx.heading(f"Reverse List 2: ...),
)
...
)
To better show the correlated parts.
Can shorten these comments
Does List 1 contain the number 3: true -> List 1 Contains 3: True
Join List 3 into string: python -> List 3 Joins: python
docs/state/var-operations.md
Outdated
| rx.heading(f"List 1: {VarStringState.string_1}", size="lg"), | ||
| rx.heading(f"List 2: {VarStringState.string_2}", size="lg"), | ||
|
|
||
| rx.heading(f"Lower Case output of List 1: {VarStringState.string_1.lower()}", size="md"), |
There was a problem hiding this comment.
Same comment about how to strucutre this section with hstack and vstacks as Contains, Reverse and Join section,
Can shorten the comments up to
List 1 Lower Case: python is fun
List 2 Upper Case: REACT IS HARD
|
Nice much clearer now 👍 |
Added new var operations page and gave examples of all of the different var operations in use.