Forem: Rohit Pujari

Supercharge your Retool apps with stunning dashboards

Rohit Pujari — Tue, 08 Oct 2024 13:25:06 +0000

Analytics is a must have for modern applications, whether they're internal or customer-facing. This is especially true for enterprise apps that manage internal business processes. Take, for example, an app that allows employees to submit support requests. For these types of business process management applications, it's crucial to have visibility at both individual and aggregate levels. At the individual level, users can leverage peer insights to make informed decisions. At the aggregate level, supervisors can better understand where requests are coming from, identify bottlenecks, and uncover areas for improvement.

Retool is an excellent platform for building departmental apps. It enables you to quickly create, publish, and share enterprise apps without going through layers of IT approvals. When it comes to analytics, Retool provides some in-line charts to show quick insights. For simple use cases, this might be sufficient. However, if you're managing a critical business process that requires you to deliver tailored visibility at multiple levels of organization —where one size doesn't fit all—you'll likely want a personalized dashboard that caters to each stakeholder group.

The most efficient approach you can take to meet this requirement is by decoupling analytics from your core application code. This strategy offers several advantages. Firstly, it substantially enhances your iteration velocity, allowing for rapid adjustments and improvements to your analytics without affecting the main application. Secondly, it enables you to deploy changes much more quickly than traditional integrated approaches. This separation of concerns leads to increased flexibility and maintainability of both your application and analytics components. Furthermore, it allows specialized teams to work on each part independently, potentially improving overall quality and innovation.

This is where the Sempahor + Retool integration shines. You can now effortlessly launch fully interactive dashboards within your Retool apps in a few simple steps. This approach not only streamlines the development workflow but also ensures your analytics capabilities can grow with your application needs, minimizing friction. Let's see it in action.

Step 1: Request a free trial here.

Once you log in, you'll see a demo dashboard created for you. With Semaphor, you can connect to any SQL-compatible databases, including CSV files, Parquet files in Amazon S3, or responses from REST APIs.

Step 2: Create a dashboard using natural language, SQL, or Python.

The Semaphor console allows you to customize the dashboard's appearance—including colors, fonts, corner styles, and layouts for various devices—giving you precise control over how it renders in your app.

Step 3: Publish it as a custom component to your Retool App.

Clone the template repository and install dependencies

git clone https://github.com/rohitspujari/retool-semaphor-component.git
cd retool-semaphor-component
npm install

Initialize the component library

npx retool-ccl init

npx retool-ccl init
? What name would you like to give your library of components? semaphor
? What description would you like to give ? make my data dance and insights shine

Creating new library in the Retool backend..
...Succesfully made new library!
Writing updates to package.json

Start the component in dev mode, and go to the Retool console. You can then search for seamphor in the components section and drag it onto your canvas.

In the component properties, provide semaphor dashboard Id and secret to render the dashboard.

npx retool-ccl dev

Once you are happy with the template, you can publish it to Retool.

npx retool-ccl deploy

That's it! You now have a fully interactive dashboard running inside your Retool app within minutes. If you have any questions feel free to drop us a note at support@semaphor.cloud

Multi-tenant analytics for Next.js Apps

Rohit Pujari — Sun, 22 Sep 2024 15:42:48 +0000

In the previous blog post, we explored how you can render interactive analytics in your Next.js app with just a few lines of code.

In this post, we'll discuss how you can deliver a multi-tenant analytics experience in your Next.js app. Specifically, we'll examine how to serve the same dashboard to multiple tenants (clients or organizations) while keeping each tenant's data isolated.

Semaphor offers two ways to implement multi-tenancy: connection-level security and row-level security. Connection-level security allows you to modify parts of the connection string (e.g., database name or user) at runtime. This is ideal if you have dedicated databases, database users, or folders (in the case of Amazon S3) for each client. Row-level security, on the other hand, provides logical isolation within a single shared table, displaying only the rows relevant to each tenant.

In this post we’ll focus on multi-tenancy using row-level security. Imagine you're a SaaS company providing embedded dashboards to multiple tenants, such as Tenant A, Tenant B, and Tenant C. These companies access their dashboards from within your product, but they can see only their own data, depending on the tenancy and the user.

For illustration, let's assume a simple data isolation scenario:

Tenant A users can only see data for eastern US states (NY, CT, FL)
Tenant B users can see data for central US states (IL, TX, OH)
Tenant C users can see data for western US states (CA, WA, NV)

Let's see how we can implement this in Semaphor.

Before we begin, we assume that you already know how to integrate Semaphor dashboard into your Next.js app, or you can follow the instructions here to bootstrap a demo app.

To get started quickly, just clone this Git repository and run it locally. You’ll have a demo dashboard with row-level security set up in no time.

git clone https://github.com/rohitspujari/nextjs-semaphor-rls-demo.git
cd nextjs-semaphor-rls-demo
npm install
npm run dev

In the remainder of the post, we'll highlight the steps needed to enable row-level security.

Step 1: Define Row-Level Policy in Semaphor Console.

Navigate to your project in the Semaphor console. You can request a free trial here. You should see a "demo project" created for you when you first logged in. Under the "Security" tab, navigate to "Row/Column Level Security." Create a new policy as shown below. Make sure to allow all columns.

Step 2: Generate AuthToken with this policy.

In Semaphor, the AuthToken defines what a user can see on the dashboard. When rendering a dashboard for a specific tenant, you must include the row-level policy when you generate their AuthToken. The row-level security policy acts like a "hard" filter, restricting user's view to only the rows permitted by the policy.

For demonstration, we have used URL search parameters to determine which tenant's dashboard to render. In a production environment, you would likely use authentication logic to derive these parameters.

Tenant A: http://localhost:3000/?tenant=a

Tenant B: http://localhost:3000/?tenant=b

Tenant C: http://localhost:3000/?tenant=c

export const revalidate = 0; // This is to disable the Nextjs caching behavior.
import { AuthToken } from 'semaphor';
import DashboardComponent from './components/dashboard-component';
import { postRequest } from '@/server-utils';

const DASHBOARD_ID = 'd_a1a5275b-5ded-411c-a2bb-bfafd55e7b26'; // Replace with your actual dashboard ID
const DASHBOARD_SECRET = 'ds_13353da5-e413-46cb-a8af-fd58192aab11'; // Replace with your actual dashboard secret
const TOKEN_URL = 'https://semaphor.cloud/api/v1/token';

export default async function HomePage({
  searchParams,
}: {
  searchParams: { [key: string]: string | string[] | undefined };
}) {

  // extract tenant from search parameter
  const tenant = searchParams.tenant as string | undefined;

  // select the states
  let states: string[] = [];
  switch (tenant) {
    case 'a':
      states = ['New York', 'Connecticut', 'Florida'];
      break;
    case 'b':
      states = ['Texas', 'Illinois', 'Ohio'];
      break;
    case 'c':
      states = ['California', 'Nevada', 'Washington'];
      break;
    default:
      states = [];
      break;
  }

  // create a policy with the above states
  const rowPolicy = {
    name: 'states',
    params: {
      states,
    },
  };

    // generate auth token with the policy
  const token = await postRequest<AuthToken>(TOKEN_URL, {
    dashboardId: DASHBOARD_ID,
    dashboardSecret: DASHBOARD_SECRET,
    rcls: states.length > 1 ? [rowPolicy] : [], // only pass the row policy if there are multiple states
  });

  return (
      <DashboardComponent key={token.accessToken} authToken={token} />;
  );
}

With these simple modifications, you can enable multi-tenancy for your dashboard, allowing different clients or organizations to access their specific data through a single dashboard instance.

This approach ensures data isolation and customized views for each tenant, enhancing both security and user experience.

If you have any questions, feel free to get in touch with us at support@semaphor.cloud.

Fully-interactive analytics for your Next.js App

Rohit Pujari — Thu, 19 Sep 2024 15:00:22 +0000

If you're looking to launch fully-interactive analytics in your app but don't want to take on the scope of building it all in-house — which can be monumental (read here to learn why) — you've come to the right place.

The fastest way to launch analytics in your product is by decoupling analytic content from your application code. Why? Because this separation doubles your shipping velocity. It allows you to modify analytics independently — adding new visuals or tweaking existing ones — without touching your product code. As a result, your dashboards can evolve without requiring you to rebuild and redeploy your app.

This approach creates two parallel, non-blocking paths for executing your product roadmap. Dashboard development is a highly iterative process that can occur independently without involving your core product team. It also scales seamlessly as the scope of your product grows. Your product engineers can focus on developing core features, while customer success teams create personalized analytics experiences for clients. These complementary, non-blocking efforts allow you to ship faster and in a more modular way. Let's see it in action.

For a quick start, you can simply clone this Git repository and run it locally on your machine as shown below. This repository includes a demo dashboard.

git clone https://github.com/rohitspujari/nextjs-semaphor-demo.git
cd nextjs-semaphor-demo
npm install
npm run dev

The remainder of this blog post provides a detailed, step-by-step walkthrough of the code.

Step 1: Request Semaphor free trial here.

Once you log in, you'll see a demo dashboard created for you. With Semaphor, you can connect to any SQL-compatible data source, including CSV files, Parquet files in Amazon S3, or responses from REST APIs.

Step 2: Create a dashboard using natural language, SQL, or Python.

Step 3: Integrate the dashboard into your Next JS app.

Create a new Next.js app. Skip this step if you already have an existing one.

npx create-next-app@latest

✔ What is your project named? nextjs-semaphor-demo
✔ Would you like to use TypeScript? Yes
✔ Would you like to use ESLint? Yes
✔ Would you like to use Tailwind CSS? Yes
✔ Would you like to use `src/` directory? Yes
✔ Would you like to use App Router? (recommended) Yes
✔ Would you like to customize the default import alias (@/\*)? No

cd nextjs-semaphor-demo

Install the Semaphor package and start the app.

npm i semaphor@latest
npm run dev

Now create a client component dashboard-component.tsx as a container for your Semaphor dashboard. Note that the Semaphor dashboard is designed as a client component because it needs to support UI interactions such as drop-downs and on-click events.

src/components/dashboard-component.tsx

'use client';
import dynamic from 'next/dynamic';
import { type AuthToken } from 'semaphor';
import 'semaphor/style.css'; // IMPORTANT! Impport the CSS file. This is the default style, you can customize it.

// Dynamic import to prevent server-side rendering.
const Dashboard = dynamic(
  () => import('semaphor').then((mod) => mod.Dashboard),
  {
    ssr: false,
  }
);

type DashboardProps = {
  authToken: AuthToken;
};

export default function DashboardComponent({ authToken }: DashboardProps) {
  return <Dashboard authToken={authToken} />; // one line of code to render the dashboard
}

The DashboardComponent accepts AuthToken as a prop, authorizing the user to view the dashboard. This token-based approach allows dynamically display different dashboard depending on your app user or tenant.

To generate the AuthToken you need dashboard credentials. You can get your dashboard id and dashboard secret from the Semaphor console.

IMPORTANT: You must use the server-side environment to request the token. This prevents the accidental exposure of the dashboard secret in client-side code. In Next.js, we can easily do that with a server-side function as shown below.

This function makes a simple fetch call to the Seamphor endpoint to generate the token. The use server notation ensures that this code only runs on the server.

src/server-utils.ts

'use server';

export async function postRequest<T>(
  url: string,
  data: Record<string, any> = {}
): Promise<T> {
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });

    if (!response.ok) {
      const errorResponse = await response.json();
      console.error(
        `Error: ${response.status} - ${response.statusText}`,
        errorResponse
      );
      throw new Error(`Request failed with status ${response.status}`);
    }

    const jsonResponse: T = await response.json();
    return jsonResponse;
  } catch (error) {
    console.error('Network or processing error:', error);
    throw error;
  }
}

We're almost done. In your page.tsx file, you can use the postRequest server function as shown below.

Note that we use export const revalidate = 0 at the top of the page to tell Next.js not to cache the token during build time. This is important because Semaphor tokens expire every 30 minutes.

src/app/page.tsx

export const revalidate = 0; // This is to disable the Nextjs caching behavior.
import { AuthToken } from 'semaphor';
import DashboardComponent from './components/dashboard-component';
import { postRequest } from '@/server-utils';

const DASHBOARD_ID = 'd_a1a5275b-5ded-411c-a2bb-bfafd55e7b26'; // Replace with your actual dashboard ID
const DASHBOARD_SECRET = 'ds_13353da5-e413-46cb-a8af-fd58192aab11'; // Replace with your actual dashboard secret
const TOKEN_URL = 'https://semaphor.cloud/api/v1/token';

