Skip to content

Commit

Permalink
Refactor Dashboard components to use component IDs instead of full co…
Browse files Browse the repository at this point in the history 
…mponent objects for improved performance and clarity
  • Loading branch information
@simlarsen
simlarsen committed Nov 5, 2024
1 parent eefac87 commit 9690a58
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 26 deletions.
19 changes: 10 additions & 9 deletions Dashboard/src/Components/Dashboard/Canvas/Index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import DashboardBaseComponent from "Common/Types/Dashboard/DashboardComponents/D
import BlankDashboardUnitElement from "./DashboardUnit";
import DashboardBaseComponentElement from "../Components/DashboardBaseComponent";
import { GetReactElementFunction } from "Common/UI/Types/FunctionTypes";
import ObjectID from "Common/Types/ObjectID";

export interface ComponentProps {
dashboardViewConfig: DashboardViewConfig;
Expand Down Expand Up @@ -79,7 +80,7 @@ const DashboardCanvas: FunctionComponent<ComponentProps> = (
component &&
!renderedComponentsIds.includes(component.componentId.toString())
) {
renderedComponents.push(renderComponent(component));
renderedComponents.push(renderComponent(component.componentId));
renderedComponentsIds.push(component.componentId.toString());
}

Expand Down Expand Up @@ -125,11 +126,11 @@ const DashboardCanvas: FunctionComponent<ComponentProps> = (
>(null);

type RenderComponentFunction = (
component: DashboardBaseComponent,
componentId: ObjectID,
) => ReactElement;

const renderComponent: RenderComponentFunction = (
component: DashboardBaseComponent,
componentId: ObjectID,
): ReactElement => {
return (
<DashboardBaseComponentElement
Expand All @@ -142,12 +143,12 @@ const DashboardCanvas: FunctionComponent<ComponentProps> = (
dashboardCanvasTopInPx={dashboardCanvasRef.current?.clientTop || 0}
dashboardCanvasLeftInPx={dashboardCanvasRef.current?.clientLeft || 0}
totalCurrentDashboardWidthInPx={props.currentTotalDashboardWidthInPx}
component={component}
key={component.componentId.toString()}
isSelected={selectedComponentId === component.componentId.toString()}
componentId={componentId}
key={componentId.toString()}
isSelected={selectedComponentId === componentId.toString()}
onClick={() => {
// component is selected
setSelectedComponentId(component.componentId.toString());
setSelectedComponentId(componentId.toString());
}}
onComponentUpdate={(updatedComponent: DashboardBaseComponent) => {
const updatedComponents: Array<DashboardBaseComponent> =
Expand All @@ -157,7 +158,7 @@ const DashboardCanvas: FunctionComponent<ComponentProps> = (
component.componentId.toString() ===
updatedComponent.componentId.toString()
) {
return updatedComponent;
return {...updatedComponent};
}

return component;
Expand All @@ -166,7 +167,7 @@ const DashboardCanvas: FunctionComponent<ComponentProps> = (

const updatedDashboardViewConfig: DashboardViewConfig = {
...props.dashboardViewConfig,
components: updatedComponents,
components: [...updatedComponents],
};

props.onDashboardViewConfigChange(updatedDashboardViewConfig);
Expand Down
41 changes: 25 additions & 16 deletions Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,15 @@ import DefaultDashboardSize, {
} from "Common/Types/Dashboard/DashboardSize";
import { GetReactElementFunction } from "Common/UI/Types/FunctionTypes";
import DashboardViewConfig from "Common/Types/Dashboard/DashboardViewConfig";
import ObjectID from "Common/Types/ObjectID";

export interface DashboardCommonComponentProps
extends DashboardBaseComponentProps {
editToolbarComponentElements: (elements: Array<ReactElement>) => ReactElement;
}

export interface DashboardBaseComponentProps {
component: DashboardBaseComponent;
componentId: ObjectID;
isEditMode: boolean;
isSelected: boolean;
key: string;
Expand All @@ -44,8 +45,13 @@ export interface ComponentProps extends DashboardBaseComponentProps {
const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
props: ComponentProps,
): ReactElement => {
const widthOfComponent: number = props.component.widthInDashboardUnits;
const heightOfComponent: number = props.component.heightInDashboardUnits;

const component: DashboardBaseComponent = props.dashboardViewConfig.components.find(
(component: DashboardBaseComponent) => component.componentId.toString() === props.componentId.toString(),
) as DashboardBaseComponent;

const widthOfComponent: number = component.widthInDashboardUnits;
const heightOfComponent: number = component.heightInDashboardUnits;

let className: string = `relative rounded-md col-span-${widthOfComponent} row-span-${heightOfComponent} p-2 bg-white border-2 border-solid border-gray-100`;

Expand Down Expand Up @@ -88,9 +94,9 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
);

let newTopInDashboardUnits: number =
props.component.topInDashboardUnits + deltaYInDashboardUnits;
component.topInDashboardUnits + deltaYInDashboardUnits;
let newLeftInDashboardUnits: number =
props.component.leftInDashboardUnits + deltaXInDashboardUnits;
component.leftInDashboardUnits + deltaXInDashboardUnits;

// now make sure these are within the bounds of the dashboard inch component width and height in dashbosrd units

Expand All @@ -100,10 +106,10 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
props.dashboardViewConfig.heightInDashboardUnits;

const heightOfTheComponntInDashboardUnits: number =
props.component.heightInDashboardUnits;
component.heightInDashboardUnits;

const widthOfTheComponentInDashboardUnits: number =
props.component.widthInDashboardUnits;
component.widthInDashboardUnits;

// if it goes outside the bounds then max it out to the bounds

Expand Down Expand Up @@ -137,7 +143,7 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (

// update the component
const newComponentProps: DashboardBaseComponent = {
...props.component,
...component,
topInDashboardUnits: newTopInDashboardUnits,
leftInDashboardUnits: newLeftInDashboardUnits,
};
Expand Down Expand Up @@ -172,7 +178,7 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (

// update the component
const newComponentProps: DashboardBaseComponent = {
...props.component,
...component,
widthInDashboardUnits: widthInDashboardUnits,
};

Expand Down Expand Up @@ -207,7 +213,7 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (

// update the component
const newComponentProps: DashboardBaseComponent = {
...props.component,
...component,
heightInDashboardUnits: heightInDashboardUnits,
};

Expand Down Expand Up @@ -262,6 +268,9 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
window.addEventListener("mousemove", moveComponent);
window.addEventListener("mouseup", stopResizeAndMove);
}}
onMouseUp={() => {
stopResizeAndMove();
}}
className="move-element cursor-move absolute w-4 h-4 bg-blue-300 hover:bg-blue-400 rounded-full cursor-pointer"
onDragStart={(_event: React.DragEvent<HTMLDivElement>) => {}}
onDragEnd={(_event: React.DragEvent<HTMLDivElement>) => {}}
Expand Down Expand Up @@ -340,30 +349,30 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
>
{getMoveElement()}

{props.component._type === ObjectType.DashboardTextComponent && (
{component._type === ObjectType.DashboardTextComponent && (
<DashboardTextComponent
{...props}
isEditMode={props.isEditMode}
isSelected={props.isSelected}
component={props.component as DashboardTextComponentType}
component={component as DashboardTextComponentType}
editToolbarComponentElements={getEditComponentToolbar}
/>
)}
{props.component._type === ObjectType.DashboardChartComponent && (
{component._type === ObjectType.DashboardChartComponent && (
<DashboardChartComponent
{...props}
isEditMode={props.isEditMode}
isSelected={props.isSelected}
component={props.component as DashboardChartComponentType}
component={component as DashboardChartComponentType}
editToolbarComponentElements={getEditComponentToolbar}
/>
)}
{props.component._type === ObjectType.DashboardValueComponent && (
{component._type === ObjectType.DashboardValueComponent && (
<DashboardValueComponent
{...props}
isSelected={props.isSelected}
isEditMode={props.isEditMode}
component={props.component as DashboardValueComponentType}
component={component as DashboardValueComponentType}
editToolbarComponentElements={getEditComponentToolbar}
/>
)}
Expand Down
2 changes: 1 addition & 1 deletion Dashboard/src/Components/Dashboard/DashboardView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ const DashboardViewer: FunctionComponent<ComponentProps> = (
<DashboardCanvas
dashboardViewConfig={dashboardViewConfig}
onDashboardViewConfigChange={(newConfig: DashboardViewConfig) => {
setDashboardViewConfig(newConfig);
setDashboardViewConfig(JSON.parse(JSON.stringify(newConfig)));
}}
isEditMode={dashboardMode === DashboardMode.Edit}
currentTotalDashboardWidthInPx={dashboardTotalWidth}
Expand Down

0 comments on commit 9690a58

Please sign in to comment.