Added Feature Cover Json Data Node in Data Node control #2164

THEBOSS0369 · 2024-10-26T12:33:14Z

This PR fixes #1248

Hey Everyone!

In this PR, The changes has been done in DataNodeViewer.tsx file, Now Data in Json can be collapsed or expand as the user wish.
I have imported react-json-view because it will make our process much easier.

Thanks!

THEBOSS0369 · 2024-10-26T12:34:39Z

@quest-bot loot #1248

quest-bot · 2024-10-26T12:34:43Z

Quest PR submitted!

@THEBOSS0369, you are attempting to solve the issue and loot this Quest. Will you be successful?

Questions? Check out the docs.

FredLL-Avaiga

Needs tests

frontend/taipy/src/DataNodeViewer.tsx

THEBOSS0369 · 2024-10-29T15:25:21Z

Needs tests

Hey @FredLL-Avaiga ! Apologies for late reply. I have created a test file can you tell me in which folder should i add that file , this is the test file in the root folder

FredLL-Avaiga · 2024-10-29T15:59:36Z

Needs tests

Hey @FredLL-Avaiga ! Apologies for late reply. I have created a test file can you tell me in which folder should i add that file , this is the test file in the root folder

What does this show ? that you can display some json data in a markdown page ?
I don't understand how this would use the data_node control ?

FredLL-Avaiga

this needs:

~~backend check and modification if necessary~~
tests
example of the data_node control usage with json

FredLL-Avaiga · 2024-10-30T23:04:05Z

please fix the failing checks

THEBOSS0369 · 2024-10-31T04:54:27Z

please fix the failing checks

Yes sir i will fix these errors.

THEBOSS0369 · 2024-10-31T07:19:19Z

@FredLL-Avaiga The test is failing because of the <Grid > component as in file it has been imported from @mui/material/Grid2
and when i'm using it this error is showing

it can resolve if i import it from @mui/material/Grid which is definitely not good option , so can you tell me how to use Grid in this file.

THEBOSS0369 · 2024-10-31T07:23:00Z

example of the data_node control usage with json

Sir, I will be adding this in the next commit

FredLL-Avaiga · 2024-10-31T07:50:03Z

@FredLL-Avaiga The test is failing because of the <Grid > component as in file it has been imported from @mui/material/Grid2
and when i'm using it this error is showing

it can resolve if i import it from @mui/material/Grid which is definitely not good option , so can you tell me how to use Grid in this file.

You have to update your dependencies
Grid2 comes with Mui6 which is what we use in Taipy

THEBOSS0369 · 2024-10-31T13:55:58Z

@FredLL-Avaiga The test is failing because of the <Grid > component as in file it has been imported from @mui/material/Grid2
and when i'm using it this error is showing

it can resolve if i import it from @mui/material/Grid which is definitely not good option , so can you tell me how to use Grid in this file.

You have to update your dependencies
Grid2 comes with Mui6 which is what we use in Taipy

Got it Sir , This will work! Also I won't be able to share any update till tomorrow due to Diwali Festival. Hope you understand 😀

FredLL-Avaiga · 2024-10-31T14:31:48Z

Also I won't be able to share any update till tomorrow due to Diwali Festival. Hope you understand 😀

Enjoy the festival 🙏

FredLL-Avaiga

to make things work, you will nee to modify the backend also:
in _adapters.py

taipy/taipy/gui_core/_adapters.py

Line 190 in 63f0cbf