export default async function HomePage() {
  // TODO: perform user authentication here

  // generate token for the user
  const token = await postRequest<AuthToken>(TOKEN_URL, {
    dashboardId: DASHBOARD_ID,
    dashboardSecret: DASHBOARD_SECRET,
  });

  return <DashboardComponent authToken={token} />;
}

That's it! Refresh your page and see your fully interactive dashboard, powered by Semaphor, come to life.

In our next blog post, we'll explore how you can add multi-tenancy and row-level security to your Semaphor dashboards.

If you have any questions, feel free to drop us a note at support@semaphor.cloud

The Right Way to Approach Customer-Facing Analytics

Rohit Pujari — Thu, 15 Aug 2024 02:42:30 +0000

Once you deliver on your core product promise, the next thing your customers will undoubtedly ask is better visibility and reporting around the business process your software enables. They want to track metrics, trends, and patterns around the “thing” your software helps them manage. At its core, almost every product we use helps us manage something we care about, whether it’s calls, schedules, shipments, meetings, jobs, interviews, people, [pick your domain].

This need for insight is universally true for both internal and customer-facing apps. If you’re providing Saas, offering robust analytics right into your product can set you apart from the competition and even open up new revenue streams. But launching customer-facing analytics can lead you to false starts and wasted effort if you underestimate the following:

1) The Analytics Scope Snowballs

What starts as a simple feature request often evolves into a substantial project — sometimes even larger than the core product itself. For startups and mid-sized companies, this can be a real problem. Every time a customer asks for a new visual or a tweak to a dashboard, it turns into a new product feature request (PFR) for your engineering team and requires a full code build, test, release cycle.

2) Analytics isn’t one size fits all

From my consulting days, I’ve learned that every organization, team, or client wants a slightly different view of the same data. And they’re not wrong — users have their own goals to meet and have preferences on how they want to see their data, or narrow down to only what’s relevant to them. A read-only canned dashboard is hardly ever useful.

3) Security and Performance: Non-Negotiables

When you externalize analytics, i.e, make your data accessible to users outside of your organization. you need to think about how to best isolate the data. With multiple users — and potentially multiple organizations — using your app, you’ll need to build a multi-tenant architecture that spans different analytical stores. If you are presenting data from object stores like S3, you need to have on-demand caching to maintain acceptable performance.

A lot of companies think they can handle this in-house. After all, how hard can it be to add a few charts, right? But here’s the thing: when you give users a chart, they’ll want a dashboard. Give them a dashboard, and they’ll ask for filters. Before you know it, they’ll be asking for custom views, and then AaaayEyee (AI). Suddenly, you’re spending more time on analytics than on your actual product.

One of our customers summed it up well:

“Analytics is a necessary part of our product, but it shouldn’t come at the expense of slowing down our core roadmap.”

The Common Approach (And Why It Doesn’t Work)

So, what do most companies do? They turn to their old-guard BI tools. The legacy BI vendors are more than happy to shrink wrap their whole product into an iframe and tell you to just drop it into your app. This approach works if you are embedding a dashboard in wikis or small internal apps. But if you’re building a customer-facing app, this approach can lead to some serious issues.

Bloated Apps: Those iframes come with a lot of unnecessary code, which can bloat your app. Why? because all those legacy BI tools were NEVER built to live inside of your apps. They were built as stand alone apps for internal BI needs.
A Frankenstein Experience: Your app can end up looking like a disjointed mess, with limited styling options and a user experience that doesn’t respond well to different screen sizes. Every small customization seems like a band-aid fix, piling on more inconsistencies and leaving your app feeling more fragmented with each change.
Opaque and Restrictive: These tools often hold your data hostage, requiring proprietary tech to view analytics. You might not even be able to view the underlying business logic of the chart, let alone modify it. You will be forced to do things the BI way, and not the way your application expects. Plus, managing users in both the BI tool and your app can become a nightmare. So the next time you hear the term “Unified BI,” think “Bloated BI.”

The Right Approach

