Conditional tab rendering in Playground #808

alcen · 2019-08-05T05:36:45Z

In this commit, tabs in the Playground are now tied to their respective chapters. For example, Source §1 now only shows the "Introduction" tab.

A screenshot of what happens when 'Source §2' is selected in the Playground:

This change is done in line with the future addition of the Substituter feature, which is only enabled for Source §2 and below - see #803

Note: disabling of tabs based on chapters is not done for Sourcecast and Sourcereel as I am not sure how it would affect the recording. If the developers for these features would advise how to do so, that would be great!

Note 2: this Pull Request was originally full of different unrelated changes for Playground side content. The changes have been since rebased into their own PRs:

Description	Pull Request No.
Assessments default tab fix	#819
Conditional tab rendering	#808
Default tab text	#820
List visualiser scrolling fix	#817
List visualiser orange flashing	#818

Thanks to @lumos309 for a bug fix for a Playground crash when the editor was trying to find the non-existent Inspector/Env Visualiser tabs!

alcen · 2019-08-05T05:39:48Z

For reference, these are the raw default texts used in the code:

Data Visualiser:

The data visualizer visualises data structures.
<br/>
<br/>
It is activated by calling the function <code>draw_data(the_data)</code>,
where <code>the_data</code> would be the data structure that you want to visualise.

Inspector:

The inspector generates a list of variable bindings based on breakpoints set in the editor.
<br/>
<br/>
It is activated by clicking on the gutter of the editor (where all the line numbers are,
on the left) to set a breakpoint, and then running the program. Alternatively, you may
add the line <code>debugger;</code> to your program!

Env Visualiser:

The environmental model visualizer generates the environmental model diagram
based on breakpoints set in the editor.
<br/>
<br/>
It is activated by clicking on the gutter of the editor (where all the line numbers are,
on the left) to set a breakpoint, and then running the program. Alternatively, you may
add the line <code>debugger;</code> to your program!

coveralls · 2019-08-05T05:42:03Z

Pull Request Test Coverage Report for Build 2839

5 of 7 (71.43%) changed or added relevant lines in 2 files are covered.
1 unchanged line in 1 file lost coverage.
Overall coverage increased (+0.05%) to 37.357%

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/components/Playground.tsx	4	6	66.67%

Files with Coverage Reduction	New Missed Lines	%
src/components/Playground.tsx	1	82.54%

Totals
Change from base Build 2837:	0.05%
Covered Lines:	2502
Relevant Lines:	6021

💛 - Coveralls

martin-henz · 2019-08-06T02:23:32Z

For reference, these are the raw default texts used in the code:

Data Visualiser:

The data visualizer visualises data structures.
<br/>
<br/>
It is activated by calling the function <code>draw_data(the_data)</code>,
where <code>the_data</code> would be the data structure that you want to visualise.

Inspector:

The inspector generates a list of variable bindings based on breakpoints set in the editor.
<br/>
<br/>
It is activated by clicking on the gutter of the editor (where all the line numbers are,
on the left) to set a breakpoint, and then running the program. Alternatively, you may
add the line <code>debugger;</code> to your program!

Env Visualiser:

The environmental model visualizer generates the environmental model diagram
based on breakpoints set in the editor.
<br/>
<br/>
It is activated by clicking on the gutter of the editor (where all the line numbers are,
on the left) to set a breakpoint, and then running the program. Alternatively, you may
add the line <code>debugger;</code> to your program!

Note that gutter click is different from debugger; statements. We decided not to support debugger; statements, after discussing with @podocarp . In fact, this Issue requests removing support of debugger; statements in Source: source-academy/js-slang#276

So let's not mention debugger; in the default texts.

alcen · 2019-08-06T02:27:31Z

For reference, these are the raw default texts used in the code:
Data Visualiser:
The data visualizer visualises data structures.

It is activated by calling the function draw_data(the_data),
where the_data would be the data structure that you want to visualise.

Inspector:
The inspector generates a list of variable bindings based on breakpoints set in the editor.

It is activated by clicking on the gutter of the editor (where all the line numbers are,
on the left) to set a breakpoint, and then running the program. Alternatively, you may
add the line debugger; to your program!

Env Visualiser:
The environmental model visualizer generates the environmental model diagram
based on breakpoints set in the editor.