return isinstance(datanode, _TabularDataNodeMixin) or isinstance(

the static method should be

    @staticmethod
    def _is_tabular_data(datanode: DataNode, value: t.Any):
        return isinstance(datanode, _TabularDataNodeMixin) or (
            isinstance(value, (pd.DataFrame, pd.Series, list, tuple, dict)) and not isinstance(datanode, JSONDataNode)
        )

PS do not forget to import JSONDataNode
from taipy.core.data import JSONDataNode

doc/gui/examples/controls/collapse_data_view.py

FredLL-Avaiga

You should also have a change in package.json ?
and the package react-json-view is not maintained any more ... need to change it

frontend/taipy/src/DataNodeViewer.tsx

THEBOSS0369 · 2024-11-01T05:52:56Z

@FredLL-Avaiga ! As react-json-view is not maintained now so i have imported react-json-tree which is maintained regularly
and takes very much less space comparted to react-json-view i have created 2 files to import that because when i was lazy importing it i was getting many errors , to avoid that i divided in file LazyReactJsonTree.tsx and react-json-tree.ds. All the errors that i was getting get resolved by this

I created a demo-1248-dn.json file for the demo i have added the same file in root folder for testing as well, but don't know why its not showing when i try to add it in the commit here is the ss for it, I think i am adding that file in wrong folder maybe that is causing problem?

the output is coming something like this

FredLL-Avaiga · 2024-11-01T08:11:57Z

We don't want any demo-* fille in the repo
But at least you can run it and test the result of your changes sand debug the frontend if necessary.

FredLL-Avaiga · 2024-11-01T08:13:03Z

By the screen shot it doesn't look like the json is rendered?

THEBOSS0369 · 2024-11-01T12:33:55Z

By the screen shot it doesn't look like the json is rendered?

Yes sir I don't know what am i doing wrong there is a popup comes when i hover over Data that shows blocked by me . i don't understand why its coming

i also tried it by changing shouldExpandNode={() => false} to true still nothing changes. Can you help me with what am i doing wrong

…control-new

THEBOSS0369 · 2024-11-04T12:14:56Z

@FredLL-Avaiga Every requested changes Done.

THEBOSS0369 · 2024-11-06T12:06:12Z

Hey @FredLL-Avaiga ! I have did the requested changes. Once you get the time do let me know what to do next. Thanks !

FredLL-Avaiga · 2024-11-06T12:30:29Z

Hey @FredLL-Avaiga ! I have did the requested changes. Once you get the time do let me know what to do next. Thanks !

you need to fix every failing tests (related to your changes)

THEBOSS0369 · 2024-11-07T14:15:55Z

Hey @FredLL-Avaiga ! It seems the tests are failing because new libraries are missing from my package-lock.json file. So i have added the file let's see if this fix the issue

THEBOSS0369 · 2024-11-07T15:04:58Z

@FredLL-Avaiga Sir ! Now the test is failing because of these libraries not found, i checked it in the main codespace i wasn't able to find these 2 lib and they are not related to my changes

FredLL-Avaiga

For your package issue, you would recommend that you delete your local package-lock.json and node_modules folder and run npm i to regenerate them.

FredLL-Avaiga · 2024-11-07T15:05:55Z

doc/gui/examples/controls/collapse_data_view.py

+)
+
+with tgb.Page() as data_node_viewer:
+    tgb.html("h2", "Discovering Data Node JSON Viewer")


FredLL-Avaiga · 2024-11-07T15:06:33Z

doc/gui/examples/controls/collapse_data_view.py

+if __name__ == "__main__":
+    Orchestrator().run()
+    json_data_node = tp.create_global_data_node(json_config_node)
+    gui.run(title="1248 JSON Data Node")


title = "Datanode Viewer - json support"

FredLL-Avaiga · 2024-11-07T15:08:11Z

doc/gui/examples/controls/collapse_data_view.py

rename datanode_viewer_json.py

FredLL-Avaiga · 2024-11-07T15:38:48Z

I think you will see that :

JSonViewer does not take a collapse property
it does that a theme property that you can set to theme.palette.mode after getting the current theme by const theme = useTheme();
you need to block the edition mode for now with

                              <Grid
                                        container
                                        size={12}
                                        justifyContent="space-between"
                                        data-focus={dataValueFocus}
                                        onClick={dtType == "dict" ? undefined: onFocus}
                                        sx={hoverSx}
                                    >

around

taipy/frontend/taipy/src/DataNodeViewer.tsx

Line 997 in 7dac175

>

ie replacing the onClick handler with undefined when dtType == "dict"

…control-new

THEBOSS0369 · 2024-11-08T10:11:04Z

Hey @FredLL-Avaiga ! Can you take a look now.

FredLL-Avaiga · 2024-11-08T10:36:56Z

Hey @FredLL-Avaiga ! Can you take a look now.

Can you fix the checks ?
Property 'collapsed' does not exist on type 'IntrinsicAttributes & JsonViewerProps<unknown>'.

THEBOSS0369 · 2024-11-08T12:22:23Z

@FredLL-Avaiga ! I think this problem is occuring because maybe there is no collapsed function showing in the main lib . So shall i go ahead and use any other lib like this one https://www.npmjs.com/package/react-json-view-lite

FredLL-Avaiga · 2024-11-08T12:53:55Z

No just remove the collapse properly

…control-new

THEBOSS0369 · 2024-11-08T14:26:14Z

@FredLL-Avaiga ! It seems all tests have passed what to do next?

FredLL-Avaiga

Let's see if @FabienLelaquais liked it

Added Feature Cover Json Data Node in Data Node control

d11f920

quest-bot bot added the ⚔️ Quest Tracks quest-bot quests label Oct 26, 2024

quest-bot bot mentioned this pull request Oct 26, 2024

Cover JSON data in Data node control #1248

Open

4 tasks

FredLL-Avaiga requested changes Oct 28, 2024

View reviewed changes

frontend/taipy/src/DataNodeViewer.tsx Outdated Show resolved Hide resolved

frontend/taipy/src/DataNodeViewer.tsx Outdated Show resolved Hide resolved

frontend/taipy/src/DataNodeViewer.tsx Outdated Show resolved Hide resolved

fixed the requested changes

7daba5e

THEBOSS0369 force-pushed the feature/#1248-cover-json-data-node-control-new branch from 12fb4e6 to 7daba5e Compare October 29, 2024 15:22

FredLL-Avaiga requested changes Oct 29, 2024

View reviewed changes

Adding example file

00272c1

THEBOSS0369 force-pushed the feature/#1248-cover-json-data-node-control-new branch from 58feaaa to 00272c1 Compare October 31, 2024 07:13

FredLL-Avaiga requested changes Oct 31, 2024

View reviewed changes

doc/gui/examples/controls/collapse_data_view.py Outdated Show resolved Hide resolved

FredLL-Avaiga requested changes Oct 31, 2024

View reviewed changes

frontend/taipy/src/DataNodeViewer.tsx Outdated Show resolved Hide resolved

Fixed the requested Changes

6e8b61d

THEBOSS0369 force-pushed the feature/#1248-cover-json-data-node-control-new branch from 2c58cec to 6e8b61d Compare November 1, 2024 05:48

fixing linter error

130e3ab

THEBOSS0369 force-pushed the feature/#1248-cover-json-data-node-control-new branch from 4ec5603 to 130e3ab Compare November 1, 2024 06:06

THEBOSS0369 added 4 commits November 4, 2024 17:39

Update package.json

9348932

Update DataNodeViewer.tsx

71648be

Update package.json

e18b234

Merge branch 'develop' into feature/Avaiga#1248-cover-json-data-node-…

76fbae0

…control-new

Update DataNodeViewer.tsx

7dac175

fixing tests

39e60ae

THEBOSS0369 force-pushed the feature/#1248-cover-json-data-node-control-new branch from 19bb824 to 39e60ae Compare November 7, 2024 14:13

fixing failing tests again

97702a9

THEBOSS0369 force-pushed the feature/#1248-cover-json-data-node-control-new branch from 81cb8cf to 97702a9 Compare November 7, 2024 14:26

FredLL-Avaiga requested changes Nov 7, 2024

