Mylin/1617 support spatial profile line polyline

src/components/HelpDrawer/HelpContent/SpatialProfilerSettingsComputationHelpContent.tsx

@@ -0,0 +1,5 @@
+export const SPATIAL_PROFILER_SETTINGS_COMPUTATION_HELP_CONTENT = (
+    <div>
+        <h3>Computation</h3>
+    </div>
+);

src/components/HelpDrawer/HelpContent/index.ts

@@ -19,6 +19,7 @@ export * from "./RenderConfigSettingsHelpContent";
 export * from "./SpatialProfilerHelpContent";
 export * from "./SpatialProfilerSettingsStylingHelpContent";
 export * from "./SpatialProfilerSettingsSmoothingHelpContent";
+export * from "./SpatialProfilerSettingsComputationHelpContent";
 export * from "./SpectralProfilerHelpContent";
 export * from "./SpectralProfilerSettingsConversionHelpContent";
 export * from "./SpectralProfilerSettingsStylingHelpContent";

src/components/HelpDrawer/HelpDrawerComponent.tsx

@@ -30,6 +30,7 @@ import {
     SPATIAL_PROFILER_HELP_CONTENT,
     SPATIAL_PROFILER_SETTINGS_SMOOTHING_HELP_CONTENT,
     SPATIAL_PROFILER_SETTINGS_STYLING_HELP_CONTENT,
+    SPATIAL_PROFILER_SETTINGS_COMPUTATION_HELP_CONTENT,
     SPECTRAL_LINE_QUERY_HELP_CONTENT,
     SPECTRAL_PROFILER_HELP_CONTENT,
     SPECTRAL_PROFILER_SETTINGS_CONVERSION_HELP_CONTENT,
@@ -74,6 +75,7 @@ const HELP_CONTENT_MAP = new Map<HelpType, JSX.Element>([
     [HelpType.SPATIAL_PROFILER, SPATIAL_PROFILER_HELP_CONTENT],
     [HelpType.SPATIAL_PROFILER_SETTINGS_STYLING, SPATIAL_PROFILER_SETTINGS_STYLING_HELP_CONTENT],
     [HelpType.SPATIAL_PROFILER_SETTINGS_SMOOTHING, SPATIAL_PROFILER_SETTINGS_SMOOTHING_HELP_CONTENT],
+    [HelpType.SPATIAL_PROFILER_SETTINGS_COMPUTATION, SPATIAL_PROFILER_SETTINGS_COMPUTATION_HELP_CONTENT],
     [HelpType.SPECTRAL_PROFILER, SPECTRAL_PROFILER_HELP_CONTENT],
     [HelpType.SPECTRAL_PROFILER_SETTINGS_CONVERSION, SPECTRAL_PROFILER_SETTINGS_CONVERSION_HELP_CONTENT],
     [HelpType.SPECTRAL_PROFILER_SETTINGS_STYLING, SPECTRAL_PROFILER_SETTINGS_STYLING_HELP_CONTENT],

src/components/Shared/RegionSelector/RegionSelectorComponent.tsx

@@ -8,7 +8,7 @@ import {RegionWidgetStore, RegionsType, RegionId, ACTIVE_FILE_ID} from "stores/w
 import "./RegionSelectorComponent.scss";
 
 @observer
-export class RegionSelectorComponent extends React.Component<{widgetStore: RegionWidgetStore; disableClosedRegion?: boolean; onFrameChanged?: (newFrame: FrameStore) => void}> {
+export class RegionSelectorComponent extends React.Component<{widgetStore: RegionWidgetStore; onFrameChanged?: (newFrame: FrameStore) => void}> {
     private handleFrameChanged = (changeEvent: React.ChangeEvent<HTMLSelectElement>) => {
         const appStore = AppStore.Instance;
         const widgetStore = this.props.widgetStore;
@@ -62,13 +62,16 @@ export class RegionSelectorComponent extends React.Component<{widgetStore: Regio
                 case RegionsType.CLOSED_AND_POINT:
                     fiteredRegions = regions.filter(r => !r.isTemporary && (r.isClosedRegion || r.regionType === CARTA.RegionType.POINT));
                     break;
+                case RegionsType.POINT_AND_LINES:
+                    fiteredRegions = regions.filter(r => !r.isTemporary && (r.regionType === CARTA.RegionType.POINT || r.regionType === CARTA.RegionType.LINE || r.regionType === CARTA.RegionType.POLYLINE));
+                    break;
                 default:
                     fiteredRegions = regions;
             }
 
             regionOptions = regionOptions.concat(
                 fiteredRegions.map(r => {
-                    return {value: r.regionId, label: r.nameString, disabled: this.props.disableClosedRegion ? r.isClosedRegion : false};
+                    return {value: r.regionId, label: r.nameString};
                 })
             );
 

src/components/SpatialProfiler/SpatialProfilerComponent.tsx

@@ -85,17 +85,26 @@ export class SpatialProfilerComponent extends React.Component<WidgetProps> {
         } else {
             let xMin: number;
             let xMax: number;
-
-            if (this.widgetStore.isAutoScaledX) {
-                xMin = this.autoScaleHorizontalMin;
-                xMax = this.autoScaleHorizontalMax;
+            if (this.lineAxis) {
+                if (this.widgetStore.isAutoScaledX) {
+                    xMin = this.autoScaleHorizontalMin;
+                    xMax = this.autoScaleHorizontalMax;
+                } else {
+                    xMin = clamp(this.widgetStore.minX, this.lineAxis.min, this.lineAxis.max);
+                    xMax = clamp(this.widgetStore.maxX, this.lineAxis.min, this.lineAxis.max);
+                }
             } else {
-                xMin = clamp(this.widgetStore.minX, 0, this.frame.frameInfo.fileInfoExtended.width);
-                xMax = clamp(this.widgetStore.maxX, 0, this.widgetStore.isXProfile ? this.frame.frameInfo.fileInfoExtended.width : this.frame.frameInfo.fileInfoExtended.height);
+                if (this.widgetStore.isAutoScaledX) {
+                    xMin = this.autoScaleHorizontalMin;
+                    xMax = this.autoScaleHorizontalMax;
+                } else {
+                    xMin = clamp(this.widgetStore.minX, 0, this.frame.frameInfo.fileInfoExtended.width);
+                    xMax = clamp(this.widgetStore.maxX, 0, this.widgetStore.isXProfile ? this.frame.frameInfo.fileInfoExtended.width : this.frame.frameInfo.fileInfoExtended.height);
+                }
+                xMin = Math.floor(xMin);
+                xMax = Math.floor(xMax);
             }
 
-            xMin = Math.floor(xMin);
-            xMax = Math.floor(xMax);
             let yMin = Number.MAX_VALUE;
             let yMax = -Number.MAX_VALUE;
             let yMean;
@@ -110,7 +119,38 @@ export class SpatialProfilerComponent extends React.Component<WidgetProps> {
             let smoothingValues: Array<{x: number; y: number}>;
             let N: number;
 
-            if (coordinateData.mip > 1 || coordinateData.start > 0 || coordinateData.end < xMax) {
+            if (this.lineAxis) {
+                N = coordinateData.values.length;
+                values = new Array(N);
+                let xArray: number[] = new Array(N);
+                const numPixels = this.width;
+                const decimationFactor = Math.round(N / numPixels);
+                let startIndex: number;
+                let endIndex: number;
+                for (let i = 0; i < N; i++) {
+                    const y = coordinateData.values[i];
+                    const x = this.widgetStore.effectiveRegion?.regionType === CARTA.RegionType.LINE ? (i - coordinateData.lineAxis.crpix) * coordinateData.lineAxis.cdelt : i * coordinateData.lineAxis.cdelt;
+                    if (x >= xMin && x <= xMax && isFinite(y)) {
+                        yMin = Math.min(yMin, y);
+                        yMax = Math.max(yMax, y);
+                        yCount++;
+                        ySum += y;
+                        ySum2 += y * y;
+                        if (startIndex === undefined) {
+                            startIndex = i;
+                        }
+                        endIndex = i;
+                    }
+                    xArray[i] = x;
+                    if (decimationFactor <= 1) {
+                        values[i] = {x, y};
+                    }
+                }
+                if (decimationFactor > 1) {
+                    values = this.widgetStore.smoothingStore.getDecimatedPoint2DArray(xArray, coordinateData.values, decimationFactor, startIndex, endIndex);
+                }
+                smoothingValues = this.widgetStore.smoothingStore.getSmoothingPoint2DArray(xArray, coordinateData.values);
+            } else if (coordinateData.mip > 1 || coordinateData.start > 0 || coordinateData.end < xMax) {
                 N = coordinateData.values.length;
                 values = new Array(N);
                 for (let i = 0; i < N; i++) {
@@ -182,20 +222,31 @@ export class SpatialProfilerComponent extends React.Component<WidgetProps> {
                 yMin -= range * VERTICAL_RANGE_PADDING;
                 yMax += range * VERTICAL_RANGE_PADDING;
             }
+
             return {values: values, smoothingValues, xMin, xMax, yMin, yMax, yMean, yRms};
         }
     }
 
     @computed get exportHeader(): string[] {
-        const appStore = AppStore.Instance;
         const headerString: string[] = [];
-        headerString.push(`region (pixel): Point[${toFixed(appStore.activeFrame.cursorInfo.posImageSpace.x)}, ${toFixed(appStore.activeFrame.cursorInfo.posImageSpace.y)}]`);
-        if (appStore.activeFrame.cursorInfo.infoWCS) {
-            headerString.push(`region (world): Point[${appStore.activeFrame.cursorInfo.infoWCS.x}, ${appStore.activeFrame.cursorInfo.infoWCS.y}]`);
+        if (this.widgetStore.effectiveRegion) {
+            headerString.push(...this.widgetStore.effectiveFrame.getRegionProperties(this.widgetStore.effectiveRegionId));
         }
         return headerString;
     }
 
+    // displaying offset/distance in the x axis for line and polyline regions
+    @computed get lineAxis(): {label: string; min: number; max: number; unit: string} {
+        const coordinateData = this.profileStore?.getProfile(this.widgetStore.fullCoordinate);
+        if (coordinateData?.lineAxis && this.widgetStore.isLineOrPolyline) {
+            const lineAxis = coordinateData.lineAxis;
+            const min = lineAxis.axisType === CARTA.ProfileAxisType.Offset ? (0 - lineAxis.crpix) * lineAxis.cdelt : 0;
+            const max = lineAxis.axisType === CARTA.ProfileAxisType.Offset ? (coordinateData.end - lineAxis.crpix) * lineAxis.cdelt : coordinateData.end * lineAxis.cdelt;
+            return {label: lineAxis.axisType === CARTA.ProfileAxisType.Offset ? "Offset" : "Distance", min, max, unit: lineAxis.unit};
+        }
+        return null;
+    }
+
     constructor(props: WidgetProps) {
         super(props);
         makeObservable(this);
@@ -218,9 +269,9 @@ export class SpatialProfilerComponent extends React.Component<WidgetProps> {
                 const coordinate = this.widgetStore.coordinate;
                 const currentData = this.plotData;
                 if (appStore && coordinate) {
-                    const coordinateString = `${coordinate.toUpperCase()} Profile`;
+                    const coordinateString = this.widgetStore.isLineOrPolyline ? "" : coordinate.toUpperCase();
                     const regionString = this.widgetStore.effectiveRegionId === RegionId.CURSOR ? "Cursor" : `Region #${this.widgetStore.effectiveRegionId}`;
-                    appStore.widgetsStore.setWidgetTitle(this.props.id, `${coordinateString}: ${regionString}`);
+                    appStore.widgetsStore.setWidgetTitle(this.props.id, `${coordinateString} Profile: ${regionString}`);
                 }
                 if (currentData) {
                     this.widgetStore.initXYBoundaries(currentData.xMin, currentData.xMax, currentData.yMin, currentData.yMax);
@@ -235,7 +286,9 @@ export class SpatialProfilerComponent extends React.Component<WidgetProps> {
                 if (!this.frame || !this.width) {
                     return null;
                 }
-                if (this.widgetStore.isXProfile) {
+                if (this.lineAxis) {
+                    this.setAutoScaleBounds(this.lineAxis.min, this.lineAxis.max);
+                } else if (this.widgetStore.isXProfile) {
                     this.setAutoScaleBounds(clamp(this.frame.requiredFrameView.xMin, 0, this.frame.frameInfo.fileInfoExtended.width), clamp(this.frame.requiredFrameView.xMax, 0, this.frame.frameInfo.fileInfoExtended.width));
                 } else {
                     this.setAutoScaleBounds(clamp(this.frame.requiredFrameView.yMin, 0, this.frame.frameInfo.fileInfoExtended.height), clamp(this.frame.requiredFrameView.yMax, 0, this.frame.frameInfo.fileInfoExtended.height));
@@ -350,10 +403,10 @@ export class SpatialProfilerComponent extends React.Component<WidgetProps> {
                 if (nearest?.point) {
                     const pixelPoint = isXCoordinate ? {x: nearest.point.x, y: this.profileStore.y} : {x: this.profileStore.x, y: nearest.point.x};
                     const cursorInfo = this.frame.getCursorInfo(pixelPoint);
-                    const wcsLabel = cursorInfo?.infoWCS ? `WCS: ${isXCoordinate ? cursorInfo.infoWCS.x : cursorInfo.infoWCS.y}, ` : "";
-                    const imageLabel = `Image: ${nearest.point.x} px, `;
+                    const wcsLabel = cursorInfo?.infoWCS && !this.lineAxis ? `WCS: ${isXCoordinate ? cursorInfo.infoWCS.x : cursorInfo.infoWCS.y}, ` : "";
+                    const xLabel = this.lineAxis ? `${this.lineAxis.label}: ${formattedExponential(nearest.point.x, 5)} ${this.lineAxis.unit ?? ""}, ` : `Image: ${nearest.point.x} px, `;
                     const valueLabel = `${nearest.point.y !== undefined ? formattedExponential(nearest.point.y, 5) : ""}`;
-                    profilerInfo.push("Cursor: (" + wcsLabel + imageLabel + valueLabel + ")");
+                    profilerInfo.push("Cursor: (" + wcsLabel + xLabel + valueLabel + ")");
                 }
             } else if (this.widgetStore.effectiveRegion?.regionType === CARTA.RegionType.POINT) {
                 // get value directly from point region
@@ -384,10 +437,11 @@ export class SpatialProfilerComponent extends React.Component<WidgetProps> {
         }
 
         const isXProfile = widgetStore.isXProfile;
+        const xLabel = this.lineAxis ? `${this.lineAxis.label} (${this.lineAxis.unit ?? ""})` : `${isXProfile ? "X" : "Y"} coordinate`;
         const imageName = appStore.activeFrame ? appStore.activeFrame.filename : undefined;
-        const plotName = `${isXProfile ? "X" : "Y"} profile`;
+        const plotName = `${this.lineAxis ? "" : isXProfile ? "X " : "Y "}profile`;
         let linePlotProps: LinePlotComponentProps = {
-            xLabel: `${isXProfile ? "X" : "Y"} coordinate`,
+            xLabel: xLabel,
             yLabel: "Value",
             darkMode: appStore.darkTheme,
             imageName: imageName,
@@ -422,11 +476,13 @@ export class SpatialProfilerComponent extends React.Component<WidgetProps> {
                     linePlotProps.yLabel = `Value (${unit})`;
                 }
 
-                if (this.frame.validWcs && widgetStore.wcsAxisVisible) {
-                    linePlotProps.showTopAxis = true;
-                    linePlotProps.topAxisTickFormatter = this.formatProfileAst;
-                } else {
-                    linePlotProps.showTopAxis = false;
+                if (!this.widgetStore.isLineOrPolyline) {
+                    if (this.frame.validWcs && widgetStore.wcsAxisVisible) {
+                        linePlotProps.showTopAxis = true;
+                        linePlotProps.topAxisTickFormatter = this.formatProfileAst;
+                    } else {
+                        linePlotProps.showTopAxis = false;
+                    }
                 }
 
                 const currentPlotData = this.plotData;
@@ -489,7 +545,8 @@ export class SpatialProfilerComponent extends React.Component<WidgetProps> {
                         value: cursorX.image,
                         id: "marker-image-cursor",
                         draggable: false,
-                        horizontal: false
+                        horizontal: false,
+                        opacity: this.widgetStore.isLineOrPolyline ? 0.1 : 1
                     }
                 ];
                 linePlotProps.markers.push({
@@ -534,7 +591,7 @@ export class SpatialProfilerComponent extends React.Component<WidgetProps> {
             <div className={"spatial-profiler-widget"}>
                 <div className="profile-container">
                     <div className="profile-toolbar">
-                        <RegionSelectorComponent widgetStore={widgetStore} disableClosedRegion={true} />
+                        <RegionSelectorComponent widgetStore={widgetStore} />
                         {widgetStore.effectiveFrame?.hasStokes && (
                             <FormGroup label={"Polarization"} inline={true}>
                                 <HTMLSelect value={widgetStore.selectedStokes} options={widgetStore.stokesOptions} onChange={ev => widgetStore.setSelectedStokes(ev.currentTarget.value)} />

src/components/SpatialProfiler/SpatialProfilerSettingsPanelComponent/SpatialProfilerSettingsPanelComponent.scss

@@ -5,6 +5,9 @@
         &:first-of-type {
             margin-left: 0px;
         }
+        .bp3-input {
+            width: 88px;
+        }
     }
 
     .bp3-form-group .bp3-label {

src/components/SpatialProfiler/SpatialProfilerSettingsPanelComponent/SpatialProfilerSettingsPanelComponent.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import {computed, autorun} from "mobx";
 import {observer} from "mobx-react";
-import {Tabs, Tab} from "@blueprintjs/core";
-import {LinePlotSettingsPanelComponentProps, LinePlotSettingsPanelComponent, SmoothingSettingsComponent} from "components/Shared";
+import {Tabs, Tab, FormGroup} from "@blueprintjs/core";
+import {LinePlotSettingsPanelComponentProps, LinePlotSettingsPanelComponent, SmoothingSettingsComponent, SafeNumericInput} from "components/Shared";
 import {RegionId, SpatialProfileWidgetStore} from "stores/widgets";
 import {WidgetProps, DefaultWidgetConfig, HelpType, WidgetsStore, AppStore} from "stores";
 import {parseNumber} from "utilities";
@@ -13,7 +13,8 @@ const KEYCODE_ENTER = 13;
 
 export enum SpatialProfilerSettingsTabs {
     STYLING,
-    SMOOTHING
+    SMOOTHING,
+    COMPUTATION
 }
 
 @observer
@@ -30,7 +31,7 @@ export class SpatialProfilerSettingsPanelComponent extends React.Component<Widge
             isCloseable: true,
             parentId: "spatial-profiler",
             parentType: "spatial-profiler",
-            helpType: [HelpType.SPATIAL_PROFILER_SETTINGS_STYLING, HelpType.SPATIAL_PROFILER_SETTINGS_SMOOTHING]
+            helpType: [HelpType.SPATIAL_PROFILER_SETTINGS_STYLING, HelpType.SPATIAL_PROFILER_SETTINGS_SMOOTHING, HelpType.SPATIAL_PROFILER_SETTINGS_COMPUTATION]
         };
     }
 
@@ -54,12 +55,12 @@ export class SpatialProfilerSettingsPanelComponent extends React.Component<Widge
             if (this.widgetStore) {
                 const coordinate = this.widgetStore.coordinate;
                 if (appStore && coordinate) {
-                    const coordinateString = `${coordinate.toUpperCase()} Profile`;
+                    const coordinateString = this.widgetStore.isLineOrPolyline ? "" : coordinate.toUpperCase();
                     const regionString = this.widgetStore.effectiveRegionId === RegionId.CURSOR ? "Cursor" : `Region #${this.widgetStore.effectiveRegionId}`;
-                    appStore.widgetsStore.setWidgetTitle(this.props.floatingSettingsId, `${coordinateString} Settings: ${regionString}`);
+                    appStore.widgetsStore.setWidgetTitle(this.props.floatingSettingsId, `${coordinateString} Spatial Profile Settings: ${regionString}`);
                 }
             } else {
-                appStore.widgetsStore.setWidgetTitle(this.props.floatingSettingsId, `X Profile Settings: Cursor`);
+                appStore.widgetsStore.setWidgetTitle(this.props.floatingSettingsId, `X Spatial Profile Settings: Cursor`);
             }
         });
     }
@@ -191,6 +192,15 @@ export class SpatialProfilerSettingsPanelComponent extends React.Component<Widge
                 <Tabs id="spatialSettingTabs" selectedTabId={widgetStore.settingsTabId} onChange={this.handleSelectedTabChanged}>
                     <Tab id={SpatialProfilerSettingsTabs.STYLING} title="Styling" panel={<LinePlotSettingsPanelComponent {...lineSettingsProps} />} />
                     <Tab id={SpatialProfilerSettingsTabs.SMOOTHING} title="Smoothing" panel={<SmoothingSettingsComponent smoothingStore={widgetStore.smoothingStore} />} />
+                    <Tab
+                        id={SpatialProfilerSettingsTabs.COMPUTATION}
+                        title="Computation"
+                        panel={
+                            <FormGroup label={"Width"} inline={true}>
+                                <SafeNumericInput min={1} max={10} stepSize={1} value={this.widgetStore.lineRegionSampleWidth} onValueChange={value => this.widgetStore.setLineRegionSampleWidth(value)} />
+                            </FormGroup>
+                        }
+                    />
                 </Tabs>
             </div>
         );