From 9f43aec0b7221e0e009efd850d3527d4064a1bfd Mon Sep 17 00:00:00 2001 From: Thessa Kranendonk Date: Wed, 19 Oct 2022 13:36:02 -0400 Subject: [PATCH 1/7] Added a sorting functionality for plugins list at Plugins.jsx --- src/components/Plugins/Plugins.jsx | 80 ++++++++++++++++++++++-------- 1 file changed, 60 insertions(+), 20 deletions(-) diff --git a/src/components/Plugins/Plugins.jsx b/src/components/Plugins/Plugins.jsx index 1748db8c..4a271fcf 100644 --- a/src/components/Plugins/Plugins.jsx +++ b/src/components/Plugins/Plugins.jsx @@ -9,7 +9,7 @@ import { Grid, GridItem, Split, - SplitItem + SplitItem, } from "@patternfly/react-core"; import { CaretDownIcon } from '@patternfly/react-icons'; @@ -26,6 +26,7 @@ import { removeEmail } from '../../utils/common'; import './Plugins.css'; + const CATEGORIES = ['FreeSurfer', 'MRI', 'Segmentation']; /** @@ -49,12 +50,14 @@ export class Plugins extends Component { isSortOpen: false, error: null, plugins: new PluginMetaList(), + sortedPlugins: null, paginationLimit: 0, paginationOffset: 0, categories, selectedCategory: null, starsByPlugin: {}, }; + } /** @@ -79,6 +82,40 @@ export class Plugins extends Component { } } + /** + * Sort plugins by name, creation date or authors. + * + */ +handleSortPlugins = (sortType)=> { + this.setState({sortedPlugins: null}) + const { plugins} = this.state; + + const sortedPluginsList = [...plugins.data].sort((a,b) => a[sortType].localeCompare(b[sortType])) + this.setState({ + sortedPlugins: sortedPluginsList + }) +} + + +// eslint-disable-next-line react/sort-comp +// async tester(){ +// // eslint-disable-next-line no-unused-vars +// let test; +// try { +// test = await this.client.getPlugins({ +// limit: 1e6, +// offset: 0, +// name_title_category: null, +// }); +// } catch (error) { +// // this.showNotifications(new HttpApiCallError(error)); +// console.log(error) + +// } +// return test +// } + + /** * Add a star next to the plugin visually. * (Does not necessarily send to the backend that the plugin is a favorite). @@ -117,13 +154,6 @@ export class Plugins extends Component { })) } - // eslint-disable-next-line no-unused-vars - handleSortingSelect = (sort) => { - /** - * @todo sort plugins - */ - this.handleToggleSort() - } /** * 1. Fetch the list of plugins based on the url path OR search query. @@ -305,21 +335,36 @@ export class Plugins extends Component { } } - render() { + render() { // convert map into the data structure expected by - const { categories, plugins, loading, error } = this.state; + const { categories, plugins, sortedPlugins, loading, error } = this.state; const { paginationOffset, paginationLimit, isSortOpen, selectedCategory } = this.state; const categoryEntries = Array.from(categories.entries(), ([name, count]) => ({ name, length: count })); + const dropdownItems = [ + this.handleSortPlugins('name')}>Name, + this.handleSortPlugins('creation_date')}>Date created, + this.handleSortPlugins('authors')}>Author + ] + const pluginList = new Map() - // eslint-disable-next-line no-restricted-syntax + + if (!sortedPlugins){ + // eslint-disable-next-line no-restricted-syntax for (const plugin of plugins.data) { plugin.authors = removeEmail(plugin.authors.split(',')) pluginList.set(plugin.name, plugin) } + } else { + // eslint-disable-next-line no-restricted-syntax + for (const plugin of sortedPlugins) { + pluginList.set(plugin.name, plugin) + } + } + // Render the pluginList if the plugins have been fetched const PluginListBody = () => { @@ -370,7 +415,6 @@ export class Plugins extends Component { const pluginsCount=plugins.totalCount > 0 ? plugins.totalCount : 0; - return (
{error && ( @@ -434,18 +478,16 @@ export class Plugins extends Component { - Sort by + Sort by: } - dropdownItems={[ - Name - ]} + dropdownItems={dropdownItems} /> @@ -453,9 +495,7 @@ export class Plugins extends Component { - - From 509559f7c3f12eb07eb6fb89df9ef5cd73d17276 Mon Sep 17 00:00:00 2001 From: Thessa Kranendonk Date: Wed, 19 Oct 2022 13:38:26 -0400 Subject: [PATCH 2/7] Added a check if variable has length before using .join() in PluginItem.jsx --- src/components/Plugins/components/PluginItem/PluginItem.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Plugins/components/PluginItem/PluginItem.jsx b/src/components/Plugins/components/PluginItem/PluginItem.jsx index 6b7d44e8..f1bd25a2 100644 --- a/src/components/Plugins/components/PluginItem/PluginItem.jsx +++ b/src/components/Plugins/components/PluginItem/PluginItem.jsx @@ -46,7 +46,7 @@ const PluginItem = ({ to={`/author/${authors}`} className="plugin-item-author" > - { authors.join(', ') } + { authors.length > 1 ?? authors.join(', ') }

{ From 96a86e620c5aea62cc8de6ec8c7698e6afcc06b7 Mon Sep 17 00:00:00 2001 From: Thessa Kranendonk Date: Thu, 20 Oct 2022 11:28:14 -0400 Subject: [PATCH 3/7] Updated the plugins-category-name to display the name with a captital --- .../Plugins/components/PluginsCategories/PluginsCategories.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Plugins/components/PluginsCategories/PluginsCategories.jsx b/src/components/Plugins/components/PluginsCategories/PluginsCategories.jsx index ea041005..e6edc762 100644 --- a/src/components/Plugins/components/PluginsCategories/PluginsCategories.jsx +++ b/src/components/Plugins/components/PluginsCategories/PluginsCategories.jsx @@ -17,7 +17,7 @@ const PluginsCategories = ({ categories, selected, onSelect }) => ( onClick={() => onSelect(name)} onKeyPress={() => {}} > -

{name}
+
{name.charAt(0).toUpperCase()}{name.substring(1)}
{length}
)) From 86e29c2bf77d398667bafbba072b75c1611be9e9 Mon Sep 17 00:00:00 2001 From: Thessa Kranendonk Date: Thu, 20 Oct 2022 11:30:31 -0400 Subject: [PATCH 4/7] Halfway point of adding correct functionality to display plugin by category --- src/components/Plugins/Plugins.jsx | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/src/components/Plugins/Plugins.jsx b/src/components/Plugins/Plugins.jsx index 4a271fcf..2d8e6674 100644 --- a/src/components/Plugins/Plugins.jsx +++ b/src/components/Plugins/Plugins.jsx @@ -89,7 +89,6 @@ export class Plugins extends Component { handleSortPlugins = (sortType)=> { this.setState({sortedPlugins: null}) const { plugins} = this.state; - const sortedPluginsList = [...plugins.data].sort((a,b) => a[sortType].localeCompare(b[sortType])) this.setState({ sortedPlugins: sortedPluginsList @@ -144,8 +143,9 @@ handleSortPlugins = (sortType)=> { * @param name name of category */ handleCategorySelect = (category) => { - this.setState({ loading: true, selectedCategory: category }); + this.setState({ loading: true, selectedCategory: category === "Uncategorized" ? null || undefined : category}); this.refreshPluginList({ category }) + // } } handleToggleSort = () => { @@ -161,10 +161,16 @@ handleSortPlugins = (sortType)=> { * 3. Call setState */ async refreshPluginList(search = {}) { + Object.values(search).includes('Uncategorized') + + // this.setState({ loading: true, selectedCategory: '' }); + // this.refreshPluginList({ category }) + + const params = new URLSearchParams(window.location.search) const query = params.get('q'); const { match } = this.props; - + const searchParams = { limit: 20, offset: 0, @@ -188,6 +194,7 @@ handleSortPlugins = (sortType)=> { searchParams.name_title_category = query; let plugins; + try { plugins = await this.client.getPluginMetas(searchParams); } catch (error) { @@ -243,11 +250,17 @@ handleSortPlugins = (sortType)=> { // count the frequency of catplugins which belong to categories // eslint-disable-next-line no-restricted-syntax for (const { category } of catplugins.data) - if (category) + if (category) { categories.set( category, categories.has(category) ? categories.get(category) + 1 : 1); + } else { + categories.set( + "Uncategorized", + categories.has(category) ? + categories.get(category) + 1 : 1); + } this.setState({ categories }); } From 590aa3d712797fa86a0c2c4ded75c0902e4d3877 Mon Sep 17 00:00:00 2001 From: Thessa Kranendonk Date: Sun, 23 Oct 2022 12:19:32 -0400 Subject: [PATCH 5/7] Removed code for uncategorized categories as I should have made a different branch --- src/components/Plugins/Plugins.jsx | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) diff --git a/src/components/Plugins/Plugins.jsx b/src/components/Plugins/Plugins.jsx index 2d8e6674..1e9d0332 100644 --- a/src/components/Plugins/Plugins.jsx +++ b/src/components/Plugins/Plugins.jsx @@ -143,7 +143,7 @@ handleSortPlugins = (sortType)=> { * @param name name of category */ handleCategorySelect = (category) => { - this.setState({ loading: true, selectedCategory: category === "Uncategorized" ? null || undefined : category}); + this.setState({ loading: true, selectedCategory: category }); this.refreshPluginList({ category }) // } } @@ -161,12 +161,6 @@ handleSortPlugins = (sortType)=> { * 3. Call setState */ async refreshPluginList(search = {}) { - Object.values(search).includes('Uncategorized') - - // this.setState({ loading: true, selectedCategory: '' }); - // this.refreshPluginList({ category }) - - const params = new URLSearchParams(window.location.search) const query = params.get('q'); const { match } = this.props; @@ -250,18 +244,12 @@ handleSortPlugins = (sortType)=> { // count the frequency of catplugins which belong to categories // eslint-disable-next-line no-restricted-syntax for (const { category } of catplugins.data) - if (category) { + if (category) categories.set( category, categories.has(category) ? categories.get(category) + 1 : 1); - } else { - categories.set( - "Uncategorized", - categories.has(category) ? - categories.get(category) + 1 : 1); - } - + this.setState({ categories }); } From 5b4fefd572999db1cfea20562821d0fa2a3386fd Mon Sep 17 00:00:00 2001 From: Thessa Kranendonk Date: Mon, 24 Oct 2022 21:54:47 -0400 Subject: [PATCH 6/7] Added sorting by most stars/most liked plugins in Plugins.jsx --- src/components/Plugins/Plugins.jsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/Plugins/Plugins.jsx b/src/components/Plugins/Plugins.jsx index 1e9d0332..70dcb19e 100644 --- a/src/components/Plugins/Plugins.jsx +++ b/src/components/Plugins/Plugins.jsx @@ -89,7 +89,12 @@ export class Plugins extends Component { handleSortPlugins = (sortType)=> { this.setState({sortedPlugins: null}) const { plugins} = this.state; - const sortedPluginsList = [...plugins.data].sort((a,b) => a[sortType].localeCompare(b[sortType])) + + const sortedPluginsList = [...plugins.data].sort((a,b) => { + if (typeof a[sortType] !== 'number') return a[sortType].localeCompare(b[sortType]) + return b[sortType] - a[sortType] + }) + this.setState({ sortedPlugins: sortedPluginsList }) @@ -348,7 +353,8 @@ handleSortPlugins = (sortType)=> { const dropdownItems = [ this.handleSortPlugins('name')}>Name, this.handleSortPlugins('creation_date')}>Date created, - this.handleSortPlugins('authors')}>Author + this.handleSortPlugins('authors')}>Author, + this.handleSortPlugins('stars')}>Most Liked ] const pluginList = new Map() From 300dad0fc7334fe65057a3f21050897cdadc4ec6 Mon Sep 17 00:00:00 2001 From: Thessa Kranendonk Date: Mon, 24 Oct 2022 22:15:25 -0400 Subject: [PATCH 7/7] Updated the handleCategorySelect handler to update state after the category clear button has been pressed to receive all plugins --- src/components/Plugins/Plugins.jsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/Plugins/Plugins.jsx b/src/components/Plugins/Plugins.jsx index 70dcb19e..247673be 100644 --- a/src/components/Plugins/Plugins.jsx +++ b/src/components/Plugins/Plugins.jsx @@ -148,9 +148,13 @@ handleSortPlugins = (sortType)=> { * @param name name of category */ handleCategorySelect = (category) => { - this.setState({ loading: true, selectedCategory: category }); - this.refreshPluginList({ category }) - // } + if (category !== null) { + this.refreshPluginList({ category }) + this.setState({ loading: true, selectedCategory: category }); + } else { + this.refreshPluginList() + this.setState({ loading: true, selectedCategory: null }); + } } handleToggleSort = () => {