updates

frontend-components/plotly/src/components/Chart.tsx

@@ -35,10 +35,9 @@ export default function Chart({
 }) {
   const posthog = usePostHog();
 
-  if (info)
-    useEffect(() => {
-      if (posthog) posthog.capture("chart", info);
-    }, [posthog]);
+  useEffect(() => {
+    if (posthog) posthog.capture("chart", info);
+  }, [info]);
 
   delete json.layout.width;
   delete json.layout.height;
@@ -51,10 +50,10 @@ export default function Chart({
   const [chartTitle, setChartTitle] = useState(title);
   const [axesTitles, setAxesTitles] = useState({});
   const [plotLoaded, setPlotLoaded] = useState(false);
-  const [modal, setModal] = useState({ modal: "" });
+  const [modal, setModal] = useState({ name: "" });
   const [loading, setLoading] = useState(false);
   const [plotDiv, setPlotDiv] = useState(null);
-  const [Volume, setVolume] = useState({ old_nticks: {} });
+  const [volumeBars, setVolumeBars] = useState({ old_nticks: {} });
 
   const [plotData, setPlotData] = useState(json);
   const [annotations, setAnnotations] = useState([]);
@@ -65,7 +64,7 @@ export default function Chart({
   const [colorActive, setColorActive] = useState(false);
   const [onAnnotationClick, setOnAnnotationClick] = useState({});
 
-  const onClose = () => setModal({ modal: "" });
+  const onClose = () => setModal({ name: "" });
 
   // @ts-ignore
   function onDeleteAnnotation(annotation) {
@@ -96,16 +95,18 @@ export default function Chart({
     });
   }
 
-  if (axesTitles && Object.keys(axesTitles).length > 0) {
-    Object.keys(axesTitles).forEach((k) => {
-      plotData.layout[k].title = {
-        ...(plotData.layout[k].title || {}),
-        text: axesTitles[k],
-      };
-      plotData.layout[k].showticklabels = true;
-    });
-    setAxesTitles({});
-  }
+  useEffect(() => {
+    if (axesTitles && Object.keys(axesTitles).length > 0) {
+      Object.keys(axesTitles).forEach((k) => {
+        plotData.layout[k].title = {
+          ...(plotData.layout[k].title || {}),
+          text: axesTitles[k],
+        };
+        plotData.layout[k].showticklabels = true;
+      });
+      setAxesTitles({});
+    }
+  }, [axesTitles]);
 
   function onChangeColor(color) {
     // updates the color of the last added shape
@@ -337,14 +338,14 @@ export default function Chart({
       }
 
       window.addEventListener("resize", async function () {
-        let update = await ResizeHandler({ plotData, Volume });
+        let update = await ResizeHandler({ plotData, volumeBars });
         let layout_update = update.layout_update;
         let newPlotData = update.plotData;
         let volume_update = update.volume_update;
 
         if (Object.keys(layout_update).length > 0) {
           setPlotData(newPlotData);
-          setVolume(volume_update);
+          setVolumeBars(volume_update);
           Plotly.relayout(plotDiv, layout_update);
         }
       });
@@ -386,7 +387,7 @@ export default function Chart({
         }}
         plotlyData={plotData}
         setLoading={setLoading}
-        open={modal.modal === "overlayChart"}
+        open={modal.name === "overlayChart"}
         close={onClose}
       />
       <TitleChartDialog
@@ -394,12 +395,12 @@ export default function Chart({
         updateAxesTitles={(axesTitles) => setAxesTitles(axesTitles)}
         defaultTitle={chartTitle}
         plotlyData={plotData}
-        open={modal.modal === "titleDialog"}
+        open={modal.name === "titleDialog"}
         close={onClose}
       />
       <TextChartDialog
-        popupData={modal.modal === "textDialog" ? modal?.data : null}
-        open={modal.modal === "textDialog"}
+        popupData={modal.name === "textDialog" ? modal?.data : null}
+        open={modal.name === "textDialog"}
         close={onClose}
         addAnnotation={(data) => onAddAnnotation(data)}
         deleteAnnotation={(data) => onDeleteAnnotation(data)}

frontend-components/plotly/src/components/PlotlyConfig.tsx

@@ -31,7 +31,7 @@ export function PlotConfig({
   Loading,
   changeColor,
 }: {
-  setModal: (modal: { modal: string; data?: any }) => void;
+  setModal: (modal: { name: string; data?: any }) => void;
   changeTheme: (change: boolean) => void;
   autoScaling: (change: boolean) => void;
   Loading: (change: boolean) => void;
@@ -40,21 +40,21 @@ export function PlotConfig({
   useHotkeys(
     "ctrl+shift+t",
     () => {
-      setModal({ modal: "titleDialog" });
+      setModal({ name: "titleDialog" });
     },
     { preventDefault: true }
   );
   useHotkeys(
     "ctrl+t",
     () => {
-      setModal({ modal: "textDialog" });
+      setModal({ name: "textDialog" });
     },
     { preventDefault: true }
   );
   useHotkeys(
     "ctrl+o",
     () => {
-      setModal({ modal: "overlayChart" });
+      setModal({ name: "overlayChart" });
     },
     { preventDefault: true }
   );
@@ -75,7 +75,7 @@ export function PlotConfig({
   useHotkeys(
     "ctrl+shift+s",
     async () => {
-      setModal({ modal: "downloadCsv" });
+      setModal({ name: "downloadCsv" });
       await downloadCSV(document.getElementById("plotlyChart") as any);
     },
     { preventDefault: true }
@@ -96,7 +96,6 @@ export function PlotConfig({
     { preventDefault: true }
   );
 
-
   const CONFIG = {
     plotGlPixelRatio: 1,
     scrollZoom: true,
@@ -110,7 +109,7 @@ export function PlotConfig({
           name: "Download CSV (Ctrl+Shift+S)",
           icon: ICONS.downloadCsv,
           click: async function (gd: any) {
-            setModal({ modal: "downloadCsv" });
+            setModal({ name: "downloadCsv" });
             await downloadCSV(gd);
           },
         },
@@ -149,21 +148,21 @@ export function PlotConfig({
           name: "Overlay chart from CSV (Ctrl+O)",
           icon: ICONS.plotCsv,
           click: function () {
-            setModal({ modal: "overlayChart" });
+            setModal({ name: "overlayChart" });
           },
         },
         {
           name: "Add Text (Ctrl+T)",
           icon: ICONS.addText,
           click: function () {
-            setModal({ modal: "textDialog", data: { text: "" } });
+            setModal({ name: "textDialog", data: { text: "" } });
           },
         },
         {
           name: "Change Titles (Ctrl+Shift+T)",
           icon: ICONS.changeTitle,
           click: function () {
-            setModal({ modal: "titleDialog" });
+            setModal({ name: "titleDialog" });
           },
         },
         {

frontend-components/plotly/src/utils/addAnnotation.tsx

@@ -130,7 +130,7 @@ export function init_annotation({
   plotData: Figure;
   popupData: Partial<PopupData>;
   setPlotData: (plotData: Partial<Figure>) => void;
-  setModal: (modal: { modal: string; data?: any }) => void;
+  setModal: (modal: { name: string; data?: any }) => void;
   onAnnotationClick: any;
   setOnAnnotationClick: (onAnnotationClick: any) => void;
   setAnnotations: (annotations: Partial<Annotations>[]) => void;
@@ -191,7 +191,7 @@ export function init_annotation({
       };
       console.log("popup_data", popup_data);
       setOnAnnotationClick(popup_data);
-      setModal({ modal: "textDialog", data: popup_data });
+      setModal({ name: "textDialog", data: popup_data });
       setOnAnnotationClick({});
     });