Star Problems Extension && All Problems Category #188

Vigilans · 2019-03-06T02:47:59Z

Introduction

Solved following issues:

Star Problems: New features milestone #96
All Problems: Add an All problem list #184

Details

Feature

LeetCodeNode now exposes its inner IProblem data through nodeData property.
TreeDataProvider now preserves a allProblems field which holds the reference of all problems.
TreeDataProvider now provides ability to update one specific problem data with the help of allProblems field.
The starred problem will be appended with "♥" in the tree item name.
The hovering tooltip is enhanced to work for All Problems Category and Favorite Category.

Flaw

After star/unstar problems, the tree view return to uncollapsed state. It is because we do not store collapse state in the TreeDataProvider.

Demonstration

Sync with upstream

jdneo · 2019-03-06T02:59:56Z

@Vigilans Thank you for your contribution, will take a look later~

package.json

jdneo · 2019-03-06T10:35:31Z

src/explorer/LeetCodeTreeDataProvider.ts

+        if (this.allProblems.has(problem.id)) {
+            this.updateTreeDataByProblem(problem); // only modify the content of tree data, problem is not updated.
+            Object.assign(this.allProblems.get(problem.id), problem); // update problem, where reference is preserved.
+            this.onDidChangeTreeDataEvent.fire();


I guess that the reason that explorer returns to uncollapsed state is that, we do not pass the node element into this.onDidChangeTreeDataEvent.fire() (This API can accept a node element. Then all the data are cleared before the explorer rerendering.

After some investigations I seems to get the hang of this API. Maybe we can keep another reference container here:

allTreeNodes: Map<string, LeetcodeNode[]> // id -> relative nodes

Then, in updateProblem function, we can fire events to request all relative nodes to be updated.

@Vigilans Cool. Noticed that now the same problem in the different category has different id. So if we refresh the Two Sum in All Problem, will the Two Sum in Difficulty be refreshed?

That means, I'm thinking that if we should make the same problem has the same id in the whole explorer. Not sure the real behavior of it.

After further investigations, to accomplish this feature, there are some important changes which I think should be discussed in next PR. In this PR, we may temporarily accept the current behavior?

So updateProblem() is not used in this PR, right?

jdneo · 2019-03-06T10:36:32Z

src/explorer/LeetCodeTreeDataProvider.ts

@@ -46,7 +56,7 @@ export class LeetCodeTreeDataProvider implements vscode.TreeDataProvider<LeetCod

        const idPrefix: number = Date.now();
        return {
-            label: element.isProblem ? `[${element.id}] ${element.name}` : element.name,
+            label: element.isProblem ? `[${element.id}] ${element.name} ${element.isFavorite ? "♥" : ""}` : element.name,


Curious about the ♥ appearance on different OS platforms, haha.

jdneo · 2019-03-06T10:37:48Z

src/explorer/LeetCodeTreeDataProvider.ts

@@ -13,6 +13,8 @@ import { LeetCodeNode } from "./LeetCodeNode";

 export class LeetCodeTreeDataProvider implements vscode.TreeDataProvider<LeetCodeNode> {

+    private allProblems: Map<string, IProblem>; // store reference of all problems.


Any reason we separate allProblems with treeData?

allProblems is an id-IProblem dictionary primarily for fast lookup, whose structure is not compatible with treeData;

allProblems serves as a buffer which holds all the problems' ownership, where elements in treeData is just references to the problems;

with regard to this.onDidChangeTreeDataEvent.fire(problem) review below, we may need another lookup dictionary for fast retrieving relative nodes. allProblems seems more similar to it rather than treeData.

Now allProblems is decoupled with treeData, and will be grouped with allTreeNodes as an object pool in next PR.

jdneo · 2019-03-06T10:43:02Z

src/explorer/LeetCodeTreeDataProvider.ts

+    private updateTreeDataByProblem(problem: IProblem): void {
+        const origin: IProblem | undefined = this.allProblems.get(problem.id);
+        if (origin && origin.isFavorite !== problem.isFavorite) {
+            const problemIndex: number = this.treeData.Favorite.findIndex((p: LeetCodeNode) => Number(p.id) >= Number(problem.id));


can we directly compare p.id with problem.id?

The problems are originally in number-ascending order, thus the comparation in index searching should also be done this way.
e.g. the favorite problems' ids are ["1", "4", "16", "23"], I want to delete the problem with id "23" and id is compared directly. Since "4" >= "23" === true, the search process stops at "4", thus the deletion is incorrect.

IMO, the main problem here is that we store the Favorite problems as an array instead of a Map(id -> Problem).

So you may observe that we have to use findIndex and splice to add/remove items, which I think is hard to read.

Can we change it to a Map?

Maybe it can be discussed in subsequent PRs, when updating treeData[Category.Company/Tag] field is necessary(delete problem from treeview after it is solved)?

Yes, can be solved in another PR.

jdneo · 2019-03-06T10:44:09Z

src/explorer/LeetCodeTreeDataProvider.ts

@@ -197,6 +230,18 @@ export class LeetCodeTreeDataProvider implements vscode.TreeDataProvider<LeetCod
        ].join(os.EOL);
    }

+    private updateTreeDataByProblem(problem: IProblem): void {


The method name her is confusing. Cuz we only handle isFavorite here, but the method name looks like we can update all the fields.

I thought we might handle the case of updating other treeData fields the at a later time. Seems a overdesign here?
Should I leave a comment announcing modification of other categories is not needed yet here, or just change the method name?

Make sure now other fields will be updated here in the near PRs, e.g. when a problem is accepted, there will be some code here to update other fields.

src/commands/star.ts

src/leetCodeExecutor.ts

…`treeData` keys

Vigilans · 2019-03-07T12:31:12Z

In order to hide solved problems in All Problems category, Category.All is added as a field of treeData.

Now, allProblems holds the ownership of every problem, whereas treeData[Category.All] may hide any problem that is solved.

Vigilans · 2019-03-07T12:37:12Z

src/explorer/LeetCodeTreeDataProvider.ts

+            return {
+                label: element.name,
+                tooltip: this.getSubCategoryTooltip(element),
+                id: `LeetCode.Category::${element.parentId}.${element.id}`,


Now that we have element.parentId, Data.Now() prefix seems no longer necessary.

Btw, the TreeItem Generation code here is separated here for better readability, as well as convenience for next PR(store generated TreeItem somewhere in TreeProvider or LeetCodeNode)

So you will send out another PR to remove element.parentId & Data.Now(), right?

Data.Now() has already been removed here, which is taken place by element.parentId

jdneo · 2019-03-07T12:43:33Z

I'll take a deep look at the weekend.

jdneo · 2019-03-08T06:12:25Z

src/explorer/LeetCodeTreeDataProvider.ts

    };

-    private onDidChangeTreeDataEvent: vscode.EventEmitter<any> = new vscode.EventEmitter<any>();
+    private onDidChangeTreeDataEvent: vscode.EventEmitter<LeetCodeNode> = new vscode.EventEmitter<LeetCodeNode>();


We can also support refresh the whole explorer, so the parameter type can be written as LeetCodeNode | null | undefined

You can address it in the next PR

The event fire's parameter is fire(data: T?) where T=LeetCodeNode, so no need to append null and undefined here

Vigilans · 2019-03-08T12:00:14Z

There are so many interesting and important things about treeview...which will make our explorer far better than current form.

TreeItem.id & Collapse State

TreeItem.description

/**
 * A human readable string which is rendered less prominent.
 * When `true`, it is derived from [resourceUri](#TreeItem.resourceUri) and when `falsy`, it is not shown.
 */
description?: string | boolean;

This field is officially public since vscode engine 1.30, and gitlens has already adopted it:

May be we can show some message including difficulty and pass rate to solve #192.

TreeItem.highlight

TreeItem should support highlights
Introduce tree item highlights
This API is now in proposed API. Maybe after enabling the proposed API in package.json, we can use it to render the problems by their difficutly.

Update: proposed API is only available in insider...pass.

Toggle Favorite through button

This is the solution adopted by gitlens, which I think perfectly suits the situation:

Reference Repo

vscode-sample
GitLens

I think this PR could be temporarily suspended for further discussion, or merge it for now and then progressively refactoring the TreeDataProvider.

jdneo · 2019-03-10T09:35:21Z

@Vigilans looks like we have a lot of works to do with the explorer. Yes, my personal suggestion is to suspend the PR just for now and implement the improvement one by one.

You can separately create issues for each of them, and we can discuss the implementation in each issue before sending out the PR.

Allianzcortex · 2019-03-16T23:24:41Z

If we can add more search options(e.g. from easy->difficult) when displaying the problems in one category ,it can be awesome . The order of problems up to now is based on number order.

jdneo · 2019-05-10T06:42:34Z

@Vigilans

Seems this PR is out of date. Shall we close this and open another PR about toggle the favorite problem? (Show all problems have been resolved)

Vigilans · 2019-05-10T16:20:15Z

@jdneo Yes, and there are some more improvements that could be done on toggleFavorite, like using a button to toggle.

Vigilans added 6 commits March 5, 2019 22:35

Merge pull request #1 from jdneo/master

8d5d6d6

Sync with upstream

Add allProblems buffer to LeetCodeTreeDataProvidder

8c7e53e

Expose LeetCodeNode's inner IProblem data as property

413564c

Let dataProvider exposes method to update one specific problem's data

42b0856

Add Star Problem extension

95dea19

Add All Problems Category && enhanced tooltips

885cac7

jdneo self-requested a review March 6, 2019 10:27

jdneo reviewed Mar 6, 2019

View reviewed changes

package.json Outdated Show resolved Hide resolved

jdneo reviewed Mar 6, 2019

View reviewed changes

src/commands/star.ts Outdated Show resolved Hide resolved

jdneo reviewed Mar 6, 2019

View reviewed changes

src/leetCodeExecutor.ts Outdated Show resolved Hide resolved

Vigilans added 4 commits March 7, 2019 19:01

Renaming: starProblem -> toggleFavorite & parentName -> parentId

a11f371

Refactor getTreeItem & getChildren

ed4b40c

Move All Problems data into treeData & use Category to represent …

62b9c5c

…`treeData` keys

Minor modification

7480bc6

Vigilans commented Mar 7, 2019

View reviewed changes

jdneo reviewed Mar 8, 2019

View reviewed changes

Vigilans mentioned this pull request Mar 8, 2019

Top voted solution webview #193

Merged

Vigilans mentioned this pull request Mar 11, 2019

Add an All problem list #184

Closed

Vigilans closed this May 10, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Star Problems Extension && All Problems Category #188

Star Problems Extension && All Problems Category #188

Vigilans commented Mar 6, 2019

jdneo commented Mar 6, 2019

jdneo Mar 6, 2019

Vigilans Mar 6, 2019 •

edited

Loading

jdneo Mar 7, 2019

Vigilans Mar 7, 2019

jdneo Mar 8, 2019

jdneo Mar 6, 2019

jdneo Mar 6, 2019

Vigilans Mar 6, 2019

Vigilans Mar 7, 2019

jdneo Mar 6, 2019

Vigilans Mar 6, 2019

jdneo Mar 7, 2019

Vigilans Mar 7, 2019

jdneo Mar 7, 2019

jdneo Mar 6, 2019

Vigilans Mar 6, 2019

Vigilans Mar 7, 2019

Vigilans commented Mar 7, 2019 •

edited

Loading

Vigilans Mar 7, 2019

jdneo Mar 8, 2019

Vigilans Mar 8, 2019

jdneo commented Mar 7, 2019

jdneo Mar 8, 2019 •

edited

Loading

Vigilans Mar 8, 2019

Vigilans commented Mar 8, 2019 •

edited

Loading

jdneo commented Mar 10, 2019

Allianzcortex commented Mar 16, 2019

jdneo commented May 10, 2019

Vigilans commented May 10, 2019

		@@ -13,6 +13,8 @@ import { LeetCodeNode } from "./LeetCodeNode";

		export class LeetCodeTreeDataProvider implements vscode.TreeDataProvider<LeetCodeNode> {

		private allProblems: Map<string, IProblem>; // store reference of all problems.

Star Problems Extension && All Problems Category #188

Star Problems Extension && All Problems Category #188

Conversation

Vigilans commented Mar 6, 2019

Introduction

Details

Feature

Flaw

Demonstration

jdneo commented Mar 6, 2019

Choose a reason for hiding this comment

Vigilans Mar 6, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Vigilans commented Mar 7, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jdneo commented Mar 7, 2019

jdneo Mar 8, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Vigilans commented Mar 8, 2019 • edited Loading

TreeItem.id & Collapse State

TreeItem.description

TreeItem.highlight

Toggle Favorite through button

Reference Repo

jdneo commented Mar 10, 2019

Allianzcortex commented Mar 16, 2019

jdneo commented May 10, 2019

Vigilans commented May 10, 2019

Vigilans Mar 6, 2019 •

edited

Loading

Vigilans commented Mar 7, 2019 •

edited

Loading

jdneo Mar 8, 2019 •

edited

Loading

Vigilans commented Mar 8, 2019 •

edited

Loading