Fix line block log scale + axis label (flojoy-ai#1026)

LatentDream · Dec 22, 2023 · 0a0906f · 0a0906f
1 parent 05c76f7
commit 0a0906f
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 4 deletions.
diff --git a/blocks/DATA/VISUALIZATION/PLOTLY/LINE/LINE.py b/blocks/DATA/VISUALIZATION/PLOTLY/LINE/LINE.py
@@ -6,13 +6,23 @@
 
 
 @flojoy
-def LINE(default: OrderedPair | DataFrame | Matrix | Vector) -> Plotly:
+def LINE(
+    default: OrderedPair | DataFrame | Matrix | Vector,
+    xaxis_title: str = "",
+    yaxis_title: str = "",
+    x_log_scale: bool = False,
+    y_log_scale: bool = False,
+) -> Plotly:
     """Create a Plotly Line visualization for a given input DataContainer.
 
     Parameters
     ----------
     default : OrderedPair|DataFrame|Matrix|Vector
         the DataContainer to be visualized
+    xaxis_title: str
+        Choose the label for the x axis.
+    yaxis_title: str
+        Choose the label for the y axis.
 
     Returns
     -------
@@ -77,4 +87,18 @@ def LINE(default: OrderedPair | DataFrame | Matrix | Vector) -> Plotly:
             x = arange(len(y))
             fig.add_trace(go.Scatter(x=x, y=y, mode="lines"))
 
+    if xaxis_title != "":
+        fig.update_layout(
+            xaxis_title=xaxis_title,
+        )
+    if yaxis_title != "":
+        fig.update_layout(
+            margin=dict(l=64, r=32, t=32, b=32),
+            yaxis_title=yaxis_title,
+        )
+    if x_log_scale:
+        fig.update_xaxes(type="log")
+    if y_log_scale:
+        fig.update_yaxes(type="log")
+
     return Plotly(fig=fig)
diff --git a/blocks/DATA/VISUALIZATION/PLOTLY/LINE/block_data.json b/blocks/DATA/VISUALIZATION/PLOTLY/LINE/block_data.json
@@ -7,6 +7,16 @@
         "name": "default",
         "type": "OrderedPair|DataFrame|Matrix|Vector",
         "description": "the DataContainer to be visualized"
+      },
+      {
+        "name": "xaxis_title",
+        "type": "str",
+        "description": "Choose the label for the x axis."
+      },
+      {
+        "name": "yaxis_title",
+        "type": "str",
+        "description": "Choose the label for the y axis."
       }
     ],
     "returns": [

diff --git a/src/renderer/components/plotly/PlotlyComponent.tsx b/src/renderer/components/plotly/PlotlyComponent.tsx
@@ -5,6 +5,7 @@ import { plotLayout } from "./layout";
 import { useMemo } from "react";
 import { PlotProps } from "@src/types/plotly";
 import { useTheme } from "@src/providers/themeProvider";
+import _ from "lodash";
 
 const MATRIX_SIZE = {
   width: 240,
@@ -13,6 +14,13 @@ const MATRIX_SIZE = {
 
 const Plot = createPlotlyComponent(Plotly);
 
+const DEFAULT_MARGIN = {
+  l: 0,
+  b: 0,
+  r: 0,
+  t: 30,
+};
+
 const PlotlyComponent = (props: PlotProps) => {
   const { data, layout, useResizeHandler, style, isThumbnail } = props;
   const { resolvedTheme: theme } = useTheme();
@@ -21,13 +29,18 @@ const PlotlyComponent = (props: PlotProps) => {
   const isMatrix = data[0]?.header?.values?.length === 0;
   const is3dPlot = data[0]?.type === "surface" || data[0]?.type === "scatter3d";
 
+  const margin = _.isEqual(layout.margin, DEFAULT_MARGIN)
+    ? defaultPlotLayout.margin
+    : layout.margin;
+
   return (
     <Plot
       {...props}
       data={data}
       layout={{
-        ...layout,
         ...defaultPlotLayout,
+        ...layout,
+        margin,
         showlegend: !isThumbnail,
         ...(isThumbnail && isMatrix && MATRIX_SIZE),
       }}

diff --git a/src/renderer/components/plotly/layout.ts b/src/renderer/components/plotly/layout.ts
@@ -10,8 +10,6 @@ export const plotLayout = (theme: "dark" | "light") => {
     autosize: true,
     font: { color: accentColor },
     margin: { t: 32, r: 32, b: 32, l: 32 },
-    xaxis: { zeroline: false, type: "-" },
-    template: {},
   };
   return defaultLayout;
 };