Load and save variable filters #293
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| { | ||
| "title": "Variable Inspector", | ||
| "description": "jupyterlab-variableinspector settings.", | ||
| "type": "object", | ||
| "properties": { | ||
| "filteredTypes": { | ||
| "type": "array", | ||
| "title": "Filter variables by type", | ||
| "description": "Filters out all variables with types matching the given filter", | ||
| "default": [] | ||
| }, | ||
| "filteredNames": { | ||
| "type": "array", | ||
| "title": "Filter variables by name", | ||
| "description": "Filters out all variables with names matching the given filter", | ||
| "default": [] | ||
| } | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -37,6 +37,9 @@ provideJupyterDesignSystem().register( | |
|
|
||
| import wildcardMatch from 'wildcard-match'; | ||
|
|
||
| import { ISettingRegistry } from '@jupyterlab/settingregistry'; | ||
| import { PromiseDelegate } from '@lumino/coreutils'; | ||
|
|
||
| const TITLE_CLASS = 'jp-VarInspector-title'; | ||
| const PANEL_CLASS = 'jp-VarInspector'; | ||
| const TABLE_CLASS = 'jp-VarInspector-table'; | ||
|
|
@@ -60,6 +63,10 @@ export class VariableInspectorPanel | |
| implements IVariableInspector | ||
| { | ||
| private _source: IVariableInspector.IInspectable | null = null; | ||
| private _settingsPromise: | ||
| | PromiseDelegate<ISettingRegistry.ISettings> | ||
| | undefined; | ||
| private _settings: ISettingRegistry.ISettings | undefined; | ||
| private _table: WebDataGrid; | ||
| private _filteredTable: HTMLDivElement; | ||
| private _title: HTMLElement; | ||
|
|
@@ -80,6 +87,16 @@ export class VariableInspectorPanel | |
| this.intializeFilteredTable(); | ||
| } | ||
|
|
||
| set settingsPromise( | ||
| settingPromise: PromiseDelegate<ISettingRegistry.ISettings> | ||
| ) { | ||
| this._settingsPromise = settingPromise; | ||
| this._settingsPromise.promise.then(settings => { | ||
| this._settings = settings; | ||
| this.initalizeFilterButtons(); | ||
| }); | ||
| } | ||
|
|
||
|
Comment on lines
+90
to
+99
There was a problem hiding this comment. This is not a great pattern as we should avoid making this class aware of the settings registry. To do this, this class need to have public setter for the filters and a signal that is emitted when they change. This signal will be used to store new filters to the settings. The pseudo code would look like that: // index.ts
panel.filters = settings.composite['filters];
panel.filtersChanged.connect((_, newFilters) => { settings.set('filters', newFilters); });
// variableinspector.ts
class VariableInspectorPanel {
private _filtersChanged = new Signal<this, string[]>(this);
private _filters = new Array<string>();
set filters(value: string[]) {
this._filters = value;
this._filtersChanged.emit(this._filters);
}
get filterChanged(): ISignal<this, string[]> {
return this._filtersChanged;
}
}} There was a problem hiding this comment. @fcollonval Sorry for the delay. I was just wondering how we are able to access the settings in the index for the two lines. Currently, the settings are a promise in which we load the settings. However, when we try to access the settings with the filter, the promise has not resolved yet. How do we go about this? There was a problem hiding this comment. Hey @kentarolim10 - nice to read you. A common pattern is to call a In this case to set the settings on all variable-inspector panels, you could make use of the |
||
| //Sets up the filter table so when the filter button is pressed, a new filter is created | ||
| protected intializeFilteredTable() { | ||
| const filterType = this._filteredTable.querySelector( | ||
|
|
@@ -100,6 +117,58 @@ export class VariableInspectorPanel | |
| }); | ||
| } | ||
|
|
||
| // Loads filters from ISettings | ||
| protected loadFilters() { | ||
| if (this._settings) { | ||
| this._filtered.type = this._settings.composite[ | ||
| 'filteredTypes' | ||
| ] as string[]; | ||
| this._filtered.name = this._settings.composite[ | ||
| 'filteredNames' | ||
| ] as string[]; | ||
| } | ||
| } | ||
|
|
||
| // Takes filters and saves them in ISettings | ||
| protected setFilters(filterType: FILTER_TYPES | null = null) { | ||
| if (this._settings) { | ||
| if (filterType === 'type' || !filterType) { | ||
| this._settings.set('filteredTypes', this._filtered.type); | ||
| } | ||
| if (filterType === 'name' || !filterType) { | ||
| this._settings.set('filteredNames', this._filtered.name); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Loads the filter and creates a new button for each | ||
| protected initalizeFilterButtons() { | ||
| this.loadFilters(); | ||
| for (let i = 0; i < this._filtered.type.length; i++) { | ||
| this.addFilteredButton(this._filtered.type[i], 'type'); | ||
| } | ||
| for (let i = 0; i < this._filtered.name.length; i++) { | ||
| this.addFilteredButton(this._filtered.name[i], 'name'); | ||
| } | ||
| } | ||
|
|
||
| // Creates new filtered button and adds it to the filtered variable list | ||
| protected addFilteredButton(varName: string, filterType: FILTER_TYPES) { | ||
| const filterList = this._filteredTable.querySelector( | ||
| '.' + FILTER_LIST_CLASS | ||
| ) as HTMLUListElement; | ||
| const newFilteredButton = Private.createFilteredButton(varName, filterType); | ||
| newFilteredButton.addEventListener('click', () => { | ||
| const filterText = newFilteredButton.querySelector( | ||
| '.filtered-variable-button-text' | ||
| ) as HTMLDivElement; | ||
| this.onFilterChange(filterType, filterText.innerHTML, false); | ||
| this.addFilteredOutRows(); | ||
| newFilteredButton.remove(); | ||
| }); | ||
| filterList.appendChild(newFilteredButton); | ||
| } | ||
|
|
||
| // Checks if string is in the filtered array | ||
| protected stringInFilter(string: string, filterType: FILTER_TYPES) { | ||
| // console.log(this._filtered[filterType]); | ||
|
|
@@ -132,27 +201,14 @@ export class VariableInspectorPanel | |
| return; | ||
| } | ||
| this._filtered[filterType].push(varName); | ||
| this.setFilters(filterType); | ||
| this.addFilteredButton(varName, filterType); | ||
| this.filterOutTable(); | ||
| } else { | ||
| this._filtered[filterType] = this._filtered[filterType].filter( | ||
| filter => filter !== varName | ||
| ); | ||
| this.setFilters(filterType); | ||
| } | ||
| } | ||
|
|
||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
To make the code more readable, you could use arg expansion: