Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • graphpolaris/frontend-v2
  • rijkheere/frontend-v-2-reordering-paoh
2 results
Show changes
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 763 additions and 325 deletions
libs/shared/lib/insight-sharing/SettingsPanel.tsx deleted 100644 → 0
View file @ 9bab4688
import React, { useEffect, useState } from 'react';
import { ReportingForm } from './reporting/ReportingForm';
import { AlertingForm } from './alerting/AlertingForm';
import { Button, Icon } from '../components';
import { AddItem } from './components/AddItem';
import { StartScreen } from './components/StartScreen';
import { MonitorType } from './components/Sidebar';
type Props = {
active: string;
activeCategory: MonitorType | undefined;
adding: boolean;
setAdding: (val: boolean) => void;
setActiveCategory: (val: MonitorType | undefined) => void;
};
export function SettingsPanel(props: Props) {
const [contacts, setContacts] = useState<string[]>([]);
const getContacts = (): string[] => ['Jan', 'Piet'];
useEffect(() => {
if (!contacts) {
const userContacts = getContacts();
setContacts(userContacts);
}
}, []);
return props.activeCategory ? (
<div className="w-3/4 p-4">
{props.adding ? (
<AddItem category={props.activeCategory} />
) : (
props.active &&
props.activeCategory && (
<div>
{props.activeCategory === 'report' ? (
<ReportingForm activeTemplate={props.active} />
) : (
<AlertingForm activeTemplate={props.active} />
)}
</div>
)
)}
<div className="flex justify-end mt-2">
<Button label="Delete" variantType="secondary" variant="outline" />
<Button label="Save" variantType="primary" className="ml-2" />
</div>
</div>
) : (
<StartScreen setAdding={props.setAdding} setActiveCategory={props.setActiveCategory} />
);
}
libs/shared/lib/insight-sharing/alerting/AlertingForm.tsx deleted 100644 → 0
View file @ 9bab4688
import React, { useState } from 'react';
import { Accordion, AccordionItem, AccordionHead, AccordionBody } from '../../components/accordion';
import { TextEditor } from '../../components/textEditor';
import { EditorState } from 'lexical';
type Props = {
activeTemplate: string;
};
export function AlertingForm(props: Props) {
const [editorState, setEditorState] = useState<EditorState | undefined>(undefined);
return (
<div>
<span className="text-lg text-secondary-600 font-bold mb-4">Alert ID: {props.activeTemplate}</span>
<Accordion defaultOpenAll={true} className="border-t divide-y">
<AccordionItem className="pt-2 pb-4">
<AccordionHead showArrow={false}>
<span className="font-semibold">Recipient(s)</span>
</AccordionHead>
<AccordionBody>
<div>
<input className="border" />
</div>
</AccordionBody>
</AccordionItem>
<AccordionItem className="pt-2 pb-4">
<AccordionHead showArrow={false}>
<span className="font-semibold">Alerting text</span>
</AccordionHead>
<AccordionBody>
<TextEditor
editorState={editorState}
setEditorState={setEditorState}
showToolbar={true}
placeholder="Start typing your alert template..."
/>
</AccordionBody>
</AccordionItem>
</Accordion>
</div>
);
}
libs/shared/lib/insight-sharing/components/AddItem.tsx
View file @ 4bad3086
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Input } from '../../components'; import { Input, Button } from '../../components';
import { MonitorType } from './Sidebar'; import { MonitorType as InsightType, MonitorType } from './Sidebar';
import { useAppDispatch, useSessionCache } from '../../data-access';
import { addInsight } from '../../data-access/store/insightSharingSlice';
import { wsCreateInsight } from '../../data-access/broker/wsInsightSharing';
import { addError, addSuccess, } from '@graphpolaris/shared/lib/data-access/store/configSlice';
type Props = { type Props = {
category: MonitorType; setAdding: (val: false | MonitorType) => void;
setActive: (val: string) => void;
type: InsightType;
}; };
export function AddItem(props: Props) { export function AddItem(props: Props) {
const [value, setValue] = useState<string>(''); const [name, setName] = useState<string>('');
const [description, setDescription] = useState<string>('');
const dispatch = useAppDispatch();
const session = useSessionCache();
const handleSave = async () => {
if (!name.trim()) {
dispatch(addError('Name is required'));
return;
}
const newInsight = {
name,
description,
recipients: [],
template: '',
frequency: props.type === 'report' ? 'Daily' : '',
saveStateId: session.currentSaveState || '',
type: props.type,
};
wsCreateInsight(newInsight, (data: any, status: string) => {
if (status === 'success') {
dispatch(addInsight(data));
props.setActive(data.id);
props.setAdding(false);
dispatch(addSuccess('Succesfully created ' + props.type));
} else {
console.error('Failed to create insight:', data);
dispatch(addError('Failed to create new ' + props.type))
}
});
};
return ( return (
<div> <div>
<span className="text-lg text-secondary-600 font-bold mb-4">Add a new {props.category}ing service</span> <span className="text-lg text-secondary-600 font-bold mb-4">Add a new {props.type}ing service</span>
<Input type="text" label="Name" value={value} onChange={setValue} /> <Input type="text" label="Name" value={name} onChange={setName} className="mb-2" />
<Input type="text" label="Description" value={description} onChange={setDescription} className="mb-2" />
<Button label="Save" onClick={handleSave} disabled={!name || !description} className="mt-2" />
</div> </div>
); );
} }
libs/shared/lib/insight-sharing/components/Sidebar.tsx
View file @ 4bad3086
import React from 'react'; import React, { useEffect } from 'react';
import { Button } from '../../components'; import { Button } from '../../components';
import { Accordion, AccordionBody, AccordionHead, AccordionItem } from '../../components/accordion'; import { Accordion, AccordionBody, AccordionHead, AccordionItem } from '../../components/accordion';
import { useAppDispatch, useInsights } from '../../data-access';
import { setInsights } from '../../data-access/store/insightSharingSlice';
import { useSessionCache } from '../../data-access';
import { wsGetInsights } from '../../data-access/broker/wsInsightSharing';
export type MonitorType = 'report' | 'alert'; export type MonitorType = 'report' | 'alert';
type SidebarProps = { type SidebarProps = {
reports: string[]; setAdding: (val: false | MonitorType) => void;
alerts: string[]; setActive: (val: string) => void;
changeActive: (category: MonitorType, val: string) => void;
setAdding: (val: boolean) => void;
setActiveCategory: (val: MonitorType | undefined) => void;
}; };
export function Sidebar(props: SidebarProps) { export function Sidebar(props: SidebarProps) {
const dispatch = useAppDispatch();
const session = useSessionCache();
const insights = useInsights();
useEffect(() => {
if (session.currentSaveState && session.currentSaveState !== '') {
wsGetInsights(session.currentSaveState, (data: any, status: string) => {
dispatch(setInsights(data));
});
}
}, [session.currentSaveState]);
return ( return (
<div className="w-1/4 border-r overflow-auto flex flex-col h-full"> <>
<span className="text-lg text-secondary-700 font-semibold px-2 py-4">Insight Sharing</span> <span className="text-lg text-secondary-700 font-semibold px-2 py-4">Insight Sharing</span>
<Accordion defaultOpenIndex={0}> <Accordion defaultOpenAll={true}>
<AccordionItem className=""> <AccordionItem className="">
<AccordionHead className="border-b bg-secondary-50 hover:bg-secondary-100 p-1"> <AccordionHead className="border-b bg-secondary-50 hover:bg-secondary-100 p-1">
<div className="w-full flex justify-between"> <div className="w-full flex justify-between">
<span className="font-semibold">Reports</span> <span className="font-semibold">Reports</span>
<div <div
onClick={(e) => { onClick={(e) => {
props.setAdding(true); props.setAdding('report');
props.setActiveCategory('report');
e.stopPropagation(); e.stopPropagation();
}} }}
> >
...@@ -41,18 +53,20 @@ export function Sidebar(props: SidebarProps) { ...@@ -41,18 +53,20 @@ export function Sidebar(props: SidebarProps) {
</AccordionHead> </AccordionHead>
<AccordionBody className="ml-0"> <AccordionBody className="ml-0">
<ul className="space-y-2"> <ul className="space-y-2">
{props.reports.map((name, index) => ( {insights
<li .filter((insight) => insight.type === 'report')
key={index} .map((report) => (
className="cursor-pointer p-2 hover:bg-secondary-50" <li
onClick={() => { key={report.id}
props.changeActive('report', name); className="cursor-pointer p-2 hover:bg-secondary-50"
props.setAdding(false); onClick={() => {
}} props.setAdding(false);
> props.setActive(report.id);
{name} }}
</li> >
))} {report.name}
</li>
))}
</ul> </ul>
</AccordionBody> </AccordionBody>
</AccordionItem> </AccordionItem>
...@@ -62,8 +76,7 @@ export function Sidebar(props: SidebarProps) { ...@@ -62,8 +76,7 @@ export function Sidebar(props: SidebarProps) {
<span className="font-semibold">Alerts</span> <span className="font-semibold">Alerts</span>
<div <div
onClick={(e) => { onClick={(e) => {
props.setAdding(true); props.setAdding('alert');
props.setActiveCategory('alert');
e.stopPropagation(); e.stopPropagation();
}} }}
> >
...@@ -80,22 +93,24 @@ export function Sidebar(props: SidebarProps) { ...@@ -80,22 +93,24 @@ export function Sidebar(props: SidebarProps) {
</AccordionHead> </AccordionHead>
<AccordionBody className="ml-0"> <AccordionBody className="ml-0">
<ul className="space-y-2"> <ul className="space-y-2">
{props.alerts.map((name, index) => ( {insights
<li .filter((insight) => insight.type === 'alert')
key={index} .map((alert) => (
className="cursor-pointer p-2 hover:bg-secondary-50" <li
onClick={() => { key={alert.id}
props.changeActive('alert', name); className="cursor-pointer p-2 hover:bg-secondary-50"
props.setAdding(false); onClick={() => {
}} props.setAdding(false);
> props.setActive(alert.id);
{name} }}
</li> >
))} {alert.name}
</li>
))}
</ul> </ul>
</AccordionBody> </AccordionBody>
</AccordionItem> </AccordionItem>
</Accordion> </Accordion>
</div> </>
); );
} }
libs/shared/lib/insight-sharing/components/StartScreen.tsx
View file @ 4bad3086
...@@ -3,13 +3,12 @@ import { Button, Icon } from '../../components'; ...@@ -3,13 +3,12 @@ import { Button, Icon } from '../../components';
import { MonitorType } from './Sidebar'; import { MonitorType } from './Sidebar';
type Props = { type Props = {
setAdding: (val: boolean) => void; setAdding: (val: false | MonitorType) => void;
setActiveCategory: (val: MonitorType | undefined) => void;
}; };
export function StartScreen(props: Props) { export function StartScreen(props: Props) {
return ( return (
<div className="w-full flex justify-center items-center"> <div className="w-full h-full flex justify-center items-center">
<div className=""> <div className="">
<span className="text-lg text-secondary-700 font-bold mb-4">Start</span> <span className="text-lg text-secondary-700 font-bold mb-4">Start</span>
<div> <div>
...@@ -19,8 +18,7 @@ export function StartScreen(props: Props) { ...@@ -19,8 +18,7 @@ export function StartScreen(props: Props) {
variant="outline" variant="outline"
className="mb-2" className="mb-2"
onClick={() => { onClick={() => {
props.setAdding(true); props.setAdding('report');
props.setActiveCategory('report');
}} }}
/> />
<Button <Button
...@@ -28,8 +26,7 @@ export function StartScreen(props: Props) { ...@@ -28,8 +26,7 @@ export function StartScreen(props: Props) {
label="New alert" label="New alert"
variant="outline" variant="outline"
onClick={() => { onClick={() => {
props.setAdding(true); props.setAdding('alert');
props.setActiveCategory('alert');
}} }}
/> />
</div> </div>
......
libs/shared/lib/insight-sharing/reporting/ReportingForm.tsx deleted 100644 → 0
View file @ 9bab4688
import React, { useState } from 'react';
import { Input, LoadingSpinner } from '../../components';
import { Accordion, AccordionBody, AccordionHead, AccordionItem } from '../../components/accordion';
import { TextEditor } from '../../components/textEditor';
import { EditorState } from 'lexical';
type Props = {
activeTemplate: string;
};
export function ReportingForm(props: Props) {
const [loading, setLoading] = useState(false);
const [editorState, setEditorState] = useState<EditorState | undefined>(undefined);
return loading ? (
<LoadingSpinner />
) : (
props.activeTemplate && (
<div>
<span className="text-lg text-secondary-600 font-bold mb-4">Report ID: {props.activeTemplate}</span>
<Accordion defaultOpenAll={true} className="border-t divide-y">
<AccordionItem className="pt-2 pb-4">
<AccordionHead showArrow={false}>
<span className="font-semibold">Recipient(s)</span>
</AccordionHead>
<AccordionBody>
<div>
<input className="border" />
</div>
</AccordionBody>
</AccordionItem>
<AccordionItem className="pt-2 pb-4">
<AccordionHead showArrow={false}>
<span className="font-semibold">Repeat</span>
</AccordionHead>
<AccordionBody>
<Input label="Frequency" type="dropdown" value={'Daily'} onChange={() => {}} options={['Daily', 'Weekly']} className="mb-1" />
</AccordionBody>
</AccordionItem>
<AccordionItem className="pt-2 pb-4">
<AccordionHead showArrow={false}>
<span className="font-semibold">Email template</span>
</AccordionHead>
<AccordionBody>
<TextEditor
editorState={editorState}
setEditorState={setEditorState}
showToolbar={true}
placeholder="Start typing your report template..."
/>
</AccordionBody>
</AccordionItem>
</Accordion>
</div>
)
);
}
libs/shared/lib/vis/components/VisualizationPanel.tsx
View file @ 4bad3086
...@@ -17,7 +17,7 @@ import { updateVisualization, addVisualization } from '../../data-access/store/v ...@@ -17,7 +17,7 @@ import { updateVisualization, addVisualization } from '../../data-access/store/v
import { VisualizationPropTypes, VISComponentType } from '../common'; import { VisualizationPropTypes, VISComponentType } from '../common';
import { ErrorBoundary } from '../../components/errorBoundary'; import { ErrorBoundary } from '../../components/errorBoundary';
import { addError } from '../../data-access/store/configSlice'; import { addError } from '../../data-access/store/configSlice';
import { canViewFeature } from '@graphpolaris/shared/lib/components/featureFlags/featureFlags'; import { canViewFeature } from '../../components/featureFlags';
type PromiseFunc = () => Promise<{ default: VISComponentType<any> }>; type PromiseFunc = () => Promise<{ default: VISComponentType<any> }>;
export const Visualizations: Record<string, PromiseFunc> = { export const Visualizations: Record<string, PromiseFunc> = {
......
libs/shared/lib/vis/visualizations/vis1D/Vis1D.tsx
View file @ 4bad3086
...@@ -6,6 +6,7 @@ import { CustomChartPlotly, plotTypeOptions } from './components/CustomChartPlot ...@@ -6,6 +6,7 @@ import { CustomChartPlotly, plotTypeOptions } from './components/CustomChartPlot
import { Input } from '@graphpolaris/shared/lib/components/inputs'; import { Input } from '@graphpolaris/shared/lib/components/inputs';
import { EntityPill } from '@graphpolaris/shared/lib/components/pills/Pill'; import { EntityPill } from '@graphpolaris/shared/lib/components/pills/Pill';
import { Button } from '@graphpolaris/shared/lib/components/buttons'; import { Button } from '@graphpolaris/shared/lib/components/buttons';
import { GraphQueryResult } from '@graphpolaris/shared/lib/data-access';
export interface Vis1DProps { export interface Vis1DProps {
plotType: (typeof plotTypeOptions)[number]; // plotly plot type plotType: (typeof plotTypeOptions)[number]; // plotly plot type
...@@ -13,7 +14,10 @@ export interface Vis1DProps { ...@@ -13,7 +14,10 @@ export interface Vis1DProps {
selectedEntity: string; // node label to plot selectedEntity: string; // node label to plot
xAxisLabel?: string; xAxisLabel?: string;
yAxisLabel?: string; yAxisLabel?: string;
zAxisLabel?: string;
showAxis: boolean; showAxis: boolean;
groupData?: string;
stack: boolean;
} }
const defaultSettings: Vis1DProps = { const defaultSettings: Vis1DProps = {
...@@ -22,13 +26,34 @@ const defaultSettings: Vis1DProps = { ...@@ -22,13 +26,34 @@ const defaultSettings: Vis1DProps = {
selectedEntity: '', selectedEntity: '',
xAxisLabel: '', xAxisLabel: '',
yAxisLabel: '', yAxisLabel: '',
zAxisLabel: '',
showAxis: true, showAxis: true,
groupData: undefined,
stack: false,
}; };
export interface Vis1DVisHandle { export interface Vis1DVisHandle {
exportImageInternal: () => void; exportImageInternal: () => void;
} }
export const getAttributeValues = (query: GraphQueryResult, selectedEntity: string, attributeKey: string | number | undefined): any[] => {
if (!selectedEntity || !attributeKey) {
return [];
}
if (attributeKey == ' ') {
return [];
}
return query.nodes
.filter((item) => item.label === selectedEntity)
.map((item) => {
// Check if the attribute exists, return its value if it does, or an empty string otherwise
return item.attributes && attributeKey in item.attributes && item.attributes[attributeKey] != ''
? item.attributes[attributeKey]
: 'NoData';
});
};
const Vis1D = forwardRef<Vis1DVisHandle, VisualizationPropTypes<Vis1DProps>>(({ data, settings }, refExternal) => { const Vis1D = forwardRef<Vis1DVisHandle, VisualizationPropTypes<Vis1DProps>>(({ data, settings }, refExternal) => {
const internalRef = useRef<HTMLDivElement>(null); const internalRef = useRef<HTMLDivElement>(null);
...@@ -67,29 +92,33 @@ const Vis1D = forwardRef<Vis1DVisHandle, VisualizationPropTypes<Vis1DProps>>(({ ...@@ -67,29 +92,33 @@ const Vis1D = forwardRef<Vis1DVisHandle, VisualizationPropTypes<Vis1DProps>>(({
}, },
})); }));
const getAttributeValues = (attributeKey: string | number | undefined) => { const xAxisData = useMemo(
if (!settings.selectedEntity || !attributeKey) { () => getAttributeValues(data, settings.selectedEntity, settings.xAxisLabel),
return []; [data, settings.selectedEntity, settings.xAxisLabel],
} );
const yAxisData = useMemo(
return data.nodes () => getAttributeValues(data, settings.selectedEntity, settings.yAxisLabel),
.filter((item) => item.label === settings.selectedEntity && item.attributes && attributeKey in item.attributes) [data, settings.selectedEntity, settings.yAxisLabel],
.map((item) => item.attributes[attributeKey]); );
}; const zAxisData = useMemo(
() => getAttributeValues(data, settings.selectedEntity, settings.zAxisLabel),
const xAxisData = useMemo(() => getAttributeValues(settings.xAxisLabel), [data, settings.selectedEntity, settings.xAxisLabel]); [data, settings.selectedEntity, settings.zAxisLabel],
const yAxisData = useMemo(() => getAttributeValues(settings.yAxisLabel), [data, settings.selectedEntity, settings.yAxisLabel]); );
return ( return (
<div className="h-full w-full flex items-center justify-center overflow-hidden" ref={internalRef}> <div className="h-full w-full flex items-center justify-center overflow-hidden" ref={internalRef}>
<CustomChartPlotly <CustomChartPlotly
xAxisData={xAxisData as string[] | number[]} xAxisData={xAxisData as string[] | number[]}
yAxisData={yAxisData as string[] | number[]} yAxisData={yAxisData as string[] | number[]}
zAxisData={zAxisData as string[] | number[]}
plotType={settings.plotType} plotType={settings.plotType}
title={settings.title} title={settings.title}
showAxis={settings.showAxis} showAxis={settings.showAxis}
xAxisLabel={settings.xAxisLabel} xAxisLabel={settings.xAxisLabel}
yAxisLabel={settings.yAxisLabel} yAxisLabel={settings.yAxisLabel}
zAxisLabel={settings.zAxisLabel}
groupBy={settings.groupData}
stack={settings.stack}
/> />
</div> </div>
); );
...@@ -120,7 +149,15 @@ const Vis1DSettings = ({ settings, graphMetadata, updateSettings }: Visualizatio ...@@ -120,7 +149,15 @@ const Vis1DSettings = ({ settings, graphMetadata, updateSettings }: Visualizatio
const newAttributeOptions = Object.keys(graphMetadata.nodes.types[settings.selectedEntity].attributes); const newAttributeOptions = Object.keys(graphMetadata.nodes.types[settings.selectedEntity].attributes);
if (settings.xAxisLabel === '') { if (settings.xAxisLabel === '') {
updateSettings({ xAxisLabel: newAttributeOptions[0] }); updateSettings({ xAxisLabel: newAttributeOptions[0] });
// !TODO: instead of contain "datum" chekc type: if it is date
if (newAttributeOptions[0].includes('Datum')) {
updateSettings({ groupData: 'yearly' });
} else {
updateSettings({ groupData: undefined });
}
} }
newAttributeOptions.unshift(' ');
setAttributeOptions(newAttributeOptions); setAttributeOptions(newAttributeOptions);
} else { } else {
} }
...@@ -158,6 +195,9 @@ const Vis1DSettings = ({ settings, graphMetadata, updateSettings }: Visualizatio ...@@ -158,6 +195,9 @@ const Vis1DSettings = ({ settings, graphMetadata, updateSettings }: Visualizatio
options={mutablePlotTypes} options={mutablePlotTypes}
onChange={(value: string | number) => { onChange={(value: string | number) => {
updateSettings({ plotType: value as (typeof plotTypeOptions)[number] }); updateSettings({ plotType: value as (typeof plotTypeOptions)[number] });
if (value === 'bar' || value === 'histogram' || value === 'pie') {
updateSettings({ yAxisLabel: '' });
}
}} }}
/> />
</div> </div>
...@@ -168,7 +208,14 @@ const Vis1DSettings = ({ settings, graphMetadata, updateSettings }: Visualizatio ...@@ -168,7 +208,14 @@ const Vis1DSettings = ({ settings, graphMetadata, updateSettings }: Visualizatio
value={settings.xAxisLabel} value={settings.xAxisLabel}
options={attributeOptions} options={attributeOptions}
onChange={(value) => { onChange={(value) => {
updateSettings({ xAxisLabel: value as string }); const valueString = value as string;
updateSettings({ xAxisLabel: valueString });
if (!valueString.includes('Datum')) {
updateSettings({ groupData: undefined });
} else {
updateSettings({ groupData: 'monthly' });
}
}} }}
/> />
</div> </div>
...@@ -185,6 +232,37 @@ const Vis1DSettings = ({ settings, graphMetadata, updateSettings }: Visualizatio ...@@ -185,6 +232,37 @@ const Vis1DSettings = ({ settings, graphMetadata, updateSettings }: Visualizatio
/> />
</div> </div>
)} )}
{(settings.plotType === 'bar' || settings.plotType === 'scatter' || settings.plotType === 'histogram') && (
<div className="mb-2">
<Input
type="dropdown"
label="Color:"
value={settings.zAxisLabel}
options={attributeOptions}
onChange={(value) => {
updateSettings({ zAxisLabel: value as string });
}}
/>
</div>
)}
{settings.plotType === 'histogram' && (
<div className="mb-2">
<Input type="boolean" label="Normalize: " value={settings.stack} onChange={(val) => updateSettings({ stack: val })} />
</div>
)}
{settings.xAxisLabel?.includes('Datum') && (
<div className="mb-2">
<Input
type="dropdown"
label="Group Time:"
value={settings.groupData}
options={['', 'monthly', 'quarterly', 'yearly']}
onChange={(value) => {
updateSettings({ groupData: value as string });
}}
/>
</div>
)}
<div className="mb-2"> <div className="mb-2">
<Input type="boolean" label="Show axis" value={settings.showAxis} onChange={(val) => updateSettings({ showAxis: val })} /> <Input type="boolean" label="Show axis" value={settings.showAxis} onChange={(val) => updateSettings({ showAxis: val })} />
</div> </div>
......