More beautiful TAD color, some fixes (0c1b295b) · Commits · Visitlab / Chromatin / chromoskein

app/src/components/RightPanel/ChromatinViewportConfigurationPanel.tsx

+25 −13

Original line number	Diff line number	Diff line
		@@ -129,7 +129,7 @@ export function ChromatinViewportConfigurationPanel(props: {
		});

		const densityDataOptions = data.data
		.filter(d => d.type == "sparse-1d-data-text" \|\| d.type == "sparse-1d-data-numerical")
		.filter(d => d.type == "sparse-1d-data-text" \|\| d.type == "sparse-1d-data-numerical" \|\| d.type == 'bed-annotation')
		.map(d => {
		return {
		key: isoDataID.unwrap(d.id),
		@@ -355,17 +355,29 @@ export function ChromatinViewportConfigurationPanel(props: {
		const [isSingleColorCalloutVisible, setIsSingleColorCalloutVisible] = useState<boolean>(false);

		const setColorMappingData = (event: React.FormEvent<IComboBox>, option?: IComboBoxOption) => {
		// if (option) {
		// const selectedDataId: number = option.key as number;
		console.log('color mapping change', configuration.selectedDatum);
		if (option && configuration.selectedDatum != null) {
		console.log('before', configuration.data[configuration.selectedDatum].mapValues);

		// updateConfiguration({
		// ...configuration,
		// mapValues: {
		// ...configuration.mapValues,
		// id: selectedDataId,
		// },
		// });
		// }
		const selectedDataId: number = option.key as number;

		const newData = configuration.data;
		newData[configuration.selectedDatum] = {
		...newData[configuration.selectedDatum],
		colorMappingMode: '1d-density',
		mapValues: {
		...newData[configuration.selectedDatum].mapValues,
		id: selectedDataId,
		}
		};

		updateConfiguration({
		...configuration,
		data: newData
		});

		console.log('after', configuration.data[configuration.selectedDatum].mapValues)
		}
		};

		const setSasaConfiguration = (sasaConfiguration: { method: "constant" \| "generated", probeSize: number, accuracy: number, individual: boolean }) => {
		@@ -633,8 +645,8 @@ export function ChromatinViewportConfigurationPanel(props: {

		{configuration.selectedDatum != null && configuration.data.length > configuration.selectedDatum && (<Slider
		label="Radius"
		min={configuration.data[configuration.selectedDatum].radiusRange.min}
		max={configuration.data[configuration.selectedDatum].radiusRange.max}
		min={0.0}
		max={configuration.data[configuration.selectedDatum].radiusRange.max * 2.0}
		step={(configuration.data[configuration.selectedDatum].radiusRange.max - configuration.data[configuration.selectedDatum].radiusRange.min) / 100.0}
		value={toNumber(configuration.data[configuration.selectedDatum].radius)}
		showValue={false}

app/src/components/viewports/ChromatinViewport.tsx

+66 −3

Original line number	Diff line number	Diff line
		@@ -239,15 +239,20 @@ export function ChromatinViewport(props: {

		const newColors = new Array(configuration.data.length);
		for (const [configurationDatumIndex, configurationDatum] of configuration.data.entries()) {
		const datum = data.data.find(d => d.id === configurationDatum.id)?.values as Positions3D;
		const datum: Data \| undefined = data.data.find(d => d.id === configurationDatum.id);

		if (!datum) {
		continue;
		}
		const datumPositions = datum.values as Positions3D;
		const chromatinPart = viewport.getChromatinPartByDataId(configurationDatumIndex);
		let dataMarkers = null;

		if (!datum \|\| !chromatinPart) {
		if (!datumPositions \|\| !chromatinPart) {
		continue;
		}

		const positions = datum.positions;
		const positions = datumPositions.positions;

		const binsAmount = chromatinPart.getBinsPositions().length;

		@@ -302,6 +307,60 @@ export function ChromatinViewport(props: {

		const colorScale = chroma.scale(['#fcfdfd', '#010a4e']);
		newColors[configurationDatumIndex] = chromatinPart.cacheColorArray(mapScaleToChromatin(chromatinPart, globalSasaValues, colorScale));
		} else if (configurationDatum.colorMappingMode == "1d-density") {
		const data1d: Array<{ chromosome: string, from: number, to: number }> \| null = data.data.find(d => d.id == isoDataID.wrap(configurationDatum.mapValues.id))?.values as Sparse1DTextData \| Sparse1DNumericData \| null;

		if (!data1d \|\| !(datum.type == '3d-positions')) {
		return;
		}

		const datumTyped = datum as BinPositionsData;

		const countPerBin: Array<number> = new Array(binsAmount).fill(0);

		const chromosomeData1d = [...data1d.map(v => {return { ...v }})];
		const res = datumTyped.basePairsResolution;

		const connectivity = datumTyped.values.connectivity;

		if (connectivity) {
		const indexes = [];
		for(let i = 0; i < connectivity.length; i++) {
		if (connectivity[i] === 0)
		indexes.push(i);
		}

		for(const [i, offset] of indexes.entries()) {
		const underChrosome = chromosomeData1d.filter(c => parseInt(c.chromosome) === i + 1);

		for (const v of underChrosome) {
		v.from += offset * res;
		v.to += offset * res;
		}
		}
		}

		for (let binIndex = 0; binIndex < binsAmount; binIndex++) {
		for (const datum of chromosomeData1d) {
		if (datum.from <= (binIndex + 1) * res
		&& datum.to >= binIndex * res) {
		countPerBin[binIndex] += 1;
		}
		}
		}

		const logCountPerBin = countPerBin.map(v => Math.log(v) + 1);
		const colorScale = chroma.scale(['#fcfdfd', '#010a4e']);

		newColors[configurationDatumIndex] = chromatinPart.cacheColorArray(mapScaleToChromatin(chromatinPart, logCountPerBin, colorScale));
		} else if (configurationDatum.colorMappingMode == "linear-order") {
		const colorScale = chroma.scale(['#0d1a29', '#133250', '#1e4c7b', '#3868a7', '#658ac6', '#88a0c9', '#aab6ca', '#d3d6da']);

		const numbers = [...Array(binsAmount).keys()];

		console.log(numbers);

		newColors[configurationDatumIndex] = chromatinPart.cacheColorArray(mapScaleToChromatin(chromatinPart, numbers, colorScale));
		}
		}

		@@ -400,6 +459,10 @@ export function ChromatinViewport(props: {
		return;
		}

		if (!configuration.data[selectedDatum] \|\| !configuration.data[selectedDatum].selectedSelectionID) {
		return;
		}

		const selection = globalSelections.selections.find(s => s.id == configuration.data[selectedDatum].selectedSelectionID);
		if (!selection) {
		return;