Skip to content

Add sorting to variant analysis results#1353

Merged
aeisenberg merged 3 commits intomainfrom
aeisenberg/sort-remote-results
May 20, 2022
Merged

Add sorting to variant analysis results#1353
aeisenberg merged 3 commits intomainfrom
aeisenberg/sort-remote-results

Conversation

@aeisenberg
Copy link
Copy Markdown
Contributor

@aeisenberg aeisenberg commented May 18, 2022

Sort by stars, number of results, and name.

This also includes a graphql query that retrieves all the stars
for relevant repositories.

Here is an example of what it looks like:

sorting

This PR also includes an integration test that ensures the graphql call to get the stargazers counts for each repo works. I had to make a change to the credentials class to allow a way of instantiating based on an environment variable.

@aeisenberg aeisenberg requested review from a team as code owners May 18, 2022 19:26
Sort by stars, number of results, and name.

This also includes a graphql query that retrieves all the stars
for relevant repositories.
@aeisenberg aeisenberg force-pushed the aeisenberg/sort-remote-results branch from a6da074 to 642f3f2 Compare May 18, 2022 20:56
@aeisenberg aeisenberg force-pushed the aeisenberg/sort-remote-results branch from 642f3f2 to 6c376d8 Compare May 18, 2022 21:20
Copy link
Copy Markdown
Contributor

@charisk charisk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some comments for now, I'll come back to it tomorrow!

Comment thread extensions/ql-vscode/src/authentication.ts Outdated

} while (cursor);
} catch (e) {
void showAndLogErrorMessage(`Error retrieving repository metadata for variant analysis: ${getErrorMessage(e)}`);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor (feel free to ignore!), but do we have to say for variant analysis? I'm thinking that the API client can eventually be used for local queries as well so it'd be nice to not make it variant analysis specific

}
};

export async function getStargazers(credentials: Credentials, nwos: string[], pageSize = 100): Promise<Record<string, number>> {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about calling this getStargazersCounts or something like that?

Comment thread extensions/ql-vscode/src/remote-queries/remote-queries-manager.ts Outdated
Comment thread extensions/ql-vscode/src/remote-queries/view/RemoteQueries.tsx Outdated

export type Sort = 'name' | 'stars' | 'results';
type SortBy = { name: string, sort: Sort }[];
type Props = {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Personal preference (feel free to ignore) but I've generally avoided having a Props type because it makes you jump around in the code - I just define it inline where the component that has the props is defined.

This helps if you have multiple components in the same file too - avoids the reader having to wonder for which component the props are for.

Comment thread extensions/ql-vscode/src/remote-queries/view/SortRepoFilter.tsx Outdated
Comment thread extensions/ql-vscode/src/remote-queries/view/SortRepoFilter.tsx Outdated
Comment thread extensions/ql-vscode/src/remote-queries/view/SortRepoFilter.tsx Outdated

const SortRepoFilter = ({ sort, setSort }: Props) => {
return <span className="vscode-codeql__analysis-sorter">
<ActionMenu>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't look right locally for me for some reason 🤔

image

image

image

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually this looked better after running npm run build. I'm not sure why, I thought npm run watch would refresh everything when it first runs.

There are some styling issues still though.

  • The colours are a bit off in light mode
  • The menu opens up to the right - it should open to the left according to the designs

image

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't know if i have control over where the drop-down comes. I'll try to fix.

I'll also work on the background color.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The menu open location is dependent on the width of the viewport. With a smaller screen, the menu will open on the other side. It's the default behaviour of this component. Do you think this is something to spend time on?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And another thing that's odd is that on my screen, I'm getting the reverse colours. I wonder if it has something to do with what theme the IDE is using when you initially run compile??

_Extension_Development_Host__-_CodeQL_Query_Results_—_vscode-codeql-starter__Workspace_

Odd. I'll have to look tomorrow.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Discussed offline - we'll use the approach we have in the CodePaths component and work on our Primer theming solution.

@aeisenberg
Copy link
Copy Markdown
Contributor Author

Thanks for the review!

@aeisenberg
Copy link
Copy Markdown
Contributor Author

I addressed all of your comments except for the theme styling. Something odd is happening and I'll need to look tomorrow.

Copy link
Copy Markdown
Contributor

@charisk charisk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As discussed, there are some comments to be addressed but most will be done before merging and a separate PR will address light theme issues.

Use `ActionMenu.Anchor` instead of `ActionMenu.Button`.

The theming styles are not correct. Will work on that next.
@aeisenberg aeisenberg force-pushed the aeisenberg/sort-remote-results branch from a8dd01e to 3611b1f Compare May 20, 2022 15:02
@aeisenberg aeisenberg merged commit 405a6c9 into main May 20, 2022
@aeisenberg aeisenberg deleted the aeisenberg/sort-remote-results branch May 20, 2022 16:23
@aeisenberg
Copy link
Copy Markdown
Contributor Author

Will work on theming and styling next.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants