Implement v2 GUI #19
Merged
Implement v2 GUI #19
Conversation
This file contains 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
Create a new Gatsby site for PARAT v2 and begin installing needed dependencies.
Begin adding the company list view, including connecting filter sliders to URL params (although not yet to the data). Set up Jest, although actual tests are still pending.
Identify and implement two options for filter state management that both tie the currently-applied filters to the URL query parameters (via `useQueryParamString()`), as well as allow column definitions to access the state information by indexing into an object. Selecting the specific option to use will come later, after discussion with the others.
Apply the currently-selected filters to the list view table. Add a debounce to the sliders so that the sliders themsleves update seemlessly while the table waits before updating, improving slider responsiveness.
Add functionality to the column add/remove dialog box, including storing the selected columns (if they differ from the default config) as URL query params.
|
Excited to take a look! This is what I see when I try to do gatsby develop after npm install: Could you have forgotten to add something (although I do see an accessbility.css under src)? Or have I forgotten a setup step? |
|
@jmelot Should be resolved now - that was an old import that's been replaced by |
Split option 2 for filter state management out into its own (generalized) file (`useMultiState`) and convert the list view states accordingly. Resolve a few bugs with filter, and cleaned up the code.
Create and start implementing the company-specific detail pages.
Add table of contents and the three overall sections (Publications, Patents, and Workforce) to the company detail page. Add the initial set of charts, including helper functions to standardize things as much as possible. The current version of the URL slug -> company ID/name extraction won't work when used with Gatsby's `<Link>` component, since it only runs once on the initial page load (so navigating to a second company would still present the first company on the page).
If the company slug doesn't match the canonical version, as determined by the `companyId`, rewrite the URL. URLs are of the form `/company/ID-COMPANY_SLUG/`, where `ID` is the company's numerical `CSET_id` and `COMPANY_SLUG` is a slugified version of the company's `name`.
|
Some quick initial comments just browsing This is what I see when I initially load the app. We need to allow the user to paginate and should sort by # AI pubs by default 
Let's use autocompletes here, not dropdowns - the company lists especially are kind of unweildly 
The user should not be able to unselect the company name 
I'm sure you're already aware, but there's a bunch of warnings that will need to get cleaned up at some point: |
jmelot
reviewed
Jul 19, 2023
| return false; | ||
| } | ||
| } else if ( colDef.type === "stock" ) { | ||
| // TODO: Figure out how we're filtering the `market_list` column |
There was a problem hiding this comment.
I'll have a look for it, I don't immediately remember this one
|
|
||
| const companyData = company_data.find(e => e.CSET_id === companyId); | ||
|
|
||
| // If the `pathname` of the page doesn't match the authoritative pathname for |
|
On your current info needs -
AI publications vs AI subfield publications should include NLP, CV, RO (which we non-obviously are referring to as the "subfields"). I'd just graph them as additional lines. I think (subject to other thoughts from @za158) these graphs are ok for now. |
Add tests covering the add/remove columns dialog. Add a partial test of filtering by region (currently do not have a working test for resetting filters).
Add pagination and switch to using an `<Autocomplete>` (which fixed issue with tests), and do some work on fixing the header width/style issues.
Sort the list view by AI publications by default (although saving sort state is deferred to #24). Add more charts/contents in Patents and Workforce sections. Add `util/testing.js`, which slipped through the cracks before, and clean up various files.
Commented out Python aspects because things were failing
brianlove
force-pushed
the
develop-v2-gui
branch
from
2f3cf75 to
9094433
Compare
JavaScript CoverageSummary
Modified Files • (60%)
|
@brianlove Sorry to be so long in responding. Please add an additional field for "Sectors." How exactly we populate this is TBD but we will want it. I am about to create a separate issue about the underlying data. No further comments from me for now. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Initial draft of v2 GUI, focusing on the list view and filters.
Closes #10, closes #14
TODO
/company/163/, which redirects to/company/163-microsoft/). Following completion of that issue, the link targets will be updated to the correct pages.<Table>– tracked as Incorporate updated UI Components library once available #27<Autocomplete>instead of<Dropdown>s<Autocomplete>s and column widths; may be resolved by https://github.com/georgetown-cset/eto-ui-components/issues/269 – tracked as Implement column-specific styling in list view #212023-07-18
Initial drafts of both the list view and detail view are available - there are still some pending bits (see above), but higher-level feedback would be good to get. Page URLs for the detail view are explained here.
Current information needs:
2023-07-13There are currently two versions of the state management system present (plus some earlier tests using the extra interface elements with colored backgrounds), described in https://docs.google.com/document/d/1It-f0out1G0DX9T1OoQonnAErUNgtC3ec2VHJai-gJs/edit. Option 2 is (IMO) the cleanest to use, although it doesn't use
useState()in the traditional manner.