Added Feature Cover Json Data Node in Data Node control

[THEBOSS0369]

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]

@quest-bot loot #1248

[quest-bot]

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

[THEBOSS0369]

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]

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]

please fix the failing checks

[THEBOSS0369]

please fix the failing checks

Yes sir i will fix these errors.

[THEBOSS0369]

@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]

• example of the data_node control usage with json

Sir, I will be adding this in the next commit

[FredLL-Avaiga]

@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]

@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]

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

[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

[THEBOSS0369]

@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]

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]

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

[THEBOSS0369]

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

[FredLL-Avaiga]

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"

[THEBOSS0369]

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

[FredLL-Avaiga]

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]

@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]

No just remove the collapse properly

[THEBOSS0369]

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

[FredLL-Avaiga]

Let's see if @FabienLelaquais liked it

[FredLL-Avaiga]

Can you merge this @jrobinAV ?

[THEBOSS0369]

Hey @FredLL-Avaiga ! There was an extra comma in json file which was not letting the test passed now i have removed it and test are Passing.

[FredLL-Avaiga]

where is the json file ?

[FredLL-Avaiga]

I guess it should be renamed datanode_viewer_json.json
And that would be why the demo-* file was ignored

[THEBOSS0369]

@FredLL-Avaiga Sir all tests passed if its ready to merge please merge this. Otherwise merge conflict will create the issue 🙂

[FredLL-Avaiga]

Another try @jrobinAV