Improve layout of playground

[jonaslagoni]

Reason/Context

It's starting to get a bit tight when it comes to how the playground layout is and I think it can be improved.

I think can focus on these two areas:

1. With more and more options, it's taking up a lot of space.

2. You can never fully see the generated models nor the input making it a weird experience.

[codingmickey]

hi @jonaslagoni, I'm interested in this issue but have some questions before I can try it. Would it look good for 1 to create collapsing headers for the options that way we can save up the space once the user has configured their required options?

For the 2nd part will have to think of some ideas or just can we shift 2nd column to make it a tab switching just above the editor?

[jonaslagoni]

Would it look good for 1 to create collapsing headers for the options that way we can save up the space once the user has configured their required options?

Might be 🤔 Just remember you quite often change between options and looking for the result i.e. how the options changed the outcome.

Not sure if this hinders the user experience?

For the 2nd part will have to think of some ideas or just can we shift 2nd column to make it a tab switching just above the editor?

Not sure i entirely get your suggestion 🤔 Can you clarify a bit more?

[codingmickey]

Might be 🤔 Just remember you quite often change between options and looking for the result i.e. how the options changed the outcome.

Hmm yea, that is there but somewhat similar to this where the user can if needed open the options if not this will have to think about it

Not sure i entirely get your suggestion 🤔 Can you clarify a bit more?

When using VSCode we have different files in tabs, likewise rather than the option can we configure such a thing?

Monaco editor is used if I'm not wrong, so there an option to add tabs in it. (ref)

Edit: This is a bad idea of adding tabs that I suggested, considering it now from the user's experience 😆

[sambhavgupta0705]

Screencast.from.02-06-23.02.36.01.PM.IST.webm

@jonaslagoni for the lower section we can have it like this
and we can add description for this for better understanding

[jonaslagoni]

@sambhavgupta0705 I dont think this improves the layout 🤔

My problems with this solution is that, 1) I can no longer edit the input and directly see the output, 2) it's hard to change the options and easily see the output. I.e. you have to scroll a lot to make it happen.

