Missing "Visualize" Tab in Bruno 1.20.4

[drchiodo]

I have checked the following:

• I use the newest version of bruno.
• I've searched existing issues and found nothing related to my issue.

Describe the bug

Description:
In past version of Bruno , I used a script to generate previews of images received via API. This script was displayed in the "Visualize" tab. However, after updating to Bruno 1.20.4, the "Visualize" tab has disappeared, and I can no longer see the image previews.

Steps to Reproduce:

• Use the script provided below to generate image previews.
• Check for the "Visualize" tab in Bruno 1.16 (it should be visible).
• Update to Bruno 1.20.4.
• Notice that the "Visualize" tab is no longer available.

Expected Behavior:
The "Visualize" tab should be present in Bruno 1.20.4, allowing users to see visual previews.

Actual Behavior:
The "Visualize" tab is missing in Bruno 1.20.4, preventing the display of previews.

Screenshots:

Script Used:

let items = "";
try {
  items = res.body;
  let page = `
    <table style="background-color: #DFDFDF; border-spacing: 15px;">
      <tr><td><strong>Image</strong></td><td><strong>Details</strong></td></tr>
    `;

  items.forEach(item => {
    page += `
        <tr>
          <td rowspan="3">
            <img src="${item.mediaUrl}?width=120" alt="Media Image"><br>
          </td>
          <td>Name</td>
          <td><strong>${item.name}</strong><br></td>
        </tr>
        <tr>
          <td>MediaID</td>
          <td><strong>${item.mediaId}</strong><br>
          </td>
        </tr>
        <tr>
          <td>MediaUrl</td>
          <td><strong>${item.mediaUrl}</strong><br>
          </td>
        </tr>
    `;
  });

  page += '</table>';
  bru.visualize(page);
} catch (e) {
  bru.visualize(html)
}

Environment:

• Bruno version: 1.20.4 Ultimate
• Operating System: Windows 11 - 23H2 - build 22631.3880

.bru file to reproduce the bug

meta {
  name: ***
  type: http
  seq: 1
}

get {
  url: {{baseUrl}}/medias?q=***&businessUnit=***&status=Available&page=0&size=20
  body: none
  auth: none
}

params:query {
  q: ***
  businessUnit: ***
  status: Available
  page: 0
  size: 20
  ~references: 
  ~ean: 
  ~adeocode: 
  ~localcode: 
  ~adeotype: 
  ~mediaType: 
  ~category: 
  ~subcategory: 
  ~startCreationDate: 
  ~endCreationDate: 
  ~state: 
}

headers {
  X-Gateway-APIKey: {{$secrets.default.X-Gateway-APIKey}}
}

script:post-response {
  let items = "";
  try {
    items = res.body;
    let page = `
      <table style="background-color: #DFDFDF; border-spacing: 15px;">
        <tr><td><strong>Image</strong></td><td><strong>Details</strong></td></tr>
      `;
  
    items.forEach(item => {
      page += `
          <tr>
            <td rowspan="3">
              <img src="${item.mediaUrl}?width=120" alt="Media Image"><br>
            </td>
            <td>Name</td>
            <td><strong>${item.name}</strong><br></td>
          </tr>
          <tr>
            <td>MediaID</td>
            <td><strong>${item.mediaId}</strong><br>
            </td>
          </tr>
          <tr>
            <td>MediaUrl</td>
            <td><strong>${item.mediaUrl}</strong><br>
            </td>
          </tr>
      `;
    });
  
    page += '</table>';
    bru.visualize(page);
  } catch (e) {
    bru.visualize(html)
  }
}

Screenshots/Live demo link

in Bruno 1.16 i had this

this tab is disappeared from Bruno 1.20.4

[lohxt1]

there was an update in the bru.visualize api in order to support different visualization types (table, htmlstring)

before:

bru.visualize(htmlString);

after:

bru.visualize('html', {
  name: "HTML Table",
  content: htmlString
})

[lohxt1]

also i see that you are trying to visualize response data as a table

you can try something like below, which gives you search and filters options

const rowData = [
    {
      "id": 1,
      "name": "John Doe",
      "age": 30,
      "email": "john@example.com",
      "city": "New York"
    },
    {
      "id": 2,
      "name": "Jane Smith",
      "age": 25,
      "email": "jane@example.com",
      "city": "Los Angeles"
    },
    {
      "id": 3,
      "name": "Bob Johnson",
      "age": 35,
      "email": "bob@example.com",
      "city": "Chicago"
    },
    {
      "id": 4,
      "name": "Alice Williams",
      "age": 28,
      "email": "alice@example.com",
      "city": "San Francisco"
    }
  ];
        
const columnDefinitions = [
    { field: "name", filter: true, floatingFilter: true },
    { field: "age", filter: true, floatingFilter: true },
    { field: "email", filter: true, floatingFilter: true },
    { field: "city", filter: true, floatingFilter: true }
];

bru.visualize('table', {
  name: 'table1',
  provider: 'ag-grid',
  props: { 
    rowData, 
    columnDefinitions
  }
});

[drchiodo]

Thanks a lot @lohxt1 lohxt1! Works perfectly.

do you know where i can find docs about bru.visualize?

[itarci]

When I do an example like lohxt1, the Bruno program stops working and displays the message “Oops! Something went wrong”.
I have no experience in these scripts, can anyone tell me what I'm probably doing wrong?
Is there a “require” missing?

[helloanoop]

@itarci The Visualize feature is a part of our paid offering. You should have the Golden Edition for this feature to be enabled.

The issues related to visualisation has been fixed in the latest releases. Please reopen this ticket if the issue persists.

[nosher150]

@helloanoop - I've got the Golden Edition (well worth buying it) but can't find any documentation for bru.visualize.

Where can I find documentation about it?

[helloanoop]

Hey @nosher150 !
Here are the docs: https://docs.usebruno.com/advanced-guides/visualize