Teacher Tool: Block Picker #9936

thsparks · 2024-03-22T22:24:45Z

This change adds a "Block Picker" which can be used for customizable block parameters. Doing this involved:

Making it so the iframe always loads something, even when no sharelink has been provided. We need this so we can call into it to get the blocks. It's invisible when there is no share link, but it's still loaded.
Adding commands we can send to the iframe to get all the toolbox categories & blocks, then to get images of blocks (as xml, when we have it, or simply by id)
Adding a new modal for the block picker, which displays categories and blocks to choose from
Some adjustments to the LazyImage to make the loading look a little smoother (I think)

Upload Target: ~~https://makecode.microbit.org/app/400c169359d2defd8af3c8aa838f740f3a932406-c40b446680--eval?tc=1~~ https://makecode.microbit.org/app/a60b885ddbfa1cf3cc0f4407e122347ce0c1ebf9-d07aa77cc2--eval?tc=1

Screenshots

(In order to prevent modal resizing, the modal is large even when all categories are collapsed)

Expand to see blocks

I change the color of the button but do not insert an image of the block in the rubric. I think the actual blocks would be too big a lot of the time:

… working...

…hem in Control.

…ate the block xml

…ow we would render blocks with dropdowns.

…ks/teachertool/block_picker

eanders-ms

Looking great. Made some minor comments/suggestions.

teachertool/src/components/BlockPickerModal.tsx

eanders-ms · 2024-03-25T23:35:07Z

teachertool/src/components/BlockPickerModal.tsx

+                    className={classList(css["category-block-list"], expanded ? css["expanded"] : css["collapsed"])}
+                >
+                    {category.blocks.map(block => (
+                        <PickBlockButton block={block} category={category} onBlockSelected={blockSelected} />


missing key prop

eanders-ms · 2024-03-25T23:40:35Z

teachertool/src/components/CriteriaInstanceDisplay.tsx

+
+        // Scan all categories and find the block with the matching id
+        for (const category of Object.values(teacherTool.toolboxCategories)) {
+            for (const block of category.blocks ?? []) {


Small suggestion... you could use find here:

const block = category.blocks?.find(b => b.blockId === param.value); if (block) { return { category, block }; }

eanders-ms · 2024-03-25T23:43:22Z

teachertool/src/components/styling/BlockPickerModal.module.scss

+                    padding: 0.5rem;
+                    text-align: start;
+                    font-weight: 800;
+                    font-size: 1.3em;


Suggested change

font-size: 1.3em;

font-size: 1.3rem;

unless you wanted to inherit size units from parent element?

eanders-ms · 2024-03-25T23:43:47Z

teachertool/src/components/styling/BlockPickerModal.module.scss

+                            border-radius: 0.2rem;
+                            color: white;
+                            border: 1px solid rgba(0, 0, 0, 0.5);
+                            font-size: 1em;


same as above

Suggested change

font-size: 1em;

font-size: 1rem;

eanders-ms · 2024-03-25T23:50:30Z

teachertool/src/transforms/loadToolboxCategoriesAsync.ts

+    }
+
+    function shouldIncludeCategory(category: pxt.editor.ToolboxCategoryDefinition) {
+        return category && category.name && category.blocks?.length != 0;


According to the parameter definition, category cannot be null/undefined here. If it can be, indicate with category?: ....

Suggested change

return category && category.name && category.blocks?.length != 0;

return category.name && category.blocks?.length != 0;

eanders-ms · 2024-03-25T23:53:57Z

teachertool/src/services/makecodeEditorService.ts

    }
 }

+export async function getToolboxCategories(


Suggested change

export async function getToolboxCategories(

export async function getToolboxCategoriesAsync(

eanders-ms · 2024-03-25T23:59:36Z

teachertool/src/services/makecodeEditorService.ts

@@ -28,6 +28,9 @@ export function setEditorRef(ref: HTMLIFrameElement | undefined) {
        });
        driver.addEventListener("editorcontentloaded", ev => {
            AutorunService.poke();
+
+            // Reload all blocks.
+            loadToolboxCategoriesAsync();


await this?

I think it's okay to just let this run in the background without awaiting. I'll update comments to indicate that's intentional.

eanders-ms · 2024-03-26T00:02:42Z

teachertool/src/state/state.ts

@@ -15,6 +15,9 @@ export type AppState = {
    validatorPlans: pxt.blocks.ValidatorPlan[] | undefined;
    autorun: boolean;
    confirmationOptions: ConfirmationModalOptions | undefined;
+    blockPickerOptions: BlockPickerOptions | undefined;


At some point we may want to have a single modalOptions field as a compound type, e.g.: modalOptions: ConfirmationModalOptions | BlockPickerOptions | undefined

I went ahead and combined them, though I took a slightly different approach. May have gone a little overboard with it, but I wanted to avoid blindly casting to the desired types inside the modals themselves, so I ended up making an interface for the options with a modal field we can check against. LMK if you think it's too much.

Your changes look fine, but I think it could be simplified a bit:

Remove modal from AppState. The presence of a modalOptions is enough to know if a modal is showing, and which one.

Use a union of types for the different modal options, with no base:

export interface ConfirmationModalOptions { modal: "confirmation"; title: string; message: string; onCancel: () => void; onContinue: () => void; } export interface BlockPickerOptions { modal: "block-picker"; criteriaInstanceId: string; paramName: string; } export type ModalOptions = ConfirmationModalOptions | BlockPickerOptions;

For showing a modal, implement a single showModal transform that takes a ModalOptions parameter:

export function showModal(modalOptions: ModalOptions) { // dispatch the action ... }

teachertool/src/transforms/loadToolboxCategoriesAsync.ts

…tentionally not awaiting

eanders-ms

Made one more suggestion for modal options, but looks great.

thsparks added 30 commits March 15, 2024 12:40

Add ability to get an image uri from a block type using the iframe

0b5a49a

Add GetBlocksInfo request

52f6610

First pass at loading iframe even without a project, not sure if it's…

24865ae

… working...

Debug block picking & displaying

5268f00

Load all blocks into state

dfca3b3

Block picker modal base, button to add

ad203fa

Working on block picker modal...

30e28f5

Remove debug code

24591d8

Change how we get categories

55f50a7

Remove unused getBlocksInfo

207071b

Some styling

ac3ff69

More styling

797fbbd

Use custom expansion

c686b78

More styling

57e534d

Connect modal and parameter value

ee9f912

Fix rendering xml that doesn't have surrounding <xml> tags

1ba05cd

Get advanced and non-advanced categories

b82a0dc

Load blocks when frame loads, adjust styling

aaa25bf

Update criteria block displays when toolbox categories load

359d8af

loadAllBlocks -> loadToolboxCategories

350cc76

Better rename

8fa8eef

Use block tooltip when possible

afc457b

Remove duplicate block ids

5cd4825

Prettier

f3afe6a

Lock height

c9e68b9

Escape block id string. Surprisingly, there are some with quotes in t…

13df287

…hem in Control.

Add to do

221d6a1

Use spread operator to simplify conversion

a2caacf

When we don't have blockXml, use existing createToolboxBlock to gener…

aa05ede

…ate the block xml

Remove unused escapeForXml code

55fc40b

thsparks added 13 commits March 22, 2024 10:22

Fix block display issues caused by display:none. It seemed to break h…

0f39a18

…ow we would render blocks with dropdowns.

Reload blocks when the editorcontentloaded event fires.

92756b0

Remove unused useEffect import.

4b9781d

Add optional loading element for lazy image to replace spinner

130c5c1

React common build gulp export

1497d9f

Remove unnecessary style

a4f339d

Remove test code

438a420

Undo styling-only changes

0b89be7

Prettier

df6d197

Undo style only change

c6b44a5

Style & comments

9929a92

Merge branch 'master' of https://github.com/microsoft/pxt into thspar…

ab0b8cb

…ks/teachertool/block_picker

Constant strings

d8da579

thsparks requested a review from a team March 22, 2024 22:24

thsparks added 2 commits March 25, 2024 15:35

Merge branch 'master' of https://github.com/microsoft/pxt into thspar…

59faeee

…ks/teachertool/block_picker

Fix padding on the right

d7b8275

eanders-ms reviewed Mar 26, 2024

View reviewed changes

thsparks added 8 commits March 26, 2024 10:16

Add key props

5cb8e04

Use find to lookup block in category

0b67a33

Use rem not em for fonts

ae49127

loadToolboxCategoriesAsync PR feedback

2fbadff

Async in getToolboxCategories function name

be091a3

Update comments around loadToolboxCategoriesAsync to clarify we're in…

b812e25

…tentionally not awaiting

Combine modal options

bf18f57

Prettier

a97eace

eanders-ms approved these changes Mar 26, 2024

View reviewed changes

thsparks added 2 commits March 26, 2024 16:37

Remove modal from state, only use ModalOptions instead

fcb60ba

Prettier

713c29a

thsparks merged commit a344259 into master Mar 27, 2024
6 checks passed

thsparks deleted the thsparks/teachertool/block_picker branch March 27, 2024 00:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Teacher Tool: Block Picker #9936

Teacher Tool: Block Picker #9936

thsparks commented Mar 22, 2024 •

edited

Loading

eanders-ms left a comment

eanders-ms Mar 25, 2024

eanders-ms Mar 25, 2024

eanders-ms Mar 25, 2024

eanders-ms Mar 25, 2024

eanders-ms Mar 25, 2024

eanders-ms Mar 25, 2024

eanders-ms Mar 25, 2024

thsparks Mar 26, 2024

eanders-ms Mar 26, 2024

thsparks Mar 26, 2024

eanders-ms Mar 26, 2024

eanders-ms left a comment

	return category && category.name && category.blocks?.length != 0;
	return category.name && category.blocks?.length != 0;

	export async function getToolboxCategories(
	export async function getToolboxCategoriesAsync(

Teacher Tool: Block Picker #9936

Teacher Tool: Block Picker #9936

Conversation

thsparks commented Mar 22, 2024 • edited Loading

eanders-ms left a 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

eanders-ms left a comment

Choose a reason for hiding this comment

thsparks commented Mar 22, 2024 •

edited

Loading