Explain how derivatives are calculated

[sc420]

Requirement

We want math to be less daunting, so we should explain how the derivatives are calculated.

Functional Spec v1

• Add a side panel "Explain Derivative" that shows how a derivative is calculated when clicking the derivative link in React Flow nodes
• In "Explain Derivative" side panel, it shows step-by-step chain rule like WolframAlpha
  
• (Nice-to-have) Explain other derivative when clicking derivative component in side panel (e.g., clicking d(e)/d(b))
• (Nice-to-have) Show JavaScript code when clicking the derivative component in side panel (e.g., clicking d(e)/d(b))
• (Nice-to-have) Show LaTeX in "Explain Derivative"

Functional Spec v2

• Add a side panel "Explain Derivative" that shows how a derivative is calculated
• In "Explain Derivative" side panel, it shows step-by-step chain rule like WolframAlpha
• When the current selected nodes change, update the derivative cards in the panel (one card corresponds to each selected node)
• When the core graph changes, clear the derivative cards in the panel because the information may have been invalidated
• When there's no selected nodes, show a hint to select some nodes to explain derivatives
• When user clicks the latex links in the description, expand the node selection and there will be more cards in the panel
• Show LaTeX in "Explain Derivative"

[sc420]

Figma

See specs/Figma/Explain Derivatives.png:

We can add links to both left-hand and right-hand side components. When clicking left-hand side components, it opens the debug panel (a new feature that is nice-to-have) to show the JavaScript code of that node with the corresponding data. When clicking right-hand side components, it creates another card in explain derivatives panel.

I thought about showing some menu asking user whether to show debugging code or explain derivative, but that's too complicated, let's be simple.

Design Spec v1

• Add some explain derivatives state to GraphContainer, the state will be fed to FeaturePanel
• Add a callback prop onClickDerivative to FeaturePanel so that GraphContainer can update the explain derivative states when user clicks the derivative links in explain derivative panel

Design Spec v2

• Add some explain derivatives state to GraphContainer, the state will be fed to FeaturePanel
• GraphContainer is responsible for building the description and latex by some controller (e.g., ExplainDerivativeController) and pass the list of descriptions and latexs to FeaturePanel
• FeaturePanel is responsible for building the MUI cards + accordions components by the passed data from GraphContainer
• Add a callback prop onAddSelectedNode to FeaturePanel so that GraphContainer can add more selected node when user clicks the latex link in the description

[sc420]

Instead of showing the derivatives as links in custom node, we ask user to select a custom node to see the explanation in the explain-derivative panel. We can avoid ugly blue link of the derivative text in custom node, and we can avoid passing callbacks from custom nodes.

[sc420]

I have also enhanced some minor UI/UX:

• When multiple nodes are seleted, adding a new node now deselect all previous nodes
• Windows users can hold Ctrl to select multiple nodes/edges (WinKey also works)
• Can press Backspace/Delete to delete nodes/edges

[sc420]

We can put links to other derivatives (e.g., d(e)/d(c) and d(e)/d(d)) in the description: Replace right-hand side <link1> and <link2> with previously calculated value(s):

[sc420]

There are 4 different types of explanations:

• When target node involves the selected node and target != selected: Show chain rule
• When target node == selected: Derivative must be 1 because df/df = 1
• When target node doesn't involve the selected node: Derivative must be 0
• When the selected node is a constant node: Derivative must be 0 by definition

[sc420]

Let's modify the functional spec v2 item When user clicks the latex links in the description, expand the node selection and there will be more cards in the panel:

When user clicks the latex links in the description, select the node of the latex link. All previously selected nodes will be cleared.

Adding more cards to the explain derivatives panel can easily cause confusion.