I think we have to keep the input + output side by side, however in full-screen mode instead (mobile it's gonna suck regardless). Options might need to be a popup in someway, that you can open and close on the output model side 🤔 Not sure whats best here.

Any ideas?

[codingmickey]

I think we have to keep the input + output side by side, however in full-screen mode instead (mobile it's gonna suck regardless). Options might need to be a popup in someway, that you can open and close on the output model side 🤔 Not sure whats best here.

Maybe just a simple modal just above the Generated Models title with a button?
lowering the font size on the editors also disabling mini map as it's (in my opinion) not needed because if needed to scroll would use just the mouse or the slider

[jonaslagoni]

Might be yea @codingmickey 👍

I think we can split up this issue into two, first, we solve the problem of the editor and models being cramped together. I.e. creating a PR with that change first.

After that is merged, we can focus and discuss how to integrate the options better alongside the editor and outputs.

[codingmickey]

Sure, would like to work on this! How should we start?

[sambhavgupta0705]

@jonaslagoni ,we can implement something like this

in the option we can remove the word change as it is self explanatory in options

and would like to know you want to have generate code there or generate models??

[jonaslagoni]

Sure, would like to work on this! How should we start?

Like any other contribution tbh 😄 Nothing special about this one.

[jonaslagoni]

@sambhavgupta0705 that unfortunately does not solve the layout problem with input and output not being next to each other.

[jonaslagoni]

I would 100% focus on that change first, and then we can figure out how to place the options

[sambhavgupta0705]

@jonaslagoni I think I am missing something here.
Can you please specify what's the input here??
\

[jonaslagoni]

@sambhavgupta0705 the input is what you see now in the playground on the left hand side. Where you can edit what is used to generate models

[sambhavgupta0705]

we can do something to use the whole screen,the white left and right space also??

[codingmickey]

Thought of the same but would lose the consistency of the website right? Of the left right spacing

[jonaslagoni]

To me it does not matter about consistency as the playground should be seen as an app in similar fashion as studio is.

[sambhavgupta0705]

okay @jonaslagoni so I think we should implement it as asyncapi.studio.com

[codingmickey]

okay @jonaslagoni so I think we should implement it as asyncapi.studio.com

yea was also thinking something similar to Leetcode's layout. Having a Split view and adjusting the width along with it should do the job

So a complete redesign

[jonaslagoni]

@codingmickey more or less yea 😅

[sambhavgupta0705]

@jonaslagoni I asked the maintainers of the main website about how can we redesign it and it seems that we need to make a lot of changes in the layout as it has been fixed by a css file that it cannot go beyond the star on github button.

[jonaslagoni]

I think it's a oneliner fix @sambhavgupta0705

modelina/modelina-website/src/pages/playground.tsx

Line 9 in c0e0268

<GenericLayout

By passing full

[sambhavgupta0705]

I think it's a oneliner fix @sambhavgupta0705

modelina/modelina-website/src/pages/playground.tsx

Line 9 in c0e0268

<GenericLayout

By passing full

ohhh yess it worked 😅

[sambhavgupta0705]

@jonaslagoni
what about this type of design ,the input and output side by side and the generate model option above them

[sambhavgupta0705]

@jonaslagoni

@jonaslagoni what about this type of design ,the input and output side by side and the generate model option above them !

[jonaslagoni]

That would be nice yea, or at least options to start with 😄

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[sambhavgupta0705]

Still relevant

[devilkiller-ag]

Hi, Can I also help with this issue?

[jonaslagoni]

Definitely @devilkiller-ag 👍

[devilkiller-ag]

Thanks @jonaslagoni, I read the above thread. What's the current status of the work? And from where should I start?

[jonaslagoni]

Have not seen any code yet, so I would assume that you are starting from scratch 🙂

Where you should start? Depends on how you like to work I guess 😄 The way I would do it was to copy the current playground and then make changes in that file by slowly introducing a new layout before changing the logic 🙂

[devilkiller-ag]

Thanks @jonaslagoni. The plan seems great I will share a design wireframe and open a draft PR soon.

[devilkiller-ag]

One more question, By studio did you mean async api studio or the current Modelina Playground? should we keep the layout similar to Async Api Studio (https://studio.asyncapi.com/)

[jonaslagoni]

As described above, https://studio.asyncapi.com/ would probably be a better layout for showing models, input and options yea 😄

[devilkiller-ag]

Great, now I am ready to start 😁

[devilkiller-ag]

Hi @jonaslagoni, this is the rough wireframe that I have created for Modelina Studio, after studying the components of Modelina Playground and AsyncAPI Studio.

The Options and Output Navigation will be in the same position which the user can switch using the buttons on the side panel. What's your opinion on this?

[jonaslagoni]

I think you can skip the outline completely, the input is only there for you to copy/paste an example to see the output fast. Not to edit inputs as Studio offers 🙂

[devilkiller-ag]

Okay, I will start coding now.

[devilkiller-ag]

@jonaslagoni While I run npm run dev to run the modelina-website locally. I got this error:

./src/pages/api/functions/CSharpGenerator.ts:2:0
Module not found: Can't resolve '../../../../../'
  1 | /* eslint-disable @typescript-eslint/no-unused-vars */
> 2 | import { CSharpGenerator, CSharpOptions, csharpDefaultEnumKeyConstraints, csharpDefaultModelNameConstraints, csharpDefaultPropertyKeyConstraints, CSHARP_COMMON_PRESET, CSHARP_JSON_SERIALIZER_PRESET, CSHARP_NEWTONSOFT_SERIALIZER_PRESET } from '../../../../../';
  3 | import { applyGeneralOptions, convertModelsToProps } from './Helpers';
  4 | import { ModelinaCSharpOptions, ModelProps } from '../../../types';
  5 | import { DeepPartial } from '../../../../../lib/types/utils';

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/pages/api/generate.ts

The error suggest that it can't find import { CSharpGenerator, CSharpOptions, csharpDefaultEnumKeyConstraints, csharpDefaultModelNameConstraints, csharpDefaultPropertyKeyConstraints, CSHARP_COMMON_PRESET, CSHARP_JSON_SERIALIZER_PRESET, CSHARP_NEWTONSOFT_SERIALIZER_PRESET } from '../../../../../'; The same error is for all the files in the modelina-website/src/api/functions folder.

Do I need to generate or get these files from somewhere else?

Also, I can't find the "lib" containing types folder for import { DeepPartial } from '../../../../../lib/types/utils';

[asyncapi-bot]

Hello, @devilkiller-ag! 👋🏼

I'm 🧞🧞🧞 Genie 🧞🧞🧞 from the magic lamp. Looks like somebody needs a hand!

At the moment the following comments are supported in issues:

• /good-first-issue {js | ts | java | go | docs | design | ci-cd} or /gfi {js | ts | java | go | docs | design | ci-cd} - label an issue as a good first issue.
  example: /gfi js or /good-first-issue ci-cd

[jonaslagoni]

@devilkiller-ag You have to build the library itself as well, before the website 🙂

[devilkiller-ag]

Hi @jonaslagoni, I am sorry, I am having a little trouble setting up this. I installed all packages for the library and website using 'npm i'. Did you mean building the library with the docker file with npm run docker:build? I did that too. Still facing the same issue. ( I followed all the steps mentioned in the doc here.)

I searched for the same error on Slack but didn't find it.

Can you kindly guide me elaborately on where I am making mistakes and how I can build the library? Again sorry for asking silly questions.

[codingmickey]

Hey @devilkiller-ag did you read this https://github.com/asyncapi/modelina/tree/master/modelina-website#how-to-run-it before starting? run npm run build:modelina before running npm run dev to build the actual library which is powering the website.

My one advice would be to please go through any README.md in the project scope you're trying to contribute next time :)

(Also apologies @jonaslagoni, I wasn't able to help on this issue before.. as I caught up with some other work..)

[devilkiller-ag]

Thanks @codingmickey Now It's running successfully. Somehow I missed that command. I'll be sure to keep your suggestions in mind.

[devilkiller-ag]

I have created the draft PR and will start working on it now.

[asyncapi-bot]

🎉 This issue has been resolved in version 2.0.10 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[asyncapi-bot]

🎉 This issue has been resolved in version 3.0.0-next.8 🎉

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot 📦🚀