docs: Dataframe docs update #693

AccordionGuy · 2024-12-14T15:58:48Z

Here’s the first of many rapid updates to the documentation for DataFrame. This one covers displaying DataFrames and the methods for the EditableDataframe class.

madeindjs

Well done 💪 I spotted some small mistakes, but it should be good.

docs/framework/dataframe.mdx

madeindjs · 2024-12-15T17:44:04Z

docs/framework/dataframe.mdx

+			})
+			```
+
+			```sh Polars


Suggested change

```sh Polars

```python Polars

madeindjs · 2024-12-15T17:44:13Z

docs/framework/dataframe.mdx

+			})
+			```
+
+			```sh List of dictionaries


Suggested change

```sh List of dictionaries

```python List of dictionaries

docs/framework/dataframe.mdx

ramedina86 · 2024-12-15T17:29:31Z

docs/framework/dataframe.mdx

+
+A editable DataFrame is one whose content can change. Like static DataFrames, editable DataFrames use the **DataFrame** UI component. Unlike static tables, the DataFrame UI component is bound to an instance of `EditableDataframe`, a class provided by the Writer library. Changes to a  `EditableDataframe` object will be immediately reflected in the DataFrame UI component that it is bound to.
+
+<Note>Note that the "f" in `EditableDataframe` is _not_ capitalized — it’s `EditableDataframe`, not `EditableDataFrame`!</Note>


@FabienArcellier @madeindjs can we change to standard capitalization of DataFrame? (I find it weird too, but it is what it is)

@samjulien @ajot @AccordionGuy in general, if you find yourself writing something like this, please provide feedback and we'll likely fix it on our end 😀

Yes we can. I have used the class name of pandas. Dataframe or dataframe looks better.

So you'll change from EditableDataframe to EditableDataFrame?

Sorry, bad reading for my comment on github. Ok for me to go to EditableDataFrame.

@AccordionGuy we'll fix this on our end, can you please change docs to EditableDataFrame and remove the <Note>?

@ramedina86 @FabienArcellier I've made the updates as requested and will let you folks know if I find potential issues like the capitalization of EditableDataframe — I figured that there might be a good reason for the original capitalization, but I’ll ask next time!

Thanks @AccordionGuy 🙏🏻

Co-authored-by: Alexandre Rousseau <[email protected]>

samjulien

Few corrections needed and a little intro and conclusion cleanup

samjulien · 2024-12-19T00:33:41Z

docs/framework/dataframe.mdx

-## Use a dataframe
-
-**a dataframe is simply added to the state**. A component like `dataframe` will be able to display it.
+**Writer Framework has two objects with the name _DataFrame_:**


Can we add an intro sentence here to help people understand what they're trying to accomplish with dataframes?

samjulien · 2024-12-19T00:35:06Z

docs/framework/dataframe.mdx

+		The call to `wf.init_state()` adds the `DataFrame` to the application's `state` variable as the value of the `mydf` key. 
+	</Step>
+	<Step title="Add a DataFrame component to the UI and bind it to the DataFrame data structure">
+		Add a DataFrame UI component to the user interface, then set its **Data** property to `@{`_dataframe_key_`}`, where _dataframe_key_ is the `state` variable key whose value refers to the `DataFrame` data structure.


The underscores at the front and end of _dataframe_key_ add italics and break the code formatting, I'd remove them.

samjulien · 2024-12-19T00:36:13Z

docs/framework/dataframe.mdx

+
+		In the case of this example, `mydf` is the `state` variable key referring to the `DataFrame`, so set the **Data** property to `@{mydf}`.
+
+		![DataFrame for static table example with properties panel open](images/dataframe_static_table_1.png)


This image is broken for me, might want to double check the URL against other docs. I think you need to add /framework to the front possibly but check out other examples.

samjulien · 2024-12-19T00:37:47Z

docs/framework/dataframe.mdx

+			})
+			```
+
+			```sh Polars


samjulien · 2024-12-19T00:38:08Z

docs/framework/dataframe.mdx

+			})
+			```
+
+			```sh List of dictionaries


samjulien · 2024-12-19T00:38:29Z

docs/framework/dataframe.mdx

+
+		In the case of this example, `mydf` is the `state` variable key referring to the `DataFrame`, so set the **Data** property to `@{mydf}`.
+
+		![DataFrame for dynamic table example with properties panel open](images/dataframe_dynamic_table_1.png)


Ditto on image URL being broken

samjulien · 2024-12-19T00:39:29Z

docs/framework/dataframe.mdx

-})
-```
+```python
+state["mydf"].record_remove({"record_index": 2})


Seems like this is missing a conclusion or something to wrap this up and tell the user where to go next

samjulien · 2024-12-19T00:41:10Z

docs/framework/dataframe.mdx

+To present a data table in Writer Framework, you create a `DataFrame` data structure in your code and then bind it to a UI Dataframe.
+
+
+## Displaying a static DataFrame


Can we please briefly discuss the options in the DataFrame component (e.g. sorting, downloading, searching) and link to the component documentation.

samjulien · 2024-12-19T16:11:05Z

Updates look great @AccordionGuy! @ramedina86 @FabienArcellier this is ready for you all to review and merge! Once that's done we'll need to update the main mintlify.json in the docs repo -- happy to do it unless you already have that as part of your process, I know Fabien was looking at automating this.

samjulien · 2025-01-02T18:35:38Z

@FabienArcellier just bumping this for visibility once you're back from the holidays. Would love to finally get Dataframe documented! Thank you!

