Change dash array expression to use "literal" form

[rwl]

Does

powsybl-network-viewer/src/components/network-map-viewer/network/line-layer.ts

Lines 56 to 57 in 6d46eb0

	const noDashArray = [0, 0] as const;
	const dashArray = [15, 10] as const;

need to be changed to:

const noDashArray = ["literal", [0, 0]] as const;
const dashArray = ["literal", [15, 10]] as const;

I get this error when using the NetworkMap component:

Error: layers.gl-draw-lines.hot.paint.line-dasharray[2][0]: Expression name must be a string, but found number instead. If you wanted a literal array, use ["literal", [...]].

[jonenst]

Hi,
could you elaborate on this error ? How did you get it ? Do you have more information, a stacktrace maybe ?. The error you provied seems to be an error message from mapboxgl but we don't use the related feature. We use dash lines with in our deckgl network overlay, Is this some global search/replace suggestion or something ? If so, it doesn't apply to our project.

[rwl]

I get this error when using the NetworkMap component in a small React/TypeScript web app. It is very similar to the demo provided with powsybl-network-viewer, but the demo doesn't have the error:

powsybl-network-viewer/demo/src/App.tsx

Lines 88 to 128 in 3238b8c

	<NetworkMap
	ref={networkMapRef}
	mapEquipments={mapEquipments}
	geoData={geoData}
	labelsZoomThreshold={LABELS_ZOOM_THRESHOLD}
	arrowsZoomThreshold={ARROWS_ZOOM_THRESHOLD}
	initialZoom={INITIAL_ZOOM}
	useName={useName}
	onSubstationClick={(vlId) => {
	console.log('# OpenVoltageLevel: ' + vlId);
	}}
	onSubstationClickChooseVoltageLevel={(idSubstation, x, y) =>
	console.log(
	`# Choose Voltage Level for substation: ${idSubstation} at coordinates (${x}, ${y})`
	)
	}
	onSubstationMenuClick={(equipment, x, y) =>
	showEquipmentMenu(equipment, x, y, 'substation')
	}
	onLineMenuClick={(equipment, x, y) => showEquipmentMenu(equipment, x, y, 'line')}
	onVoltageLevelMenuClick={(equipment, x, y) => {
	console.log(
	`# VoltageLevel menu click: ${JSON.stringify(
	equipment
	)} at coordinates (${x}, ${y})`
	);
	}}
	mapLibrary={'cartonolabel'}
	mapTheme={'dark'}
	filteredNominalVoltages={filteredNominalVoltages}
	onDrawPolygonModeActive={(active) => {
	console.log('polygon drawing mode active: ', active ? 'active' : 'inactive');
	}}
	onPolygonChanged={() => {
	console.log(
	'Selected Substations: ',
	networkMapRef.current?.getSelectedSubstations().length
	);
	console.log('Selected Lines: ', networkMapRef.current?.getSelectedLines().length);
	}}
	/>

The stack trace wasn't very helpful. This was just my best guess at the issue and I was kinda hoping you had seen something similar. I will just ignore it for now. Thanks anyway.

[jonenst]

Hi,

thank you for taking the time to open and issue and try to fix the problem.

Having looked at it more closely, the variables you found in our source code have similar names but are actually unrelated to the problem.

You can see the problem when using maplibre instead of mapbox and using the mapbox-gl-draw DrawControl (the thing to select a polygon on the map on the bottom left corner) and is already reported upstream maplibre/maplibre-gl-js#5773

So with maplibre, you get the error logs in the console, and you also don't have the dashed lines in the selection (as opposed to when using mapbox-gl)

It doesn't look like we can fix this though :(