How can I call the Javascript that shows/hides the AI analysis?

www.may69.com · September 5, 2022, 10:45pm

Hello, in this related thread I learned how to use the GUI to show/hide the AI analysis.

Now, I would like to know what Javascript/Typescript function is called to show and hide it.

Why? Because I am trying to write a Chrome plugin that shows/hides the analysis as part of making flashcards - GitHub - metaperl/baduk-flash: Make flashcards of baduk/go/weiqi positions

shinuito · September 5, 2022, 10:51pm

It looks like it’s called toggleAIReview

github.com

online-go/online-go.com/blob/c415ac02e790c39b0bf29cdb0d27cb22122e64b1/src/views/Game/Game.tsx#L868

      
        
                        <KBShortcut
                            shortcut="f9"
                            action={() => setAnalyzeTool("draw", analyze_pencil_color)}
                        />
                        {((goban && goban.current.mode === "analyze") || null) && (
                            <KBShortcut shortcut="f10" action={clear_and_sync} />
                        )}
                        <KBShortcut shortcut="del" action={delete_branch} />
                        <KBShortcut shortcut="shift-z" action={toggleZenMode} />
                        <KBShortcut shortcut="shift-c" action={toggleCoordinates} />
                        <KBShortcut shortcut="shift-i" action={toggleAIReview} />
                        <KBShortcut shortcut="shift-a" action={gameAnalyze} />
                        <KBShortcut shortcut="shift-r" action={startReview} />
                        <KBShortcut shortcut="shift-e" action={estimateScore} />
                        <KBShortcut shortcut="shift-p" action={goban_setModeDeferredPlay} />
                    </div>
                );
            };
            
            
const setMoveTreeContainer = (resizable: Resizable): void => {
                ref_move_tree_container.current = resizable ? resizable.div : null;

defined further up

github.com

online-go/online-go.com/blob/c415ac02e790c39b0bf29cdb0d27cb22122e64b1/src/views/Game/Game.tsx#L474

      
        
                    set_zen_mode(false);
                    set_view_mode(goban_view_mode());
                } else {
                    const body = document.getElementsByTagName("body")[0];
                    body.classList.add("zen"); //add the class
                    set_zen_mode(true);
                    set_view_mode(goban_view_mode());
                }
                onResize();
            };
            const toggleAIReview = () => {
                preferences.set("ai-review-enabled", !ai_review_enabled);
                if (ai_review_enabled) {
                    goban.current.setHeatmap(null);
                    goban.current.setColoredCircles(null);
                    let move_tree = goban.current.engine.move_tree;
                    while (move_tree.next(true)) {
                        move_tree = move_tree.next(true);
                        move_tree.clearMarks();
                    }
                    goban.current.redraw();

www.may69.com · September 5, 2022, 11:37pm

OK - but when I call that in the developer console I get this error:

Uncaught ReferenceError: toggleAIReview is not defined
    at <anonymous>:1:1

and it also is not callable from the Chrome plugin I am developing… any idea why?

I am on the online-go tab of my browser and I am in a game review looking at the analysis when I attempt to invoke toggleAIReview()

Furthermore, pressing shift-I does in act toggle the AI review. So the function is definitely in memory.

GreenAsJade · September 5, 2022, 11:39pm

It’s not a global method, it’s a method of the Game component.

(Whether you can, and how to call that from the console I do not know, I haven’t tried to dig into that … I’m just explaining why you can’t simply say toggleAIReview() in the console. My initial guess is that “it may not be possible”. I had a quick google of “call react component method from console” and didn’t have an immediate solution… that’s the kind of direction you need to look in I think)

shinuito · September 6, 2022, 1:10am

Presumably though one might be able to simulate clicking the show/hide button or pressing ctrl+i as part of some other bit of code.

So you have your plugin do something, and then it triggers clicking a button or pressing a keyboard shortcut?

(I haven’t tried writing a browser plugin before)

benjito · September 6, 2022, 2:05am

document.dispatchEvent(new KeyboardEvent('keydown', {
    key: 'i',
    keyCode: 73,
    shiftKey: true
}))

shinuito · September 6, 2022, 8:30am

shift+i yes!

Also cool

www.may69.com · September 6, 2022, 12:27pm

what worked is finding the anchor tag and then clicking it - baduk-flash/baduk_flash.js at main · metaperl/baduk-flash · GitHub

www.may69.com · September 6, 2022, 12:28pm

Yes theoretically that should work. If I get the focus back to the tab. What did work was finding the anchor tag and clicking it - baduk-flash/baduk_flash.js at main · metaperl/baduk-flash · GitHub

benjito · September 6, 2022, 1:49pm

Nice!

Not really theoretical - you can enter that in the console and see

    toggleAI() {
        let dock = document.getElementsByClassName('Dock')[0]
        let anchors = dock.getElementsByTagName('a')
        anchors[3].click();
    }

Did you test this on a ladder/tournament game? I don’t think you can rely on AI review being the 3rd element…

www.may69.com · September 6, 2022, 10:27pm

I did not. Yes, I had hoped to be able to locate the element by ID. Or, to locate it using the content of the anchor tag… the method i found for searching via anchor tag content did not work… perhaps because of the italicized content before the actual text.

www.may69.com · September 6, 2022, 10:34pm

Ah, yes, i have now re-implemented toggleAI() to send the keypress event and it is working. Thanks for the feedback.