DashSubsurfaceViewer coords box missing padding to the right + not able to set unit for mesh data?

[eirik-morken]

Webviz-subsurface-components python version 1.0.0

In the DashSubsurfaceViewer MapLayer type in python the mouse-position information box is missing some padding to the right it seems? And I am not able to access the object to fix the css-styling as far as I can tell.

Bonus issue: Is there a way to get a "mesh" unit as well? Now only the position coordinate has units where I can put whatever I want. E.g., m, meters etc.

There is a css stylesheet for some general objects, but I don't see how that could interfere with this object.

My code:

DashSubsurfaceViewer(
            coords={"visible": True},
            scale={
            "visible": True  # Set to False to hide the scale
        },
            id='surface_grid',
            coordinateUnit = "m",
            views = {
                "layout": [1, 1],
                "showLabel": False,
                "viewports": [
                    {
                        "id": "deck_view",
                        # "show3D": dimension,
                        "show3D": True,
                        "layerIds": layersid,
                        "isSync": True
                        },
                        ],
                        },
                        bounds = [
            depth_surface.xmin,
            depth_surface.ymin - (depth_surface.ymax-depth_surface.ymin)*0.1,
            depth_surface.xmax,
            depth_surface.ymax + (depth_surface.ymax-depth_surface.ymin)*0.1,

        ],
        layers=[
            {
                "@@type": "AxesLayer",
                # "id": LayoutElements.AXES_LAYER,
                "id": 'AXES_LAYER',
                "bounds": [
                        depth_surface.xmin,
                        depth_surface.ymin,
                        min_grid_value * multiplication_factor,
                        depth_surface.xmax,
                        depth_surface.ymax,
                        max_grid_value * multiplication_factor,
                        ]
            },
            {
                "@@type": "MapLayer",
                # "id":LayoutElements.MAP_LAYER,
                "id":'MAP_LAYER',
                "meshData": depth_surface.get_values1d(order="F", asmasked=True).astype(np.float32) * multiplication_factor,
                "ZIncreasingDownwards" : True,

                "frame": {
                    "origin": [depth_surface.xori, depth_surface.yori],
                    "count": [depth_surface.ncol, depth_surface.nrow],
                    "increment": [depth_surface.xinc, depth_surface.yinc],
                    "rotDeg": depth_surface.rotation,
                    },
                "contours": [0, 50],
                "isContoursDepth": True,
                "gridLines": False,
                "material": True,
                "colorMapName": colormapname,
                "colorMapRange": [color_settings["min_color"],color_settings["max_color"]],
                # "colorMapRange": None,
                "name": "mesh",
                    },
                    ])

[hkfb]

In the DashSubsurfaceViewer MapLayer type in python the mouse-position information box is missing some padding to the right it seems?

Any idea what might cause this? Can you reproduce it with any of the storybook examples?

Bonus issue: Is there a way to get a "mesh" unit as well? Now only the position coordinate has units where I can put whatever I want. E.g., m, meters etc.

Please create a separate issue for this.

[eirik-morken]

I tested by removing the entire css-stylesheet and then it returned to normal. Could you give me the class and other properties that could be accessed by the css-stylesheet? If this is not easy to get for you then I guess worst case is to debug 500 lines of css-stylesheet 😅

[hkfb]

The readout panel is styled using @mui styled. Not sure how that interacts with CSS stylesheets. This is the relevant code:

const StyledTable = styled(Table)({
    "& > *": {
        backgroundColor: "#ffffffcc",
        color: "#000000ff",
        border: "2px solid #ccc",
        padding: "0px",
        borderRadius: "5px",
        position: "absolute",
        bottom: 0,
        left: 0,
        marginLeft: "3px",
        marginBottom: "3px",
    },
});

const StyledTableCell = styled(TableCell)({
    border: "none",
    padding: 0,
    width: "20px",
});

const StyledTableRow = styled(TableRow)({
    "& > *": {
        padding: 0,
    },
});

Link in code: https://github.com/equinor/webviz-subsurface-components/blob/776101f82e759273ae407e3313a2e6cef981c37b/typescript/packages/subsurface-viewer/src/components/InfoCard.tsx#L45

[eirik-morken]

Found the culprit!

th:last-child, td:last-child {
  padding-right: 0;
}