FabienArcellier · 2025-01-03T17:25:38Z

I review and fix conflicts. It looks ok. I would advocate to explain on how to use record_add, record_update and record_remove in event handler (maybe screenshot or small video). This method are design to be compliant with event handler payload.

# Subscribe this event handler to the `wf-dataframe-add` event
#
# more on : https://dev.writer.com/framework/dataframe
def on_record_add(state, payload):
	payload['record']['sales'] = 0 # default value inside the dataframe
	state['mydf'].record_add(payload) # should contain an EditableDataFrame instance

@samjulien if it looks ok for you, I will merge. Let me know

FabienArcellier · 2025-01-03T17:28:21Z

@samjulien I haven't work on the topic of automatic table of content generation. It would focus on generated contents (components and later on workflow blocks), not on editorialized pages as Dataframe or ai-modules.

samjulien · 2025-01-03T21:03:36Z

Thanks @FabienArcellier! Let's go ahead with this -- I've added a Jira ticket to the Docs & DX board for making your suggested updates in the next iteration of this doc. Whenever it's released I'll manually add to the main Mintlify nav in the docs repo.

AccordionGuy added 2 commits December 14, 2024 00:55

Add static and dynamic table sections

c8704d2

Add DataFrame methods

014cc21

ramedina86 requested review from FabienArcellier and madeindjs December 15, 2024 17:30

madeindjs reviewed Dec 15, 2024

View reviewed changes

ramedina86 reviewed Dec 16, 2024

View reviewed changes

ramedina86 changed the title ~~Dataframe docs update~~ docs: Dataframe docs update Dec 16, 2024

AccordionGuy and others added 6 commits December 16, 2024 10:47

Update docs/framework/dataframe.mdx

fe0dfbc

Co-authored-by: Alexandre Rousseau <[email protected]>

Update docs/framework/dataframe.mdx

7c8e06a

Co-authored-by: Alexandre Rousseau <[email protected]>

Update docs/framework/dataframe.mdx

b2ab8f8

Co-authored-by: Alexandre Rousseau <[email protected]>

Update docs/framework/dataframe.mdx

bb103a1

Co-authored-by: Alexandre Rousseau <[email protected]>

Update capitalization to EditableDataFrame; plus minor corrections

7fcdb00

Add documentation for record() method

3860958

ramedina86 marked this pull request as draft December 17, 2024 12:57

samjulien suggested changes Dec 19, 2024

View reviewed changes

Add sections: intro, enabling download and search

1856440

Merge branch 'dev' into dataframe-docs-update

846e655

FabienArcellier approved these changes Jan 3, 2025

View reviewed changes

FabienArcellier marked this pull request as ready for review January 3, 2025 17:25

FabienArcellier merged commit 7b34e51 into writer:dev Jan 3, 2025
15 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: Dataframe docs update #693

docs: Dataframe docs update #693

AccordionGuy commented Dec 14, 2024

madeindjs left a comment

madeindjs Dec 15, 2024

samjulien Dec 19, 2024

madeindjs Dec 15, 2024

samjulien Dec 19, 2024

ramedina86 Dec 15, 2024

ramedina86 Dec 16, 2024

FabienArcellier Dec 16, 2024

ramedina86 Dec 16, 2024

FabienArcellier Dec 16, 2024

ramedina86 Dec 16, 2024

AccordionGuy Dec 16, 2024

ramedina86 Dec 16, 2024

samjulien left a comment

samjulien Dec 19, 2024

samjulien Dec 19, 2024

samjulien Dec 19, 2024

samjulien Dec 19, 2024

samjulien Dec 19, 2024

samjulien Dec 19, 2024

samjulien Dec 19, 2024

samjulien Dec 19, 2024

samjulien commented Dec 19, 2024

samjulien commented Jan 2, 2025

FabienArcellier commented Jan 3, 2025 •

edited

Loading

FabienArcellier commented Jan 3, 2025

samjulien commented Jan 3, 2025


		A editable DataFrame is one whose content can change. Like static DataFrames, editable DataFrames use the DataFrame UI component. Unlike static tables, the DataFrame UI component is bound to an instance of `EditableDataframe`, a class provided by the Writer library. Changes to a `EditableDataframe` object will be immediately reflected in the DataFrame UI component that it is bound to.

		<Note>Note that the "f" in `EditableDataframe` is _not_ capitalized — it’s `EditableDataframe`, not `EditableDataFrame`!</Note>


		In the case of this example, `mydf` is the `state` variable key referring to the `DataFrame`, so set the Data property to `@{mydf}`.

		![DataFrame for static table example with properties panel open](images/dataframe_static_table_1.png)


		In the case of this example, `mydf` is the `state` variable key referring to the `DataFrame`, so set the Data property to `@{mydf}`.

		![DataFrame for dynamic table example with properties panel open](images/dataframe_dynamic_table_1.png)

		To present a data table in Writer Framework, you create a `DataFrame` data structure in your code and then bind it to a UI Dataframe.


		## Displaying a static DataFrame

docs: Dataframe docs update #693

docs: Dataframe docs update #693

Conversation

AccordionGuy commented Dec 14, 2024

madeindjs left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

samjulien left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

samjulien commented Dec 19, 2024

samjulien commented Jan 2, 2025

FabienArcellier commented Jan 3, 2025 • edited Loading

FabienArcellier commented Jan 3, 2025

samjulien commented Jan 3, 2025

FabienArcellier commented Jan 3, 2025 •

edited

Loading