View reviewed changes

Added theme and done some requested changes

3187dc9

THEBOSS0369 force-pushed the feature/#1248-cover-json-data-node-control-new branch from 0eb3324 to 3187dc9 Compare November 8, 2024 09:59

Merge branch 'develop' into feature/Avaiga#1248-cover-json-data-node-…

aefaa53

…control-new

Update DataNodeViewer.tsx

69aa1ed

THEBOSS0369 added 2 commits November 8, 2024 19:38

Update DataNodeViewer.tsx

319be7b

Merge branch 'develop' into feature/Avaiga#1248-cover-json-data-node-…

53cbc0e

…control-new

Update package-lock.json

5a070a7

FredLL-Avaiga approved these changes Nov 8, 2024

View reviewed changes

FredLL-Avaiga assigned THEBOSS0369 Nov 8, 2024

Added Feature Cover Json Data Node in Data Node control #2164

Are you sure you want to change the base?

Added Feature Cover Json Data Node in Data Node control #2164

Conversation

THEBOSS0369 commented Oct 26, 2024 • edited Loading

THEBOSS0369 commented Oct 26, 2024

quest-bot bot commented Oct 26, 2024

Quest PR submitted!

FredLL-Avaiga left a comment

Choose a reason for hiding this comment

THEBOSS0369 commented Oct 29, 2024

FredLL-Avaiga commented Oct 29, 2024

FredLL-Avaiga left a comment • edited Loading

Choose a reason for hiding this comment

FredLL-Avaiga commented Oct 30, 2024

THEBOSS0369 commented Oct 31, 2024

THEBOSS0369 commented Oct 31, 2024 • edited Loading

THEBOSS0369 commented Oct 31, 2024

FredLL-Avaiga commented Oct 31, 2024

THEBOSS0369 commented Oct 31, 2024

FredLL-Avaiga commented Oct 31, 2024

FredLL-Avaiga left a comment

Choose a reason for hiding this comment

FredLL-Avaiga left a comment • edited Loading

Choose a reason for hiding this comment

THEBOSS0369 commented Nov 1, 2024 • edited Loading

FredLL-Avaiga commented Nov 1, 2024

FredLL-Avaiga commented Nov 1, 2024

THEBOSS0369 commented Nov 1, 2024 • edited Loading

THEBOSS0369 commented Nov 4, 2024

THEBOSS0369 commented Nov 6, 2024

FredLL-Avaiga commented Nov 6, 2024

THEBOSS0369 commented Nov 7, 2024

THEBOSS0369 commented Nov 7, 2024 • edited Loading

FredLL-Avaiga left a comment

Choose a reason for hiding this comment

FredLL-Avaiga Nov 7, 2024

Choose a reason for hiding this comment

FredLL-Avaiga Nov 7, 2024

Choose a reason for hiding this comment

FredLL-Avaiga Nov 7, 2024

Choose a reason for hiding this comment

FredLL-Avaiga commented Nov 7, 2024 • edited Loading

THEBOSS0369 commented Nov 8, 2024

FredLL-Avaiga commented Nov 8, 2024

THEBOSS0369 commented Nov 8, 2024

FredLL-Avaiga commented Nov 8, 2024

THEBOSS0369 commented Nov 8, 2024

FredLL-Avaiga left a comment

Choose a reason for hiding this comment

THEBOSS0369 commented Oct 26, 2024 •

edited

Loading

FredLL-Avaiga left a comment •

edited

Loading

THEBOSS0369 commented Oct 31, 2024 •

edited

Loading

FredLL-Avaiga left a comment •

edited

Loading

THEBOSS0369 commented Nov 1, 2024 •

edited

Loading

THEBOSS0369 commented Nov 1, 2024 •

edited

Loading

THEBOSS0369 commented Nov 7, 2024 •

edited

Loading

FredLL-Avaiga commented Nov 7, 2024 •

edited

Loading