Fix trace and axes properties for XYPlot and legacy opi properties

Author: abigailalexander

src/types/axis.test.ts

@@ -15,9 +15,10 @@ describe("Axis", () => {
       visible: false,
       scaleFont: new Font(20, FontStyle.Italic),
       titleFont: new Font(40),
-      onRight: true
+      onRight: true,
+      xAxis: true
     };
-    const axis = new Axis({ xAxis: true, ...testValues });
+    const axis = new Axis(testValues);
 
     expect(axis).toEqual(testValues);
     expect(axis).toBeInstanceOf(Axis);
@@ -37,7 +38,8 @@ describe("Axis", () => {
       maximum: 100,
       scaleFont: new Font(),
       titleFont: new Font(FontStyle.Bold),
-      onRight: false
+      onRight: false,
+      xAxis: false
     });
     expect(axis).toBeInstanceOf(Axis);
   });

src/types/axis.ts

@@ -2,6 +2,7 @@ import { Color } from "./color";
 import { Font, FontStyle } from "./font";
 
 export class Axis {
+  public xAxis: boolean;
   public color: Color;
   public title: string;
   public showGrid: boolean;
@@ -31,8 +32,10 @@ export class Axis {
     maximum = 100,
     titleFont = new Font(FontStyle.Bold),
     scaleFont = new Font(),
-    onRight = false
+    onRight = false,
+    fromOpi = false
   } = {}) {
+    this.xAxis = xAxis;
     this.color = color;
     this.title = title || (xAxis ? "X" : "Y");
     this.showGrid = showGrid;
@@ -43,7 +46,7 @@ export class Axis {
     this.maximum = maximum;
     this.titleFont = titleFont;
     this.scaleFont = scaleFont;
-    this.onRight = onRight;
+    this.onRight = fromOpi ? !onRight : onRight;
   }
 }
 

src/types/trace.ts

