DEV Community: Muhammed Vengalath

Shadcn ui - inside

Muhammed Vengalath — Mon, 29 Sep 2025 07:48:13 +0000

Issue:

If there is a DropdownMenu component inside the Dialogue, and both the Dialogue and DropdownMenu are opened, then on clicking outside the Dialogue or closing the Dialogue will cause the whole app to freeze and cannot interact further.

Reason:

When the Dialogue is closed, the DropdownMenu didn't get the chance to close, thus even though the Dialogue and DropdownMenu are unmounted the state of DropdowndMenu hasn't changed, causing the app to inert/ Unclickable.

Solution:

If any dropdown menu content is currently mounted, prevent the dialog from closing.
This avoids a race where the dialog closes first and leaves the page inert/unclickable because the dropdown didn't get a chance to close itself.
Add a check to prevent the Dialogue from closing if there is dropdownMenu mounted

     <DialogContent
        onInteractOutside={(event) => {
          // Prevent closing the dialog if a dropdown is currently open.
          // This check works with your DropdownMenu wrapper because it sets data-slot attributes.
          const hasOpenDropdown =
            document.querySelector('[data-slot="dropdown-menu-content"]') !== null ||
            document.querySelector('[data-slot="dropdown-menu-sub-content"]') !== null;

          if (hasOpenDropdown) {
            event.preventDefault();
          }
        }}
      >

Full code

import * as React from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
// If you use your local wrapper from `components/ui/dropdown-menu`
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from "@/components/ui/dropdown-menu";

export function DialogWithDropdownExample() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open Dialog</Button>
      </DialogTrigger>

      <DialogContent
        onInteractOutside={(event) => {
          // Prevent closing the dialog if a dropdown is currently open.
          // This check works with your DropdownMenu wrapper because it sets data-slot attributes.
          const hasOpenDropdown =
            document.querySelector('[data-slot="dropdown-menu-content"]') !== null ||
            document.querySelector('[data-slot="dropdown-menu-sub-content"]') !== null;

          if (hasOpenDropdown) {
            event.preventDefault();
          }
        }}
      >
        <DialogHeader>
          <DialogTitle>Dialog with Dropdown</DialogTitle>
        </DialogHeader>

        <div className="flex items-center gap-3">
          <span>Choose an option:</span>

          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline">Open dropdown</Button>
            </DropdownMenuTrigger>

            <DropdownMenuContent align="end">
              <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
                Action 1
              </DropdownMenuItem>
              <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
                Action 2
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </DialogContent>
    </Dialog>
  );
}

node-canvas registerFont() windows solution - custom fonts loading to canvas

Muhammed Vengalath — Fri, 26 Sep 2025 17:56:25 +0000

https://github.com/Muhammed770 🖊️

There is a known issue since v2.10.2 ,the registerFont() is not working in windows.

The font register was used to load custom fonts to node-canvas.

Here is the actual way to load font to canvas using registerFont()

const merri = path.join(fontsPath, 'Merriweather-Regular.ttf');
registerFont(merri, {
    family: 'AppMerriweather',
    weight: 'normal',
    style: 'normal',
});

This works for Mac, but not on windows.

so the solution is to

1> when app starts, copy the font files to %LOCALAPPDATA%\Fonts

2> Using script, install and register the font

3> the registered fonts now will be available to all processes, that means when we create an instance of canvas using node-canvas, we will get the system installed font

Full Code for windows font Installation:

import fs from 'node:fs';
import path from 'node:path';
import os from 'node:os';
import { execFileSync } from 'node:child_process';

// Windows font install locations and registry keys
const WINDOWS_FONTS_DIR = path.join(process.env.WINDIR || 'C:\\Windows', 'Fonts');

// Registry additions require admin to write to HKLM. We'll prefer per-user font install via shell API fallback:
// Strategy:
// 1) Copy TTF files to %WINDIR%\Fonts if we have permission; else fall back to %LOCALAPPDATA%\Fonts (Windows 10+ supports per-user fonts)
// 2) For per-user fonts, ensure directory exists and copy there
// 3) We cannot rename the internal font family from file; we have figured out the family names by powershell script
// Add-Type -AssemblyName System.Drawing
// (New-Object System.Drawing.Text.InstalledFontCollection).Families |
//   ForEach-Object { $_.Name } | Where-Object { $_ -match 'Merriweather' }

function ensureDirSync(dir: string) {
    if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
}

function copyIfNeeded(src: string, destDir: string) {
    ensureDirSync(destDir);
    const dest = path.join(destDir, path.basename(src));
    try {
        if (fs.existsSync(dest)) {
            const srcStat = fs.statSync(src);
            const dstStat = fs.statSync(dest);
            if (srcStat.size === dstStat.size) return dest; // likely already installed
        }
        fs.copyFileSync(src, dest);
        return dest;
    } catch {
        return null;
    }
}

export type InstallResult = {
    installedTo: string[];
    skipped: string[];
    errors: string[];
    registry: string[];
};

export async function installWindowsFontsIfNeeded(fontsDir: string): Promise<InstallResult> {
    const result: InstallResult = { installedTo: [], skipped: [], errors: [], registry: [] };

    if (process.platform !== 'win32') {
        return result;
    }

    try {
        const candidates = [
            { file: 'Roboto-Regular.ttf', regName: 'Roboto (TrueType)' },
            { file: 'Merriweather-Regular.ttf', regName: 'Merriweather (TrueType)' },
            { file: 'RobotoMono-Regular.ttf', regName: 'Roboto Mono (TrueType)' },
        ];

        // Prefer per-user fonts directory when not elevated
        const perUserFontsDir = path.join(process.env.LOCALAPPDATA || path.join(os.homedir(), 'AppData', 'Local'), 'Microsoft', 'Windows', 'Fonts');

        for (const item of candidates) {
            try {
                const src = path.join(fontsDir, item.file);
                if (!fs.existsSync(src)) {
                    result.skipped.push(`${src} (missing)`);
                    continue;
                }

                // Try %WINDIR%\Fonts first
                let installedPath = copyIfNeeded(src, WINDOWS_FONTS_DIR);
                if (!installedPath) {
                    // Fallback to per-user fonts directory
                    installedPath = copyIfNeeded(src, perUserFontsDir);
                }

                if (installedPath) {
                    result.installedTo.push(installedPath);
                    // Add per-user registry entry so Windows treats as installed
                    try {
                        const regKey = 'HKCU\\Software\\Microsoft\\Windows NT\\CurrentVersion\\Fonts';
                        // Use full path for per-user fonts registrations
                        execFileSync('reg', ['add', regKey, '/v', item.regName, '/t', 'REG_SZ', '/d', installedPath, '/f'], { stdio: 'ignore' });
                        result.registry.push(`${item.regName} -> ${installedPath}`);
                    } catch (e: any) {
                        result.errors.push(`Registry add failed for ${item.regName}: ${e?.message || String(e)}`);
                    }
                } else {
                    result.errors.push(`Failed to copy ${path.basename(src)} to Fonts directories`);
                }
            } catch (e: any) {
                result.errors.push(`${item.file}: ${e?.message || String(e)}`);
            }
        }
    } catch (e: any) {
        result.errors.push(e?.message || String(e));
    }

    return result;
}

for verification you may check whether the font is installed or not using

⊞ Win + R
shell:fonts

This will display the installed fonts.

if you are installing single font files like the one above, you may not find the family name of the font. You may check it by the below power shell command (replace the font name)

Add-Type -AssemblyName System.Drawing
 (New-Object System.Drawing.Text.InstalledFontCollection).Families |
  ForEach-Object { $_.Name } | Where-Object { $_ -match 'Merriweather' }

output: Merriweather 36pt 36pt

so this font family you have to use in the canvas

import { createCanvas } from 'canvas';

const canvas = createCanvas(0, 0); //no need to render to screen
const ctx = canvas.getContext('2d');

ctx.font= '20px 'Merriweather 36pt 36pt'';  //Place the Font family name inside ''

Analyzing API Call Trends with Prisma and Next.js: Grouping by Week, Month, or Year

Muhammed Vengalath — Sun, 19 Jan 2025 18:24:07 +0000

Hey, this post is exactly what I needed when I was trying to figure out how to use Prisma to group data by day, month, or year. I had to go through various documentation to understand how to implement this. So let's get started. We'll explore how to query by grouping data based on the DateTime type. We'll use an example to analyze an API call trend using Prisma, Next.js, and MongoDB. Our focus will be on querying data to track API call metrics such as success rates and call frequency over time.

Simplified API Call Data Model

Grouping API calls by time periods such as week, month, or year is crucial for implementing dashboard. To illustrate this, consider the following minimal Prisma schema:

model ApiCall {
  id        String    @id @default(auto()) @map("_id") @db.ObjectId
  timestamp DateTime  @default(now())
  status    ApiCallStatus // Enum for success or failure.
}

enum ApiCallStatus {
  SUCCESS
  FAILURE
}

This model captures the timestamp of each API call and its status, sufficient for trend analysis.

Querying API Call Trends

Here’s an implementation of an API endpoint in Next.js that provides insights into API call trends by grouping the data by time periods such as week, month, or year. This endpoint helps monitor API usage patterns and identify potential system issues efficiently:

import { NextRequest, NextResponse } from 'next/server';
import { startOfYear, endOfYear, startOfMonth, endOfMonth } from 'date-fns';

export async function GET(req: NextRequest) {
    const range = req.nextUrl.searchParams.get("range"); // 'year' or 'month'
    const groupBy = req.nextUrl.searchParams.get("groupby"); // 'yearly', 'monthly', 'daily'

    if (!range || (range !== 'year' && range !== 'month')) {
        return NextResponse.json({ error: "Range must be 'year' or 'month'" }, { status: 400 });
    }

    if (!groupBy || (groupBy !== 'yearly' && groupBy !== 'monthly' && groupBy !== 'daily')) {
        return NextResponse.json({ error: "Group by must be 'yearly', 'monthly', or 'daily'" }, { status: 400 });
    }

    try {
        let start: Date, end: Date;
        if (range === 'year') {
            start = startOfYear(new Date());
            end = endOfYear(new Date());
        } else { // range === 'month'
            start = startOfMonth(new Date());
            end = endOfMonth(new Date());
        }

        let groupByFormat: string;
        switch (groupBy) {
            case 'yearly':
                groupByFormat = "%Y";
                break;
            case 'monthly':
                groupByFormat = "%Y-%m";
                break;
            case 'daily':
                groupByFormat = "%Y-%m-%d";
                break;
        }

        const apiCallTrends = await db.apiCall.aggregateRaw({
            pipeline: [
                {
                    $match: {
                        timestamp: { $gte: { $date: start }, $lte: { $date: end } }
                    }
                },
                {
                    $group: {
                        _id: { $dateToString: { format: groupByFormat, date: '$timestamp' } },
                        SUCCESS: { $sum: { $cond: [{ $eq: ['$status', 'SUCCESS'] }, 1, 0] } },
                        FAILURE: { $sum: { $cond: [{ $eq: ['$status', 'FAILURE'] }, 1, 0] } },
                        TOTAL: { $sum: 1 }
                    }
                },
                {
                    $sort: {
                        _id: 1
                    }
                }
            ]
        });

        return NextResponse.json({ apiCallTrends });
    } catch (error) {
        console.error(error);
        return NextResponse.json({ error: "An error occurred while fetching data." }, { status: 500 });
    }
}

Possible Response

GET /api/your-endpoint?range=year&groupby=monthly

{
  "apiCallTrends": [
    {
      "_id": "2025-01", // Grouped by month (January 2025)
      "SUCCESS": 120,
      "FAILURE": 15,
      "TOTAL": 135
    },
    {
      "_id": "2025-02", // Grouped by month (February 2025)
      "SUCCESS": 110,
      "FAILURE": 10,
      "TOTAL": 120
    },
    {
      "_id": "2025-03", // Grouped by month (March 2025)
      "SUCCESS": 130,
      "FAILURE": 20,
      "TOTAL": 150
    }
    // ... more grouped results for each month in the range
  ]
}

Key Highlights

Dynamic Grouping by Date: The aggregation pipeline groups API calls by year, month or day, depending on the user’s selection.
Trend Analysis: Success and failure counts, along with total calls, are calculated for each time period.
Error Handling: User-friendly error responses ensure a smooth API experience.
Efficiency: MongoDB's aggregation pipeline minimizes server load and optimizes performance.

Conclusion

With this setup ,you can query timestamp groupBy various time range from MongoDB using Prisma ORM.

Thank you for reading! If you found this post helpful, please consider subscribing and liking the post. Feel free to connect with me on GitHub and LinkedIn. Your support is greatly appreciated!