stevegreatrex/birst-react-embed

Embed React-generated content in Birst dashboards

birst-react-embed's Issues

Drill Down Components Discussion

General Background (How we use DD/Filters currently)

The way we currently 'Drill Down' to a dashboard in playerGrid is by passing in a property on IProfileGridParameters like so:

drillDown: {
        dashboard: 'Collection',
        page: 'React Embed Child Dashboard'
}

... where dashboard is the Collection that contains the child dashboard and page is the child dashboard that you wish to drill down to. (Collection rather than dashboard and childDashboard instead of page would make more sense in hindsight 👀 ).

This gets mapped to IProfileCardGridProps which is available on each ProfileCardand finally we use the following function onClick : drillDownHandler() to send the operation to the window:

const drilldownHandler = (props: IProfileCardProps) => {
	if(!props.drillDown)
		return;
        
        //Add a filter to the parent window
	const parentWindow = window.parent as IBirstParentWindow;
	parentWindow.filters = { drillDownFilter: props.playerName};

        //Drill Down to the child dashboard
	window.parent.postMessage( { operation: 'drillToDashboard', dashboard: props.drillDown.dashboard, page: props.drillDown.page }, '*' );
};

General Idea (How we want to use DD/Filters in the future)

Sharoon and I feel that it would make sense for it to go on the birst-react-embed library in a reusable function to make life easier and as you put it "reduce the amount of WTF".

The real general idea would still pass in the collection and page properties into createConnectedGrid
and then using a applyDrillDown function that transforms the IBQLComponent into an component with a drillDown (I'm not sure I explained that very well.) Then the drillDown is available on each component and fillters would be optional.

General Implementation

We wrote some pseudo code to demonstrate how it could work:

const createConnectedGrid = (parameters: IProfileGridParameters) => {
    const bqlComponent = createQuery(parameters);
    
    if (parameters.drillDown) {
        bqlComponent = applyDrilldown(bqlComponent, parameters.drillDown);
    }
    
    const Connected = connectToBirst(bqlComponent)(ProfileCardGrid);
    return <Connected {...parameters} />;
};


function applyDrilldown<TBirstComponent>(component: TBirstComponent, drillDownParameters: IDrillDownParameters)  {
    function createDrillDownComponent<TDrillDownComponent extends TBirstComponent>(component: TBirstComponent, drillDownParameters: IDrillDownParameters){
        // Set drilldown on params.
        // return new component with drill down
    }
}

I hope that makes some sense. Here's our current implementation for reference

connectToBirst() only works with stateless components?

Hey Steve, hope things are well.

I'm currently trying to port the Bodymap into a reusesable birst widget, and I'm having an issue when I try and use connectToBirst(createQuery(parameters))(BodyMapComponent).

If BodyMapComponent is a stateless component it works fine but I'm getting to a point where I think need to be able to deal with state and when I make it into a class I get the following error:

ERROR in [at-loader] ./src/BodyMap/createConnectedBodyMap.tsx:38:60
        TS2345: Argument of type 'typeof BodyMapContainer' is not assignable to parameter of type 'ComponentType<{ bodyParts: IBodyPart[]; } & { applyDrillDown(drillDown: IDrillDown): any; }>'.
      Type 'typeof BodyMapContainer' is not assignable to type 'StatelessComponent<{ bodyParts: IBodyPart[]; } & { applyDrillDown(drillDown: IDrillDown): any; }>'.
        Type 'typeof BodyMapContainer' provides no match for the signature '(props: { bodyParts: IBodyPart[]; } & { applyDrillDown(drillDown: IDrillDown): any; } & { children?: ReactNode; }, context?: any): ReactElement<any> | null'.
webpack: Failed to compile.

A quick get around is to replace BodyMapComponent with a stateless component wrapping BodyMapComponent and this passes down the props, but obviously that feels a little wrong and I think this might be causing some issues with trying to pass through other HTMLparameters.

Here's my BodyMapContainer component just in case I'm doing anything obvious:

import * as React from 'react';
import { IBodyPart } from '../IBodyPart';
import { BodyPart } from './BodyPart';
import { BodyMap } from './BodyMap';
import { Thumbnail } from './Thumbnail';
const css = require('../bodyMap.less');

export interface IBodyMapContainerProps {
	bodyParts: IBodyPart[];
	imageUrls: string;
};

interface IBodyMapContainerState {
	backgroundImage: string;
}

export class BodyMapContainer extends React.Component<IBodyMapContainerProps, IBodyMapContainerState> {
	constructor(props: IBodyMapContainerProps) {
		super(props);
	}
	
	updateImage = (backgroundImage: string) => {
	//Does something
	};

	render() {
		return (
		<div className='image-map-container'>
		<div className='thumbnails'>
			<Thumbnail onChange = { this.updateImage } backgroundImage = './Images/body-map-front.png'/>
			<Thumbnail onChange = { this.updateImage } backgroundImage = './Images/body-map-back.png'/>
		</div>
			<svg className='image-map-svg' >
				<BodyMap
					{...this.props}
				>
				</BodyMap>
			</svg>
		</div>
		)
	}
}

export default BodyMapContainer;