It is activated by clicking on the gutter of the editor (where all the line numbers are,
on the left) to set a breakpoint, and then running the program. Alternatively, you may
add the line debugger; to your program!

Note that gutter click is different from debugger; statements. We decided not to support debugger; statements, after discussing with @podocarp . In fact, this Issue requests removing support of debugger; statements in Source: source-academy/js-slang#276
So let's not mention debugger; in the default texts.

Oh, I see. Okay, will change this!

martin-henz · 2019-08-06T03:13:05Z

Here are my suggestions for the text:

Data Visualizer:

The data visualizer visualises data structures.

It is activated by calling the function draw_data(the_data),
where the_data would be the data structure that you want to visualise.
The data visualizer uses box-and-pointer diagrams, as introduced in
Structure and Interpretation of Computer Programs, JavaScript Adaptation, Chapter 2.

Inspector:

The inspector generates a list of variable bindings based on breakpoints set in the editor.

It is activated by clicking on the gutter of the editor (where all the line numbers are,
on the left) to set a breakpoint, and then running the program.

Environment Visualizer:

The environment visualizer generates the environment model diagram
based on breakpoints set in the editor.

It is activated by clicking on the gutter of the editor (where all the line numbers are,
on the left) to set a breakpoint, and then running the program. The environment model diagram follows a notation introduced in Structure and Interpretation of Computer Programs, JavaScript Adaptation, Section 3.2.

martin-henz · 2019-08-06T03:14:07Z

Here are my suggestions for the text:

Data Visualizer:

The data visualizer visualises data structures.

It is activated by calling the function draw_data(the_data),
where the_data would be the data structure that you want to visualise.
The data visualizer uses box-and-pointer diagrams, as introduced in
Structure and Interpretation of Computer Programs, JavaScript Adaptation, Chapter 2.

Inspector:

The inspector generates a list of variable bindings based on breakpoints set in the editor.

It is activated by clicking on the gutter of the editor (where all the line numbers are,
on the left) to set a breakpoint, and then running the program.

Environment Visualizer:

The environment visualizer generates the environment model diagram
based on breakpoints set in the editor.

It is activated by clicking on the gutter of the editor (where all the line numbers are,
on the left) to set a breakpoint, and then running the program. The environment model diagram follows a notation introduced in Structure and Interpretation of Computer Programs, JavaScript Adaptation, Section 3.2.

It would be good to use a link to the textbook. Note that the textbook URL is in cadet-frontend/src/utils/constants.ts

lumos309 · 2019-08-06T03:22:41Z

Hmm, this seems to break for me when running any program with Source 1 or 2 selected. The inspector code still tries to run and update a non-existent tab, which crashes the whole thing.

alcen · 2019-08-06T03:33:50Z

Here are my suggestions for the text:
Data Visualizer:
The data visualizer visualises data structures.
It is activated by calling the function draw_data(the_data),
where the_data would be the data structure that you want to visualise.
The data visualizer uses box-and-pointer diagrams, as introduced in
Structure and Interpretation of Computer Programs, JavaScript Adaptation, Chapter 2.
Inspector:
The inspector generates a list of variable bindings based on breakpoints set in the editor.
It is activated by clicking on the gutter of the editor (where all the line numbers are,
on the left) to set a breakpoint, and then running the program.
Environment Visualizer:
The environment visualizer generates the environment model diagram
based on breakpoints set in the editor.
It is activated by clicking on the gutter of the editor (where all the line numbers are,
on the left) to set a breakpoint, and then running the program. The environment model diagram follows a notation introduced in Structure and Interpretation of Computer Programs, JavaScript Adaptation, Section 3.2.

It would be good to use a link to the textbook. Note that the textbook URL is in cadet-frontend/src/utils/constants.ts

Ok, I'll add this in!

Hmm, this seems to break for me when running any program with Source 1 or 2 selected. The inspector code still tries to run and update a non-existent tab, which crashes the whole thing.

Will look into this!

geshuming · 2019-08-08T11:36:01Z

src/sagas/workspaces.ts

    (actionType === actionTypes.EVAL_EDITOR || actionType === actionTypes.DEBUG_RESUME) &&
    context.chapter > 2;
-  if (!context.runtime.debuggerOn) {
+  if (!context.runtime.debuggerOn && context.chapter > 2) {


Can we make this more logical, this part has always been making my brain explode.

const useDebugger = actionType !== actionTypes.EVAL_EDITOR && actionType !== actionTypes.DEBUG_RESUME && context.chapter > 2; if (useDebugger) { inspectorUpdate(undefined); }

Honestly though, I don't even think the above code segment makes any sense. Please comment on what this code segment is even intended to do.

Okay, debuggerOn is used as a flag for slang.

So the correct code should look like

context.runtime.debuggerOn = (actionType === actionTypes.EVAL_EDITOR || actionType === actionTypes.DEBUG_RESUME) && context.chapter > 2; if (context.runtime.debuggerOn) { // Resets the inspector to prepare for new output inspectorUpdate(undefined); }

This was done by the INSPECT team, so I'm not certain about how it works either. Having said that, this:

Okay, debuggerOn is used as a flag for slang.

So the correct code should look like

context.runtime.debuggerOn = (actionType === actionTypes.EVAL_EDITOR || actionType === actionTypes.DEBUG_RESUME) && context.chapter > 2; if (context.runtime.debuggerOn) { // Resets the inspector to prepare for new output inspectorUpdate(undefined); }

doesn't seem to be the same boolean expression as the original code. !(actionType === actionTypes.EVAL_EDITOR || actionType === actionTypes.DEBUG_RESUME) && context.chapter > 2 will call inspectorUpdate(undefined) in the original code, but not in the suggested amendment.

My mistake. The clause should be

if (!context.runtime.debuggerOn)

just like the original code

No, this won't work because it can trigger inspectedUpdate(undefined) even when !(context.chapter > 2), and that crashes the entire webpage. That's what the change was originally for.

Ok, can we clean this up then. The logic here is very confusing. Can we add comments to clarify?

geshuming

Can we split this PR into smaller PRs, all rebased. The PR title doesn't even match what this PR is trying to achieve.

* Data visualiser tab now only enabled for Source Chapter 2 and above * Inspector/Env Visualiser tabs now only enabled for Source Chapter 3 and above

…tend into conditional-tabs

alcen · 2019-08-09T01:49:52Z

Can we split this PR into smaller PRs, all rebased. The PR title doesn't even match what this PR is trying to achieve.

Ok, I have split it up. The new pull requests can be found at:

Assessments default tab fix: #819
Conditional tab rendering: #808
Default tab text: #820
List visualiser scrolling fix: #817
List visualiser orange flashing: #818

geshuming

LGTM

* Change default tab of ungraded assessments back to 'Task X' (#826) * Fix incorrect type declarations in IQuestion interface (#827) * Include null type in type declaration for grader, gradedAt in IQuestion * Update mocks such that Grading only renders for closed assessments * Add test to assert Grading tab is rendered when grader is non-null * Bump js-slang to 0.2.6 (#831) * Resizing editor to a larger size no longer makes it disappear (#832) * Update README.md (#810) * Version cadet (#798) * clean up libraries: removing streams and adding comment for lists stating the purpose to remain here * fixes wrong version in js console message * Default texts for data visualiser, inspector, env visualiser (#820) * Added default texts to be shown before Data/Insp/Env are used * Remove mentions of 'debugger;' * Modified default texts for Playground * Added links to textbook * Links now open in new tab * Conditional tab rendering in Playground (#808) * Conditional tab rendering for Playground * Data visualiser tab now only enabled for Source Chapter 2 and above * Inspector/Env Visualiser tabs now only enabled for Source Chapter 3 and above * Fix For Crashing in Source §1 & §2 * Integrate file upload system (#830) * Add basic dropzone for material uploading * Revamp dropzone styling * Finish file saving logics * Finish file retriving logics * Allow downloading of files * Allow deleting of materials * Rename academy materials to materialsUpload * Extract out materialTable * Add public tab for materials * Allow creating of materials folder * Update snapshot * Fix conflicts * Rename name to title * Close dialog after creating folder * Allow deleting of folder * Show index by folder id * Get directory tree info from backend * Improve UI for materialTable * Add material to specific folder * Add material folder to specific folder * Stay in current folder after add/delete actions * Improve table UI * Restructure files and folders * Remove duplicate file * Clean up repo * clean up libraries: removing streams and adding comment for lists sta… (#781) * clean up libraries: removing streams and adding comment for lists stating the purpose to remain here * addresses #781 (comment) * Improve display for sourcecast table (#834) * Update sourcecast table styling * Fix auto resizing * Display upload date in table * Clean up repo * Use material theme for material table (#835) * Fix hollusion not rendering by: (#825) * Fix hollusion not rendering by: - removing dangerous getElementBy... - encapsulating canvas in ShapeDrawn - Passing canvas down to CanvasOutput - Made global canvas a constant. (copy out of it) - Rewriting all draw calls (curve, show, anaglyph, hollusion) to return a canvas. * Linting fixes. * Increased number of hollusion frames as requested. * Data Viz: Resize viewport to fit drawing (#785) * Resize viewport to fit drawing * Fixed bug for circular lists

martin-henz requested a review from geshuming August 8, 2019 04:26

geshuming requested changes Aug 8, 2019

View reviewed changes

alcen and others added 3 commits August 9, 2019 09:39

Conditional tab rendering for Playground

0bfad59

* Data visualiser tab now only enabled for Source Chapter 2 and above * Inspector/Env Visualiser tabs now only enabled for Source Chapter 3 and above

Fix For Crashing in Source §1 & §2

ad8c3d9

Merge branch 'master' of https://github.com/source-academy/cadet-fron…

88d57ae

…tend into conditional-tabs

This was referenced Aug 9, 2019

Default texts for data visualiser, inspector, env visualiser #820

Merged

Orange flashing for data visualiser when used #818

Merged

Fix resizing of list visualiser for large drawings #817

Merged

Default tab for graded assessments set to grading tab #819

Merged

alcen force-pushed the conditional-tabs branch from 3c44f34 to 88d57ae Compare August 9, 2019 01:47

alcen changed the title ~~Conditional tab rendering in Playground, default tabs for assessment~~ Conditional tab rendering in Playground Aug 9, 2019

alcen added 2 commits August 9, 2019 11:31

Merge branch 'master' into conditional-tabs

5f2dc6e

Merge branch 'master' into conditional-tabs

928acd9

geshuming approved these changes Aug 9, 2019

View reviewed changes

geshuming and others added 6 commits August 9, 2019 16:07

Merge branch 'master' into conditional-tabs

9e7a7f0

Merge branch 'master' into conditional-tabs

26ba009

Merge branch 'master' into conditional-tabs

f5d4af6

Merge branch 'master' into conditional-tabs

1561eec

Merge branch 'master' into conditional-tabs

85c41c8

Merge branch 'master' into conditional-tabs

b806b10

martin-henz merged commit faf180d into master Aug 11, 2019

jiayushe deleted the conditional-tabs branch August 11, 2019 15:33

Conditional tab rendering in Playground #808

Conditional tab rendering in Playground #808

Uh oh!

Conversation

alcen commented Aug 5, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alcen commented Aug 5, 2019

Uh oh!

coveralls commented Aug 5, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull Request Test Coverage Report for Build 2839

💛 - Coveralls

Uh oh!

martin-henz commented Aug 6, 2019

Uh oh!

alcen commented Aug 6, 2019

Uh oh!

martin-henz commented Aug 6, 2019

Uh oh!

martin-henz commented Aug 6, 2019

Uh oh!

lumos309 commented Aug 6, 2019

Uh oh!

alcen commented Aug 6, 2019

Uh oh!

geshuming Aug 8, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

geshuming Aug 8, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lumos309 Aug 8, 2019

Choose a reason for hiding this comment

Uh oh!

geshuming Aug 8, 2019

Choose a reason for hiding this comment

Uh oh!

lumos309 Aug 8, 2019

Choose a reason for hiding this comment

Uh oh!

geshuming Aug 8, 2019

Choose a reason for hiding this comment

Uh oh!

geshuming left a comment

Choose a reason for hiding this comment

Uh oh!

alcen commented Aug 9, 2019

Uh oh!

geshuming left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

alcen commented Aug 5, 2019 •

edited

Loading

coveralls commented Aug 5, 2019 •

edited

Loading

geshuming Aug 8, 2019 •

edited

Loading

geshuming Aug 8, 2019 •

edited

Loading