@@ -12,6 +12,12 @@ export class Trace {
   public visible: boolean;
   public yPv: string;
   public xPv?: string | null;
+  public bufferSize?: number;
+  public plotMode?: number;
+  public antiAlias?: boolean;
+  public concatenateData?: boolean;
+  public updateDelay?: number;
+  public updateMode?: number;
 
   public constructor({
     name = "",
@@ -24,7 +30,14 @@ export class Trace {
     pointSize = 1,
     visible = true,
     xPv = "",
-    yPv = ""
+    yPv = "",
+    fromOpi = false,
+    antiAlias = true,
+    bufferSize = 100,
+    concatenateData = true,
+    updateDelay = 100,
+    updateMode = 0,
+    plotMode = 0
   } = {}) {
     // xPV property only exists on XYPlot
     if (xPv) this.xPv = xPv;
@@ -38,5 +51,13 @@ export class Trace {
     this.pointType = pointType;
     this.pointSize = pointSize;
     this.visible = visible;
+    if (fromOpi) {
+      this.antiAlias = antiAlias;
+      this.bufferSize = bufferSize;
+      this.concatenateData = concatenateData;
+      this.updateDelay = updateDelay;
+      this.updateMode = updateMode;
+      this.plotMode = plotMode;
+    }
   }
 }

src/ui/widgets/EmbeddedDisplay/bobParser.ts

@@ -254,16 +254,18 @@ function bobParseSymbols(jsonProp: ElementCompact): string[] {
 function bobParseTraces(props: any): Trace[] {
   const traces: Trace[] = [];
   let parsedProps = {};
-  // If only once trace, we are passed an object instead
-  // of an array
-  if (props.trace.length > 1) {
-    props.trace.forEach((trace: any) => {
-      parsedProps = bobParseChildProps(trace);
+  if (props) {
+    // If only once trace, we are passed an object instead
+    // of an array
+    if (props.trace.length > 1) {
+      props.trace.forEach((trace: any) => {
+        parsedProps = bobParseChildProps(trace);
+        traces.push(new Trace(parsedProps));
+      });
+    } else {
+      parsedProps = bobParseChildProps(props.trace);
       traces.push(new Trace(parsedProps));
-    });
-  } else {
-    parsedProps = bobParseChildProps(props.trace);
-    traces.push(new Trace(parsedProps));
+    }
   }
   return traces;
 }
@@ -276,16 +278,18 @@ function bobParseTraces(props: any): Trace[] {
 function bobParseYAxes(props: any): Axis[] {
   const axes: Axis[] = [];
   let parsedProps = {};
-  // If only once axis, we are passed an object instead
-  // of an array
-  if (props.y_axis.length > 1) {
-    props.y_axis.forEach((axis: any) => {
-      parsedProps = bobParseChildProps(axis);
+  if (props) {
+    // If only once axis, we are passed an object instead
+    // of an array
+    if (props.y_axis.length > 1) {
+      props.y_axis.forEach((axis: any) => {
+        parsedProps = bobParseChildProps(axis);
+        axes.push(new Axis(parsedProps));
+      });
+    } else {
+      parsedProps = bobParseChildProps(props.y_axis);
       axes.push(new Axis(parsedProps));
-    });
-  } else {
-    parsedProps = bobParseChildProps(props.y_axis);
-    axes.push(new Axis(parsedProps));
+    }
   }
   return axes;
 }
@@ -508,7 +512,7 @@ export function parseBob(
     rules: (rules: Rule[]): Rule[] =>
       opiParseRules(rules, defaultProtocol, false),
     traces: (props: ElementCompact) => bobParseTraces(props["traces"]),
-    yAxes: (props: ElementCompact) => bobParseYAxes(props["y_axes"])
+    axes: (props: ElementCompact) => bobParseYAxes(props["y_axes"])
   };
 
   const displayWidget = parseWidget(

src/ui/widgets/EmbeddedDisplay/opiParser.test.ts

@@ -404,9 +404,9 @@ $(trace_0_y_pv_value)</tooltip>
   it("parses xygraph widget", (): void => {
     const widget = parseOpi(xygraphString, "ca", PREFIX)
       .children?.[0] as WidgetDescription;
-    expect(widget.traces.count).toEqual(1);
-    expect(widget.axes.count).toEqual(3);
-    expect(widget.traces.traceOptions[0].bufferSize).toEqual(65536);
-    expect(widget.axes.axisOptions[2].leftBottomSide).toEqual(false);
+    expect(widget.traces.length).toEqual(1);
+    expect(widget.axes.length).toEqual(3);
+    expect(widget.traces[0].bufferSize).toEqual(65536);
+    expect(widget.axes[2].onRight).toEqual(true);
   });
 });

src/ui/widgets/EmbeddedDisplay/opiParser.ts

@@ -12,8 +12,8 @@ import {
   AbsolutePosition,
   RelativePosition
 } from "../../../types/position";
-import { Traces, Trace } from "../../../types/traces";
-import { Axes, Axis } from "../../../types/axes";
+import { Trace } from "../../../types/trace";
+import { Axis } from "../../../types/axis";
 import {
   ComplexParserDict,
   ParserDict,
@@ -484,7 +484,7 @@ function opiParseLabelPosition(props: any): string {
  * @param props list of props for this element
  * @returns a Traces object
  */
-function opiParseTraces(props: any): Traces {
+function opiParseTraces(props: any): Trace[] {
   // Find PV value if it's one of the trace properties
   let pvName = opiParseString(props.pv_name);
   if (pvName.includes("trace_")) {
@@ -494,10 +494,13 @@ function opiParseTraces(props: any): Traces {
   const traces: Trace[] = [];
   // Parse all of the 'trace' properties
   for (let i = 0; i < count; i++) {
-    const trace = parseMultipleNamedProps("trace", props, new Trace(i));
+    const trace = new Trace({
+      fromOpi: true,
+      ...parseMultipleNamedProps(`trace_${i}`, props)
+    });
     traces.push(trace);
   }
-  return new Traces(count, pvName, traces);
+  return traces;
 }
 
 /**
@@ -506,15 +509,18 @@ function opiParseTraces(props: any): Traces {
  * @param props
  * @returns an Axes object.
  */
-function opiParseAxes(props: any): Axes {
+function opiParseAxes(props: any): Axis[] {
   const count = opiParseNumber(props.axis_count);
   const axes: Axis[] = [];
   // Parse all of the 'axis' properties
   for (let i = 0; i < count; i++) {
-    const axis = parseMultipleNamedProps("axis", props, new Axis(i));
+    const axis = new Axis({
+      fromOpi: true,
+      ...parseMultipleNamedProps(`axis_${i}`, props)
+    });
     axes.push(axis);
   }
-  return new Axes(count, axes);
+  return axes;
 }
 
 /**
@@ -526,28 +532,24 @@ function opiParseAxes(props: any): Axes {
  * @param idx number to search for in prop names
  * @returns object containing parsed props
  */
-function parseMultipleNamedProps(name: string, props: any, obj: any) {
+function parseMultipleNamedProps(name: string, props: any) {
+  const obj: { [key: string]: any } = {};
   // Create keyword string and search for matches
-  const num = `${name}_${obj.index}_`;
+  const num = `${name}_`;
   const names = Object.getOwnPropertyNames(props);
   const newProps = names.filter(s => s.includes(num));
   newProps.forEach(item => {
     // For each match, convert the name and parse
-    const newName = snakeCaseToCamelCase(item, num.length, undefined);
+    const newName = snakeCaseToCamelCase(item, num.length, item.length);
     try {
-      if (newName) {
-        // Get the type of the property
-        const match = obj[newName];
-        if (typeof match === "boolean") {
-          obj[newName] = opiParseBoolean(props[item]);
-        } else if (typeof match === "number") {
-          obj[newName] = opiParseNumber(props[item]);
-        } else if (typeof match === "string") {
-          obj[newName] = opiParseString(props[item]);
-        } else if (match instanceof Color) {
-          obj[newName] = opiParseColor(props[item]);
-        } else if (match instanceof Font) {
-          obj[newName] = opiParseFont(props[item]);
+      if (newName && OPI_SIMPLE_PARSERS.hasOwnProperty(newName)) {
+        const [opiPropName, propParser] = OPI_SIMPLE_PARSERS[newName];
+        obj[newName] = propParser(props[item]);
+        // Some properties should be passed to more generic names
+        if (newName === "traceColor" || newName === "axisColor") {
+          obj.color = opiParseColor(props[opiPropName]);
+        } else if (newName === "axisTitle") {
+          obj.title = opiParseString(props[item]);
         }
       }
     } catch {
@@ -718,7 +720,19 @@ export const OPI_SIMPLE_PARSERS: ParserDict = {
   resize: ["resize_behaviour", opiParseResizing],
   labelsFromPv: ["labels_from_pv", opiParseBoolean],
   limitsFromPv: ["limits_from_pv", opiParseBoolean],
-  format: ["format_type", opiParseNumber]
+  format: ["format_type", opiParseNumber],
+  antiAlias: ["anti_alias", opiParseBoolean],
+  concatenateData: ["concatenate_data", opiParseBoolean],
+  bufferSize: ["buffer_size", opiParseNumber],
+  onRight: ["left_bottom_side", opiParseBoolean],
+  updateMode: ["update_mode", opiParseNumber],
+  updateDelay: ["update_delay", opiParseNumber],
+  scaleFormat: ["scale_format", opiParseNumber],
+  scakeFont: ["scale_font", opiParseFont],
+  showGrid: ["show_grid", opiParseBoolean],
+  scaleFont: ["scale_font", opiParseFont],
+  minimum: ["minimum", opiParseNumber],
+  maximum: ["maximum", opiParseNumber]
 };
 
 /**

src/ui/widgets/StripChart/stripChart.test.tsx

@@ -45,7 +45,7 @@ describe("StripChartComponent", () => {
     readonly: true,
     pvName: "TEST:PV",
     traces: [new Trace()],
-    yAxes: [new Axis()]
+    axes: [new Axis()]
   };
 
   beforeEach(() => {
@@ -70,7 +70,7 @@ describe("StripChartComponent", () => {
         new Axis({ color: Color.RED }),
         new Axis({ color: Color.BLUE })
       ];
-      render(<StripChartComponent {...defaultProps} yAxes={axes} />);
+      render(<StripChartComponent {...defaultProps} axes={axes} />);
 
       const lineChart = screen.getByTestId("line-chart");
       const yAxisData = JSON.parse(lineChart.getAttribute("data-yaxis") ?? "");
@@ -162,7 +162,7 @@ describe("StripChartComponent", () => {
 
     test("applies log scale to y axis", () => {
       const axes = [new Axis({ logScale: true })];
-      render(<StripChartComponent {...defaultProps} yAxes={axes} />);
+      render(<StripChartComponent {...defaultProps} axes={axes} />);
 
       const lineChart = screen.getByTestId("line-chart");
       const yAxisData = JSON.parse(lineChart.getAttribute("data-yaxis") ?? "");

src/ui/widgets/StripChart/stripChart.tsx

@@ -16,6 +16,8 @@ import { Box, Typography } from "@mui/material";
 import { CurveType, LineChart, XAxis, YAxis } from "@mui/x-charts";
 import { Color, Font } from "../../../types";
 import { convertStringTimePeriod } from "../utils";
+import { Trace } from "../../../types/trace";
+import { Axis } from "../../../types/axis";
 
 const MARKER_STYLES: any[] = [
   undefined,
@@ -28,7 +30,7 @@ const MARKER_STYLES: any[] = [
 
 const StripChartProps = {
   traces: TracesProp,
-  yAxes: AxesProp,
+  axes: AxesProp,
   start: StringPropOpt,
   end: StringPropOpt,
   foregroundColor: ColorPropOpt,
@@ -53,8 +55,8 @@ export const StripChartComponent = (
   props: StripChartComponentProps
 ): JSX.Element => {
   const {
-    traces,
-    yAxes,
+    traces = [new Trace()],
+    axes = [new Axis({ xAxis: false })],
     value,
     title,
     titleFont = new Font(),
@@ -99,7 +101,7 @@ export const StripChartComponent = (
     }
   }, [value, timePeriod]);
 
-  const axes: ReadonlyArray<YAxis<any>> = yAxes.map(item => {
+  const yAxes: ReadonlyArray<YAxis<any>> = axes.map(item => {
     const axis = {
       width: 45,
       id: item.title,
@@ -135,7 +137,7 @@ export const StripChartComponent = (
   const series = traces.map(item => {
     const trace = {
       // If axis is set higher than number of axes, default to zero
-      id: item.axis <= axes.length - 1 ? axes[item.axis].id : 0,
+      id: item.axis <= axes.length - 1 ? yAxes[item.axis].id : 0,
       data: data.y,
       label: item.name,
       color: visible ? item.color.toString() : "transparent",
@@ -194,7 +196,7 @@ export const StripChartComponent = (
           }
         }}
         xAxis={xAxis}
-        yAxis={axes}
+        yAxis={yAxes}
         series={series}
       />
     </Box>