Merge pull request #164 from Speedrunyourknowledge/fix/derivative-graph

fix: derivative graph crashed on large intervals and resized itself while moving slider

Author: Speedrunyourknowledge

calc-backend/graph-gen/graph-deriv.py

@@ -38,7 +38,7 @@ def derivative(func, x, h=1e-5):
     return (func(x + h) - func(x - h)) / (2 * h)
 
 # Create an array of x values and evaluate f(x) for these values.
-x_vals = np.arange(x_range[0], x_range[1] + 0.05, 0.05)
+x_vals = np.linspace(x_range[0], x_range[1], num=51)
 f_vals = f(x_vals)
 
 # Initialize the Plotly figure and plot the original function.
@@ -57,28 +57,32 @@ def derivative(func, x, h=1e-5):
                          name='Point'))
 
 # Set the initial layout title with the slope at the starting point.
-fig.update_layout(title=f"Slope Value = {derivative(f, x0):.2f}")
+fig.update_layout(title=(f'Slope Value = {derivative(f, x0):.4f}'), title_font_size=16)
+
+# Get the initial y-axis range
+initial_yaxis= fig.layout['yaxis_range']
 
 # Create frames for the animation slider.
 frames = []
 for slider_val in x_vals:
     # Compute the tangent line at each slider value using our numerical derivative.
-    tan_y = derivative(f, slider_val) * (x_vals - slider_val) + f(slider_val)
+    save_deriv = derivative(f, slider_val)
+    tan_y = save_deriv * (x_vals - slider_val) + f(slider_val)
     frames.append(go.Frame(
         data=[
             go.Scatter(),  # Placeholder for the function trace (remains unchanged).
             go.Scatter(x=x_vals, y=tan_y),  # Tangent line.
             go.Scatter(x=[slider_val], y=[f(slider_val)])  # Point of tangency.
         ],
-        layout=go.Layout(title={'text': f"Slope Value = {derivative(f, slider_val):.2f}"}),
+        layout=go.Layout(title=(f'Slope Value = {save_deriv:.4f}'), yaxis_range= initial_yaxis, yaxis={'autorange':False}),
         name=str(slider_val)
     ))
 fig.frames = frames
 
 # Create a slider to control the animation.
 sliders = [dict(
     active=0,
-    currentvalue={"visible": False},
+    currentvalue=dict(prefix= "Slider", font={'size':14}),
     ticklen=0,               # Hides the line ticks (not enough alone)
     len=1.0,
     y=-0.05,
@@ -88,14 +92,16 @@ def derivative(func, x, h=1e-5):
             args=[
                 [frame.name],
                 dict(mode='immediate',
-                     frame=dict(duration=40, redraw=True),
-                     transition=dict(duration=0))
+                     frame=dict(duration=0, redraw=True),
+                    )
             ],
             label="",         # Hides numbers
         )
         for frame in frames
     ],
     tickcolor='rgba(0,0,0,0)',
+    bordercolor='#949fb3',
+    pad={"t": 10, "b": 10},
 )]
 
 # Adjust padding and final layout settings.
@@ -106,7 +112,8 @@ def derivative(func, x, h=1e-5):
     xaxis=dict(range=[x_range[0], x_range[1]], fixedrange=True),
     yaxis=dict(range=[np.min(f_vals) - pad, np.max(f_vals) + pad], fixedrange=True),
     sliders=sliders,
-    uirevision='static'
+    uirevision='static',
+    margin=dict(t=50, r=0,l=60),
 )
 
 fig_json = fig.to_json(pretty=True)

calc-backend/graph-gen/graph-integral.py

@@ -123,8 +123,9 @@ def generate_bars(n_bars):
 
 sliders = [dict(
     active=0,
-    currentvalue={"prefix": "n = "},
+    currentvalue={"prefix": "n = ", "font":{'size':14}},
     pad={"t": 30},
+    bordercolor='#949fb3',
     steps=steps
 )]
 

calc-backend/src/controllers/graph.controller.ts

@@ -78,6 +78,6 @@ export function createDerivGraph(req: Request, res: Response, next: NextFunction
       res.status(200).send(prettyStr);
     }
   })
-
-  setTimeout(function(){ process.kill()}, 7500);
+  // timeout if graph takes longer than 10 seconds
+  setTimeout(function(){ process.kill()}, 10000);
 }

calc-frontend/src/components/Cosine/IntCosineGraph.tsx

@@ -212,8 +212,10 @@ useLayoutEffect(() => {
       "sliders": [{
         "active": 0,
         "currentvalue": {
-          "prefix": "n = "
+          "prefix": "n = ",
+          "font":{'size':14}
         },
+        "bordercolor":'#949fb3',
         "pad": {
           "t": 30
         },

calc-frontend/src/components/Cubic/IntCubicGraph.tsx

@@ -225,8 +225,10 @@ useLayoutEffect(() => {
       "sliders": [{
         "active": 0,
         "currentvalue": {
-          "prefix": "n = "
+          "prefix": "n = ",
+          "font":{'size':14}
         },
+        "bordercolor":'#949fb3',
         "pad": {
           "t": 30
         },

calc-frontend/src/components/Euler/IntEulerGraph.tsx

@@ -211,8 +211,10 @@ useLayoutEffect(() => {
       "sliders": [{
         "active": 0,
         "currentvalue": {
-          "prefix": "n = "
+          "prefix": "n = ",
+          "font":{'size':14}
         },
+        "bordercolor":'#949fb3',
         "pad": {
           "t": 30
         },

calc-frontend/src/components/Line/IntLineGraph.tsx

@@ -211,8 +211,10 @@ useLayoutEffect(() => {
       "sliders": [{
         "active": 0,
         "currentvalue": {
-          "prefix": "n = "
+          "prefix": "n = ",
+          "font":{'size':14}
         },
+        "bordercolor":'#949fb3',
         "pad": {
           "t": 30
         },

calc-frontend/src/components/NatLog/IntNatLogGraph.tsx

@@ -212,8 +212,10 @@ useLayoutEffect(() => {
       "sliders": [{
         "active": 0,
         "currentvalue": {
-          "prefix": "n = "
+          "prefix": "n = ",
+          "font":{'size':14}
         },
+        "bordercolor":'#949fb3',
         "pad": {
           "t": 30
         },

calc-frontend/src/components/Quadratic/IntQuadraticGraph.tsx

@@ -224,8 +224,10 @@ useLayoutEffect(() => {
       "sliders": [{
         "active": 0,
         "currentvalue": {
-          "prefix": "n = "
+          "prefix": "n = ",
+          "font":{'size':14}
         },
+        "bordercolor":'#949fb3',
         "pad": {
           "t": 30
         },

calc-frontend/src/components/Sine/IntSineGraph.tsx

@@ -212,8 +212,10 @@ useLayoutEffect(() => {
       "sliders": [{
         "active": 0,
         "currentvalue": {
-          "prefix": "n = "
+          "prefix": "n = ",
+          "font":{'size':14}
         },
+        "bordercolor":'#949fb3',
         "pad": {
           "t": 30
         },