Decouple Analytics from Product Code: This decoupling allows you to 2X your shipping velocity. When you separate your product codebase from analytics, you can move faster. Your engineering team can focus on the core features, while your customer success team can rapidly prototype and launch new experiences without touching the product code.
Go for Open Standards: Choose technologies where you can see and control the code behind your analytics. This transparency gives you the flexibility to deliver exactly what your customers need.
Use
Use Framework-Specific Components: Choose a tool that’s designed from the ground up to live inside of your app as a first class citizen. Use native components such as React, Vue, or Web Components. This approach lets you create a responsive, cohesive experience for your users.
Stick to Modern Web Standards: HTML, JavaScript, and CSS aren’t going anywhere. While nifty Python-based wrappers like streamlit are great for throwaway prototypes, when it’s time to ship, native web technologies perform better and are easier to maintain and customize. Do it the right way the first time.
Keep It Simple and Flexible: Most BI tools are overly complex, requiring too many steps to do something simple. Less is sometimes more when it comes to customer-facing analytics. The analytics experience you provide must be intuitive and shouldn’t require training.

There’s a new wave of products — like Semaphor — that are taking this approach.

Introducing Semaphor

Semaphor is a fully customizable analytics package for delivering user-facing analytics in your apps.

We took our inspiration from Stripe! Just like when you want to collect payments in your app, you don’t build a full-blown payments collection infrastructure from scratch. You use something like Stripe! With just a few lines of code, you can start collecting payments. This way, you can focus on what makes your product unique.

We do the same for analytics. If you want to launch fully-responsive, AI-powered, interactive analytics in your app, you use Semaphor. With just a few lines of code, you can deliver branded analytics in your app. You can style almost everything to precisely match the look and feel of your app.

Semaphor offers a canvas experience where users can view a set of visuals and engage with a dashboard conversationally. As they discover new insights, they can easily add them to the existing dashboard and personalize the experience. This is fundamentally different from the read-only dashboards provided by legacy BI vendors.

Here’s what Semaphor brings:

Open Standards: We understand SQL and Python and you get complete transparency and control over how every insight is generated. No lock-in, just flexible, powerful analytics.
Plug and Play: Use framework-specific components like React, Vue, or Web Components to render insights directly into your product — no clunky iframes!
Deep Customization: Tailor every aspect of your dashboard — styles, fonts, colors — to match your brand. Bring your own visuals if you like and create layouts that look great on any device.
Real-Time Insights: Deliver insights at the speed of your business — as fast as your data comes in, and wherever it comes from, whether it is databases, APIs, or other sources.
Dashboard-as-Code: Manage your dashboards as code — version control and automate deployments just like any other software. Your dashboards always remain secure, version-controlled, and consistently backed up.

If you want to learn more, set up a demo here.

The fastest way to launch customer-facing analytics in your apps.

Rohit Pujari — Mon, 29 Apr 2024 20:12:31 +0000

You're cruising along, building your SaaS, and then BAM! Your customers hit you with a request for better visibility into the "thing" your software does. Whether it's processing payments, shipments, or refreshments, no matter what your business is, your customers want to know how they can get the most value out of your app.

You might think, "No sweat, let's throw in some charts and call it a win." But hold onto your hats because your users are about to throw you a curveball. They see a chart, they want a dashboard. You give them a dashboard, they demand filters. Next, they're itching for some custom views. Before you know it, you're spending more time on the analytics than the actual product itself.

That's where Semaphor comes to the rescue. It's a fully-customizable analytics package that lets you whip up interactive dashboards in your product in days, not months, and it's as simple as one line of code.

Show me the magic

You're probably wondering, "Alright, how does this magic happen?" It's as easy as 1-2-3.

1) Hook up your data source: Whether it's any SQL database or your preferred API, we've got you covered.

2) Speak naturally or go old school with your own SQL. And get this, we even support SQL over API – mind officially blown! 🤯 From there, turn that SQL into a visual.

3) Once you've crafted your masterpiece of a dashboard, commit it to Github, publish it, and voila! With just one line of code, this dashboard is ready to be woven into your app. Tailor it with your CSS so it looks like it was born and raised in your app.

<div>
   <h2>My cool dashboard</h2>
   <Dashboard authToken={authToken} id={DASHBOARD_ID} />
</div>

What once took months, maybe even longer, is now a matter of hours, thanks to Semaphor. But hold up! What about security? Fear not! We've got you covered with row and column level security to ensure sure John see's John's business and not Janes!

We are inviting trailblazers and early adopters. If you think your app needs some analytics facelift, join our waitlist by requesting access, and don't forget to explain your use case.