Build a Real-Time Feedback Analysis Dashboard Using API Ingestion and WebSocket

Purpose

This guide walks you through creating a Feedback Analysis Dashboard using the BDB Platform, integrating real-time data ingestion and live dashboard updates through the Data Pipeline, Data Center, and Dashboard Designer plugins.

The workflow demonstrates how user feedback entered on a dashboard (via a form) is captured, stored in a database, and reflected in real-time using API Ingestion → DB Writer → WebSocket components.

Business Context

Employee feedback collection is a key HR process that benefits from automation and real-time data visibility. This workflow empowers HR and business users to:

• Select employees from a dropdown.

• Submit text feedback directly from the dashboard.

• Instantly view updated feedback data on a grid—without refreshing the dashboard.

This capability showcases how API Ingestion and WebSocket Producer work together in the BDB Platform to achieve bidirectional, real-time data flow.

Core Flow Overview

Step	Description
1. Data Pipeline	Ingest data using API Ingestion → Store it using DB Writer → Broadcast it in real-time using WebSocket Producer.
2. Data Center	Configure ClickHouse connection and datasets to populate employee names and feedback data.
3. Dashboard Designer	Build a Feedback Form dashboard using Combo Box, Text Box, Label, and Data Grid components with live updates.

Architecture Summary

Dashboard (UI) → API Ingestion → Kafka Event → DB Writer → Kafka Event → WebSocket Producer → Dashboard Grid

---

Key Features

• Real-Time Feedback Flow: Uses API Ingestion for live data capture and WebSocket for real-time updates.

• Interactive Dashboard: Combo Box (Employee Name), Text Box (Feedback), Data Grid (Display Feedback).

• Dynamic Scripting: jQuery + SDK scripting to send payloads and reload components live.

• Seamless Integration: Combines Data Pipeline, Data Center, and Designer modules.

Step 1 – Create the Data Pipeline

1.1 Navigate to the Data Pipeline Plugin

1. From the BDB Homepage, click the Apps Menu → select Data Pipeline.

2. Click Create New Pipeline.

3. Enter a Pipeline Name (e.g., Feedback_Analysis_Pipeline).

4. Choose a suitable Resource Allocation (Medium recommended).

5. Click Save to create the pipeline.

1.2 Add API Ingestion Component

1. Click the + icon on the toolbar to open the Components Palette.

2. Search for API Ingestion and drag it onto the workspace.

3. Configure as follows:

   • Invocation Type: Real-time

   • Ingestion Type: API Ingestion

4. Click Save to store settings.

5. Click Update Pipeline → The system generates a Component Instance ID URL for ingestion.

   • This will serve as the POST API endpoint for feedback submission.

1.3 Add DB Writer Component

1. From the Components Palette, search DB Writer and drag it into the workspace.

2. Configure under:

   • Invocation Type: Batch

   • Driver: ClickHouse

   • Save Mode: Append

   • Host, Port, Username, Password, Database, Table: (As per your ClickHouse configuration)

3. Validate configuration → click Save.

4. Add a Kafka Event before the DB Writer component for message handling.

1.4 Add WebSocket Producer Component

1. From the Components Palette, search WebSocket Producer → drag to canvas.

2. Configure:

   • Invocation Type: Real-time

   • Meta Information: GUID auto-generated

3. Click Save.

4. Connect the DB Writer output → Kafka Event → WebSocket Producer.

Pipeline Flow: API Ingestion → Kafka Event → DB Writer → Kafka Event → WebSocket Producer

1.5 Finalize and Activate

• Click Update Pipeline to save all components.

• Then click Activate Pipeline to start real-time listening.

• Copy the API Ingestion URL and WebSocket GUID for later use in the Dashboard Designer.

Important: The pipeline must remain active to receive feedback and push real-time updates.

Step 2 – Configure Data Connector & Datasets (Data Center Plugin)

2.1 Create ClickHouse Connector

1. Go to Apps Menu → Data Center Plugin.

2. Click Create Connector → choose ClickHouse.

3. Provide:

   • Connector Name: ClickHouse_Feedback_Connector

   • Hostname/IP: As provided by DevOps

   • Username / Password

   • Port: 8123 (default)

   • Database Name: e.g., bdb_hiring

4. Click Save to complete.

2.2 Create Datasets

Dataset 1: Filter Employee

SELECT 'All' AS name
UNION ALL
SELECT DISTINCT name FROM Hiring_data_W4;

• Purpose: Populate Combo Box with employee names.

• Validate → Save → Publish.

Dataset 2: Data Grid Details

SELECT gender, team, skills, name, Feedback, monthly_salary
FROM Hiring_data_W4
WHERE name = @name@ OR 'All' = @name@;

• Purpose: Populate Data Grid with feedback data.

• Validate → Save → Publish.

Step 3 – Build Feedback Dashboard (Dashboard Designer Plugin)

3.1 Create Dashboard

1. Open Dashboard Designer from the Apps Menu.

2. Click New Dashboard.

3. Save with a descriptive name (e.g., Feedback_Analysis_Dashboard).

3.2 Add Core Components

Component	Function	Configuration Summary
Label	Title/Header	Text: Feedback Analysis Dashboard Font: 24pt, Bold, Centered
Combo Box	Select Employee	Dataset: Filter Employee Context: name
Label (Submit)	Acts as Submit Button	Background: Blue, Text: White, Alignment: Center
Text Box	Feedback Input	User enters feedback text
Label (Mandatory Note)	Reminder Text	Message: “Feedback is mandatory”
Data Grid	Display Existing Feedback	Dataset: Data Grid Details
Export (Optional)	Data Export	Allows HR to download feedback data

3.3 Map Datasets to Components

• Combo Box: → Filter Employee

• Data Grid: → Data Grid Details

Verify that selecting an employee dynamically filters Data Grid data.

3.4 Add Data Connections

1. Open Data Connection Tab (right panel).

2. Click Add Data Service → Select ClickHouse_Feedback_Connector.

3. Link Datasets (Filter Employee, Data Grid Details).

4. Save connection settings.

3.5 Add Filtering Script

Filter Combo Box Script:

sdk.setContext('name', changedItem.attributes.Value);
sdk.reload(['C_2']);  // Reload Data Grid on employee change

Data Grid Context Script:

var selected = changedItem;
var rowData = selected.attributes.data[0];
sdk.setContext('gender', rowData.gender);
sdk.setContext('monthly_salary', rowData.monthly_salary);
sdk.setContext('skills', rowData.skills);
sdk.setContext('team', rowData.team);

3.6 Add Submit Button Script

Open Submit Label → Properties → Script, then paste:

debugger;
// Get values
var name = sdk.getContext('filter2'); 
var text = sdk.getWidget('text7').m_textBoxText;

// Get contextual info
var gender = sdk.getContext('gender');
var monthly_salary = sdk.getContext('monthly_salary');
var skills = sdk.getContext('skills');
var team = sdk.getContext('team');

// Log to console
console.log("Submitting Feedback:", { name, text, gender, monthly_salary, skills, team });

// Validate input
if (name && text && text.trim() !== "") {
  var payload = {
    name: name,
    Feedback: text,
    gender: gender || '',
    monthly_salary: monthly_salary || '',
    skills: skills || '',
    team: team || ''
  };

  var settings = {
    url: "https://v10.bdb.ai/ingestion/dataIngestion",  // API Ingestion URL
    method: "POST",
    headers: {
      ingestionId: "be4ad4fd-fcbf-4bc8-9038-2aaa2b0cb2cc",  // Replace with actual ID
      ingestionSecret: "fRWvqUHSVFaBcSx2SWe09WcU5lawQOgzqsE0aGEnoOCbibCdD6ea1Q013khFQssA",
      "Content-Type": "application/json"
    },
    data: JSON.stringify(payload)
  };

  $.ajax(settings).done(function(response) {
    console.log("✅ Feedback submitted:", response);
    alert("Feedback submitted for: " + name);
    setTimeout(() => sdk.reload(['datagrid9']), 2000);
  }).fail(function(jqXHR, textStatus, errorThrown) {
    console.error("❌ Failed to send data:", errorThrown);
    alert("Failed to send data. Check console for details.");
  });
} else {
  alert("⚠️ Please enter feedback before submitting.");
}

3.7 Configure Real-Time WebSocket Data

• Create a WebSocket Data Connector in the dashboard.

• Configure it using GUID, Ingestion ID, and Ingestion Secret generated from your pipeline.

• Link this connector to the Data Grid to automatically refresh feedback when new data arrives.

Step 4 – Test and Validate

4.1 Test Workflow

1. Click Preview in the Dashboard Designer.

   
2. Select an Employee Name from the Combo Box.

3. Type feedback in the Text Box.

4. Click Submit.

5. Observe:

   • A confirmation popup (“Feedback submitted”).

   • The Data Grid refreshes automatically with the new feedback.

4.2 Verify Data Flow

1. Open the Data Pipeline → Event Preview to confirm record ingestion.

2. Verify database table updates in ClickHouse.

3. Observe WebSocket real-time update on dashboard grid.

Outcome

• Real-time Feedback Dashboard successfully built using BDB Platform.

• API Ingestion pipeline automatically triggers feedback insertions.

• DB Writer logs new entries in ClickHouse.

• WebSocket Producer streams live data back to the dashboard.

• Interactive and dynamic visualization without manual refresh.

Best Practices

• Keep your pipeline activated during feedback sessions.

• Use parameterized queries (@name@) in datasets for dynamic filtering.

• Ensure valid credentials for ClickHouse connections.

• Handle empty input validations in Submit Button script.

• Apply color coding for Submit Button and alignment rules for consistent UI.

Business Impact

This workflow enables:

• Real-time HR feedback collection and monitoring.

• Automated database updates with no manual intervention.

• Live feedback visualization improving transparency and decision-making.