Skip to content

feat: implement ability to search when selecting datasets #153

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ralvarez-dg merged 5 commits into from
Sep 16, 2026
Merged

feat: implement ability to search when selecting datasets #153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
269fbfe
feat: implement ability to search when selecting datasets
timothy-mugo Sep 4, 2026
3b2415a
Merge branch 'main' of github.com:devgateway/data-viz-wordpress into …
timothy-mugo Sep 15, 2026
ae55332
feat: implement dataset filter in chart and filter
timothy-mugo Sep 15, 2026
3641441
feat: implement data selector in the other components using superset
timothy-mugo Sep 15, 2026
5f4f4ad
feat: implement data selector in the other components using superset
timothy-mugo Sep 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/sixty-queens-invent.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@devgateway/dvz-wp-commons": patch
---

Implement dataset search input and selector to search from a list of datasets
64 changes: 64 additions & 0 deletions packages/commons/src/DatasetSelector.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import React, { useState } from "react";
import { ComboboxControl } from "@wordpress/components";
import { __ } from "@wordpress/i18n";

export const DatasetSelector = (props) => {
const {
setAttributes,
setState,
loadMetadata,
dvzProxyDatasetId,
app,
datasets
} = props;
const [ filterValue, setFilterValue ] = useState("");
const selectedDataset = (datasets || []).find(dataset =>
dataset.value.toString() === dvzProxyDatasetId?.toString()
);
const filteredOptions = (datasets || []).filter(dataset => {
const searchValue = filterValue.toLowerCase();
return dataset.label.toLowerCase().includes(searchValue) ||
dataset.value.toString().toLowerCase().includes(searchValue);
});

return (
<div style={{
maxWidth: "100%",
minWidth: 0,
overflowWrap: "anywhere",
width: "100%",
}}>
<ComboboxControl
label={__("Datasets")}
value={selectedDataset?.value || dvzProxyDatasetId || ""}
style={{
maxWidth: "100%",
minWidth: 0,
overflowWrap: "anywhere",
width: "100%",
}}
onChange={(newDatasetId) => {
setAttributes({
dvzProxyDatasetId: newDatasetId,
dimension1: "none",
dimension2: "none",
dimension3: "none",
measures: [],
});
Comment thread
timothy-mugo marked this conversation as resolved.
setState({
dimensions: [],
measures: [],
filters: [],
categories: [],
});
loadMetadata(app, newDatasetId);
}}
options={filteredOptions}
onFilterValueChange={inputValue => {
setFilterValue(inputValue || "");
}}
help={__('Select the dataset from the API.')}
/>
</div>
)
}
3 changes: 2 additions & 1 deletion packages/commons/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,4 +41,5 @@ export {
export { ChartLegends } from './ChartLegends';

export { GenericIcon, ChartIcon } from './icons/index';
export { CSVConfig as CSVSourceConfig } from './CSVSourceConfig';
export { CSVConfig as CSVSourceConfig } from './CSVSourceConfig';
export { DatasetSelector } from './DatasetSelector';
45 changes: 33 additions & 12 deletions plugins/wp-react-blocks-plugin/blocks/big-filter/BlockEdit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
PanelRow,
ResizableBox,
SelectControl,
ComboboxControl,
TextControl,
FontSizePicker,
__experimentalText as Text,
Expand All @@ -25,12 +26,20 @@ import { useSelect } from '@wordpress/data';
class BlockEdit extends BlockEditWithAPIMetadata {
constructor(props) {
super(props);
this.state = { ...(this.state || {}), filteredDatasets: null };
}

componentDidMount() {
super.componentDidMount()
}

componentDidUpdate(prevProps, prevState, snapshot) {
if (this.state.datasets !== prevState.datasets && this.state.filteredDatasets !== null) {
this.setState({ filteredDatasets: null })
}
super.componentDidUpdate(prevProps, prevState, snapshot)
}

render() {
const {
className, isSelected,
Expand Down Expand Up @@ -144,18 +153,30 @@ class BlockEdit extends BlockEditWithAPIMetadata {


{isSupersetAPI(app, this.state.apps) && <PanelRow>
<SelectControl
label={__('Datasets')}
value={[dvzProxyDatasetId]}
onChange={(newDatasetId) => {
setAttributes({
dvzProxyDatasetId: newDatasetId
})

this.loadMetadata(app, newDatasetId)
}}
options={datasets}
/>
<div style={{ maxWidth: '100%', minWidth: 0, overflowWrap: 'anywhere', width: '100%' }}>
<ComboboxControl
label={__('Datasets')}
value={dvzProxyDatasetId}
style={{ maxWidth: '100%', minWidth: 0, overflowWrap: 'anywhere', width: '100%' }}
onChange={(newDatasetId) => {
setAttributes({
dvzProxyDatasetId: newDatasetId
})

this.loadMetadata(app, newDatasetId)
}}
options={this.state.filteredDatasets || datasets}
isLoading={datasets.length === 0}
onFilterValueChange={(inputValue) => {
const searchValue = (inputValue || '').toLowerCase()
const filteredDatasets = datasets.filter((option) =>
option.label.toLowerCase().includes(searchValue) ||
option.value.toString().toLowerCase().includes(searchValue)
)
this.setState({ filteredDatasets })
}}
/>
</div>
</PanelRow>
}

Expand Down
41 changes: 29 additions & 12 deletions plugins/wp-react-blocks-plugin/blocks/big-number-trend/BlockEdit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
PanelRow,
ResizableBox,
SelectControl,
ComboboxControl,
TextControl,
FontSizePicker,
__experimentalText as Text,
Expand All @@ -24,6 +25,7 @@ import { Format } from '@devgateway/dvz-wp-commons';
class BlockEdit extends BlockEditWithAPIMetadata {
constructor(props) {
super(props);
this.state = { ...(this.state || {}), filteredDatasets: null };
}

componentDidMount() {
Expand All @@ -32,6 +34,9 @@ class BlockEdit extends BlockEditWithAPIMetadata {

componentDidUpdate(prevProps, prevState, snapshot) {
super.componentDidUpdate(prevProps, prevState, snapshot);
if (this.state.datasets !== prevState.datasets && this.state.filteredDatasets !== null) {
this.setState({ filteredDatasets: null })
}
// The base class sends raw WP attributes, but measures/format/filters/percentChangeFormat
// are Array/Object types that the embeddable expects as JSON strings. Send a correction.
if (this.iframe && this.iframe.current) {
Expand Down Expand Up @@ -141,18 +146,30 @@ class BlockEdit extends BlockEditWithAPIMetadata {


{isSupersetAPI(app, this.state.apps) && <PanelRow>
<SelectControl
label={__('Datasets')}
value={[dvzProxyDatasetId]}
onChange={(newDatasetId) => {
setAttributes({
dvzProxyDatasetId: newDatasetId
})

this.loadMetadata(app, newDatasetId)
}}
options={datasets}
/>
<div style={{ maxWidth: '100%', minWidth: 0, overflowWrap: 'anywhere', width: '100%' }}>
<ComboboxControl
label={__('Datasets')}
value={dvzProxyDatasetId}
style={{ maxWidth: '100%', minWidth: 0, overflowWrap: 'anywhere', width: '100%' }}
onChange={(newDatasetId) => {
setAttributes({
dvzProxyDatasetId: newDatasetId
})

this.loadMetadata(app, newDatasetId)
}}
options={this.state.filteredDatasets || datasets}
isLoading={datasets.length === 0}
onFilterValueChange={(inputValue) => {
const searchValue = (inputValue || '').toLowerCase()
const filteredDatasets = datasets.filter((option) =>
option.label.toLowerCase().includes(searchValue) ||
option.value.toString().toLowerCase().includes(searchValue)
)
this.setState({ filteredDatasets })
}}
/>
</div>
</PanelRow>
}
</PanelBody>
Expand Down
43 changes: 32 additions & 11 deletions plugins/wp-react-blocks-plugin/blocks/big-number/BlockEdit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
PanelRow,
ResizableBox,
SelectControl,
ComboboxControl,
TextControl,
FontSizePicker,
__experimentalText as Text,
Expand All @@ -24,12 +25,20 @@ import { Format } from '@devgateway/dvz-wp-commons';
class BlockEdit extends BlockEditWithAPIMetadata {
constructor(props) {
super(props);
this.state = { ...(this.state || {}), filteredDatasets: null };
}

componentDidMount() {
super.componentDidMount()
}

componentDidUpdate(prevProps, prevState, snapshot) {
if (this.state.datasets !== prevState.datasets && this.state.filteredDatasets !== null) {
this.setState({ filteredDatasets: null })
}
super.componentDidUpdate(prevProps, prevState, snapshot)
}

render() {
const {
className, isSelected,
Expand Down Expand Up @@ -119,18 +128,30 @@ class BlockEdit extends BlockEditWithAPIMetadata {


{isSupersetAPI(app, this.state.apps) && <PanelRow>
<SelectControl
label={__('Datasets')}
value={[dvzProxyDatasetId]}
onChange={(newDatasetId) => {
setAttributes({
dvzProxyDatasetId: newDatasetId
})
<div style={{ maxWidth: '100%', minWidth: 0, overflowWrap: 'anywhere', width: '100%' }}>
<ComboboxControl
label={__('Datasets')}
value={dvzProxyDatasetId}
style={{ maxWidth: '100%', minWidth: 0, overflowWrap: 'anywhere', width: '100%' }}
onChange={(newDatasetId) => {
setAttributes({
dvzProxyDatasetId: newDatasetId
})

this.loadMetadata(app, newDatasetId)
}}
options={datasets}
/>
this.loadMetadata(app, newDatasetId)
}}
options={this.state.filteredDatasets || datasets}
isLoading={datasets.length === 0}
onFilterValueChange={(inputValue) => {
const searchValue = (inputValue || '').toLowerCase()
const filteredDatasets = datasets.filter((option) =>
option.label.toLowerCase().includes(searchValue) ||
option.value.toString().toLowerCase().includes(searchValue)
)
this.setState({ filteredDatasets })
}}
/>
</div>
</PanelRow>
}

Expand Down
Loading
Loading