Ability to auto-expand message schema

[derberg]

Description

If one has a scheme that is too large and deep, then the component will render a very large amount of nesting that one has to manually click through to see the deep schema values. To increase the UX, we should have an additional button next to subschema button - a button to show deep nesting.

Solution

The changes should be introduced in the Schema component. If the user presses the extra button, all subschemas should open/close (depending if subschemas are opened/closed).

---

NOTE: Below is old description

@davydog187 commented on Wed Jan 22 2020

Hello and thank you for this great project!

The Problem

I have nested payload structures that are 3-4 levels deep, and it is cumbersome to keep clicking to view the schema.

Potential Solution

It would be nice if there was an option in the generator that has nested structures auto-expanded, maybe with a parameter to specify the level of nesting that you want to stop auto-expanding.

I could be interested in helping contribute, but would need some pointing in the right direction :) Thanks!

---

@fmvilas commented on Wed Feb 05 2020

Hey @davydog187. Thanks for the suggestion. It would indeed be great. Any help would be much appreciated 🙏

[naderafshari]

Hi All @here
This issue is very important to us as we have a number of messages with a large set of fields and nested and complex schema. Browsing through the html page going from one message to the next, not so practical!

I believe the react component (https://github.com/asyncapi/asyncapi-react) has this feature already. It would be great that html-template follows suit.

Also in each message there is an "example" section. It would be great for that section to have the ability to expand and collapse as well. So maybe the example is collapsed by default and can be expanded when user is interested in seeing the example.

Just to give an idea, here is the SMALLEST message we have...

ConfigChngEvnt:
  name: ConfigChngEvntMessage
  description: This message is used for notifying configuration changes on the controlbus.
  bindings:
    amqp:
      contentEncoding: gzip
      messageType: 'user.signup'
      bindingVersion: 0.1.0
  tags:  
    - name: correlationId
      description: click for more information on correlationId 
    - name: subject
      description: click for more information on correlationId 
  payload:
    type: object
    properties:
      # Event Header
      specverson:
        $ref: ../../common/yml/Specversion.yml
      type:
        $ref: ../../common/yml/Type.yml
      source:
        $ref: ../../common/yml/Source.yml
      id:
        $ref: ../../common/yml/Id.yml
      correlationId:
        $ref: ../../common/yml/CorrelationId.yml
      subject: 
        $ref: ../../common/yml/Subject.yml
      eventTime:
        $ref: ../../common/yml/TimestampHub.yml
      datacontenttype:
        $ref: ../../common/yml/Datacontenttype.yml
      dataschema:
        $ref: ../../common/yml/Dataschema.yml

      data:
        type: object
        properties:
          version:
            $ref: ../../common/yml/VersionData.yml
          derpUuid:
            $ref: ../../common/yml/DerpUuid.yml
          derpType:
            description: Configuration type
            type: string
          derpTypeId:
            description: Configuration type ID
            type: string
          derpHubId: 
            description: The ID of the Hub configuration change is ment for
            type: string
          derpOperation:
            description: The type of change to the configuration 
            type: string
            enum:
            - insert
            - update
            - delete
            - prime dc change

where each $ref is pointing to another schema for example, the subject field has the following schema...

name: event subject
description: Optional according to CloudEvents. Used to further identify the contents of the event. This is used heavily in hub events although not required in all events. This attribute appears in the context metadata section of the event in addition to data payload and is particularly helpful in generic subscription filtering scenarios where middleware is unable to interpret the data content. 
type: object
properties:
  hubId:
    type: integer
    format: int16
    minimum: 0
    maximum: 100
  hezId:
    type: integer
    format: int16
    minimum: 0
    maximum: 100
  hmcId:
    type: integer
    format: int16
    minimum: 0
    maximum: 100
  rLinkId:
    type: integer
    format: int16
    minimum: 0
    maximum: 100
  fLinkId:
    type: integer
    format: int16
    minimum: 0
    maximum: 100
  airId:
    type: integer
    format: int16
    minimum: 0
    maximum: 100
  sId:
    type: integer
    format: int16
    minimum: 0
    maximum: 100
  deviceId:
    type: integer
    format: int16
    minimum: 0
    maximum: 100
  deviceName:
        type: string
  instanceId:
    type: integer
    format: int32
    minimum: 0
    maximum: 10000
  ipAddress:
    type: string
    example: "192.168.1.1"
  port:
    type: integer
    format: int32
    minimum: 0
    maximum: 10000
  subsystemName: #[ "tis" | "plwp" | "llwp" | "nlwp" ]
    type: string
    example: "plwp"
  fti:
    type: integer
    format: int32
    minimum: 0
    maximum: 10000
  vpc-name:
    type: string
    example: "virginia"

As you can imagine it can get very overwhelming to scroll through these messages and their example sections. This issue was pointed out as feedback from our team members and it would be great to know if this git issue will be addressed soon.
Thank you in advance

[davydog187]

Unfortunately, I don't think I will be able to address this issue anytime soon. @naderafshari I encourage you to take a stab at it!

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴
It will be closed in 30 days if no further activity occurs. To unstale this issue, add a comment with detailed explanation.
Thank you for your contributions ❤️

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴
It will be closed in 30 days if no further activity occurs. To unstale this issue, add a comment with detailed explanation.
Thank you for your contributions ❤️

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴
It will be closed in 30 days if no further activity occurs. To unstale this issue, add a comment with detailed explanation.
Thank you for your contributions ❤️

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴
It will be closed in 60 days if no further activity occurs. To unstale this issue, add a comment with detailed explanation.
Thank you for your contributions ❤️

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴
It will be closed in 60 days if no further activity occurs. To unstale this issue, add a comment with detailed explanation.
Thank you for your contributions ❤️

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴
It will be closed in 60 days if no further activity occurs. To unstale this issue, add a comment with detailed explanation.
Thank you for your contributions ❤️

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴
It will be closed in 60 days if no further activity occurs. To unstale this issue, add a comment with detailed explanation.
Thank you for your contributions ❤️

[derberg]

I'm closing this one, component changed a lot since this issue was created. If anyone is interested in it, please create new separate issue with detailed explanation (best would be some mocks)

[magicmatatjahu]

@derberg I think that's a nice feature, for that I didn't close it yet 😅 I mean, sometimes it's really cumbersome to expand a very deep JSON Schema, so some "button" to expand all children of given Schema would be very nice.

[magicmatatjahu]

Moving to the asyncapi-react repo.

[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 ❤️

[magicmatatjahu]

Still valid. PR is opened for that issue #514

[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 ❤️

[asyncapi-bot]

🎉 This issue has been resolved in version 1.0.0-next.40 🎉

The release is available on:

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

Your semantic-release bot 📦🚀

[fmvilas]

Closing as it seems the bot failed to do it.