how to add jalali date picker in filters with extension ?

[shomidrashidi]

I want to add a Jalali date filter as an extension to Superset.
I created a extension with superset-extensions cmd and added jalali date picker to project extension.
I build and get supx file and add to supperset extension folder but not show jalali date picker in filters.
frontend/src/index.tsx::

`
import { getExtensionsRegistry } from '@superset-ui/core';

import PersianDateRange from './PersianDateRange';

console.log(
'🔥 [PersianDateRange] extension loaded',
);

const registry = getExtensionsRegistry();

/*

• filter.dateFilterControl is consumed by
• Superset's TimeFilterPlugin, but it is not
• included in the TypeScript key union of
• ExtensionsRegistry.
• We intentionally extend the registry type
• locally instead of using any.
  */
  type DateFilterExtensionRegistry = {
  set(
  key: 'filter.dateFilterControl',
  value: typeof PersianDateRange,
  ): void;

get(
key: 'filter.dateFilterControl',
): typeof PersianDateRange | undefined;
};

const dateFilterRegistry =
registry as unknown as DateFilterExtensionRegistry;

console.log(
'🔥 [PersianDateRange] registering filter.dateFilterControl',
);

dateFilterRegistry.set(
'filter.dateFilterControl',
PersianDateRange,
);

console.log(
'🔥 [PersianDateRange] registered:',
dateFilterRegistry.get(
'filter.dateFilterControl',
),
);
`

[dosubot[bot]]

Hi @shomidrashidi! I'm Dosu and I'm helping the Apache Superset team.

Your registration code is structurally correct — filter.dateFilterControl is a valid extension point [1], and TimeFilterPlugin does look it up from the registry at render time, falling back to the built-in DateFilterControl if nothing is found [2]. The problem is most likely one of these:

1. The .supx bundle isn't loading

Check the browser console when you open a dashboard with a Time filter. If you don't see your 🔥 [PersianDateRange] extension loaded log, the bundle isn't being picked up at all. Also note there's a reported issue where superset-extensions bundle can fail silently due to apache-superset-core version skew — the CLI resolves a stale 0.1.0 from PyPI instead of the version matching your Superset checkout [3]. Make sure you install both superset-core and the CLI from source together:

pip install ./superset-core ./superset-extensions-cli

2. Duplicate @superset-ui/core singleton (most common cause)

getExtensionsRegistry() is a singleton created via makeSingleton. If your .supx bundle ships its own copy of @superset-ui/core instead of sharing Superset's instance (a common Module Federation problem), your registry.set(...) writes to a different registry than the one TimeFilterPlugin reads from. Your component gets registered, but TimeFilterPlugin never sees it.

To verify: your code already logs dateFilterRegistry.get('filter.dateFilterControl') after set(...). If that returns your component, the singleton is shared and the issue is elsewhere. If it returns undefined, you have duplicate module instances. The fix is to mark @superset-ui/core as an external/shared dependency in your extension's webpack or Module Federation config so it resolves to the host app's copy.

3. Props mismatch

TimeFilterPlugin passes these props to the extension component [4], and your PersianDateRange must accept the DateFilterControlProps interface:

interface DateFilterControlProps {
  name: string;
  onChange: (timeRange: string) => void;
  value?: string;
  onOpenPopover?: () => void;
  onClosePopover?: () => void;
  overlayStyle?: 'Modal' | 'Popover';
  isOverflowingFilterBar?: boolean;
}

If your component crashes on these props, React may swallow the error silently and render nothing.

Debugging steps:

1. Open the browser console and confirm the 🔥 logs appear.
2. Check whether dateFilterRegistry.get('filter.dateFilterControl') returns your component or undefined.
3. If registration succeeds but the default picker still shows, the duplicate singleton is the most likely cause — ensure @superset-ui/core is shared, not bundled.

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[shomidrashidi]

should use @apache-superset/core vs @superset-ui/core ?

[dosubot[bot]]

@shomidrashidi Use @superset-ui/core — that is the npm package name for Superset's frontend core library [1]. The getExtensionsRegistry function and the Extensions type both live there [2] [3], so your import should look like:

import { getExtensionsRegistry } from '@superset-ui/core';

apache-superset-core is a Python package used by the superset-extensions-cli build tooling [4] — it is unrelated to frontend extension code.

One thing to keep in mind: if you're building a .supx extension bundle, make sure @superset-ui/core is treated as an external/shared dependency rather than bundled into your output. Otherwise you'd end up with a separate singleton registry that Superset's host app never reads from.

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.

[shomidrashidi]

index.tsx::
`import React from 'react';
import { getExtensionsRegistry } from '@superset-ui/core';

console.error('🔥🔥 PERSIAN EXTENSION MODULE START');

const PersianDateRange = (props: any) => {
console.error('🔥🔥🔥 PERSIAN COMPONENT RENDERED', props);

return (
<div
style={{
padding: 20,
background: 'red',
color: 'white',
fontSize: 20,
}}
>
🔥 PERSIAN DATE RANGE

);
};

const registry = getExtensionsRegistry();

console.error(
'🔥 BEFORE SET:',
registry.get('filter.dateFilterControl' as any),
);

registry.set(
'filter.dateFilterControl' as any,
PersianDateRange,
);

console.error(
'🔥 AFTER SET:',
registry.get('filter.dateFilterControl' as any),
);

console.error(
'🔥 SAME:',
registry.get('filter.dateFilterControl' as any) === PersianDateRange,
);

export default PersianDateRange;`

is this correct ?

[dosubot[bot]]

@shomidrashidi your registration code is structurally correct. The key 'filter.dateFilterControl' is a recognized extension point in Superset's Extensions type [1], and TimeFilterPlugin reads it from the registry on every render and falls back to the default DateFilterControl if nothing is registered [2]. Also, you don't need the as any cast — the key is already in the type definition [1].

The question is: what do your console.error logs actually print? That will pinpoint the issue:

If "SAME: true" — the registration worked. Your component is in the registry. If the filter still shows the default picker, the extension module may be loading after the Time filter has already rendered and nothing triggers a re-render. Try refreshing or toggling the filter bar.

If "🔥🔥 PERSIAN EXTENSION MODULE START" never appears — the .supx file isn't being loaded at all. Double-check that it's placed in the correct extensions folder and that Superset's backend is configured to serve it.

If "SAME: false" — this is the most common pitfall. It means your extension bundle shipped its own copy of @superset-ui/core, so getExtensionsRegistry() returns a different singleton than the one the host app uses [3]. To fix this, mark @superset-ui/core and react as externals in your extension's webpack config (or as shared modules if using Module Federation) so they resolve to the host app's copies.

Share what those logs print and that will tell us exactly which scenario applies.

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[shomidrashidi]

SAME is true
but not show any new filter
is duplicate instance from @superset-ui/core singleton ?

`const path = require('path');
const { ModuleFederationPlugin } = require('webpack').container;

const extensionConfig = require('../extension.json');
const packageConfig = require('./package.json');

module.exports = (env, argv) => {
const isProd = argv.mode === 'production';

return {
entry: isProd ? {} : './src/index.tsx',

mode: isProd ? 'production' : 'development',

devServer: {
  port: 3000,
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
},

output: {
  filename: isProd
    ? undefined
    : '[name].[contenthash].js',

  chunkFilename: '[name].[contenthash].js',

  clean: true,

  path: path.resolve(__dirname, 'dist'),

  publicPath:
    `/api/v1/extensions/${extensionConfig.publisher}/${extensionConfig.name}/`,
},

resolve: {
  extensions: ['.ts', '.tsx', '.js', '.jsx'],
},

module: {
  rules: [
    {
      test: /\.tsx?$/,
      use: 'ts-loader',
      exclude: /node_modules/,
    },

    {
      test: /\.(png|jpe?g|gif|svg)$/i,
      type: 'asset/resource',
    },
  ],
},

plugins: [
  new ModuleFederationPlugin({
    name: 'omid_persianDateRange',

    filename: 'remoteEntry.[contenthash].js',

    exposes: {
      './index': './src/index.tsx',
    },

    shared: {
      react: {
        singleton: true,
        requiredVersion: '^18.0.0',
      },

      'react-dom': {
        singleton: true,
        requiredVersion: '^18.0.0',
      },

      '@superset-ui/core': {
        singleton: true,
        requiredVersion: false,
      },
    },
  }),
],

};
};`

[shomidrashidi]

cannot way for add jalali date picker extension to filters ?
extensions not support for filter ?
Where should it be added jalaliDatePicker.tsx ?