Skip to content
This repository has been archived by the owner on Jun 10, 2024. It is now read-only.

Git 150 initial draft Tex render #175

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Git 150 initial draft Tex render #175

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a87effe
Git 150 initial draft Tex render
habiblawal1 May 18, 2023
385b776
Git 150 removed unnecessary comments
habiblawal1 May 18, 2023
9ca8a76
Git 150 added and centred customisable title
habiblawal1 May 19, 2023
6cc2d97
Git 150 Seperated out tex data from mock data
habiblawal1 May 19, 2023
8f04975
Git 150 Split the graph type selection into a seperate method
habiblawal1 Jun 2, 2023
617173c
Git 150 removed duplicate code
habiblawal1 Jun 6, 2023
fd67d8e
Git 150 Added option to change graph type on frontend
habiblawal1 Jun 7, 2023
cbe17df
Git 150 removed the heading at the top of the page
habiblawal1 Jun 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 34 additions & 11 deletions src/components/App/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,55 @@
import React from 'react';
import React, { useState } from 'react';

import {
HappiGraph,
HappiGraphActions
} from '../HappiGraph';

import { GraphType } from "../HappiGraph/happi-graph.helpers";

import './index.scss';
import '../HappiGraph/happi-graph.scss';

import { mockData } from '../../mockData';
import { Modal } from '@mantine/core';

const rawData = {
...mockData
};


export function App() {
const [selectedNodeData, setSelectedNodeData] = useState(undefined);
const [opened, setOpened] = useState(false);

return <>
<div className="container">
<HappiGraph rawData={{...rawData}}
algorithm={""}
debug={false}
printMode={false}
graphDirection={"VERTICAL"}
selectedNodeId={"term@68e36496-7167-4af7-abdd-a0cd36e24084:6662c0f2.e1b1ec6c.66k78i6du.uchsna1.rn2epa.rfn2fjqf7h4qvmt5lflm8"}
actions={<HappiGraphActions rawData={{...rawData}}/>}
onNodeClick={(d: any) => console.log(d)}
onGraphRender={() => { console.log('Graph rendered');}} />
<div style={{textAlign: 'center'}}>
<h1>TEx</h1>
</div>

<Modal
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

extract tex functionality in separate demo component so that we can differentiate and encapsulate the functionality

ideally the modal should be implemented in the egeria-ui-components where there will be a new happi-graph instance

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've changed the frontend to have a dropdown menu to choose the graph type, the only issue I'm struggling with a bit is to have the Happi Graph update with the new Graph Type state after you change it with the dropdown. If you run the code it should make sense. For example, whatever graph type you start with is ok, but then if you change the graph via the down from Inheritance to Lineage, the graph does not refresh to show the Lineage graph.

opened={opened}
onClose={() => setOpened(false)}
withCloseButton={false}
centered
size="50%"
>
{ selectedNodeData && JSON.stringify(selectedNodeData) }
</Modal>

<div style={{width: 1200, height: 800, margin: '0 auto'}}>
<HappiGraph rawData={{...rawData}}
algorithm={"VISJS"}
graphType={GraphType.TEX_INHERITANCE}
debug={false}
printMode={false}
graphDirection={"HORIZONTAL"}
selectedNodeId={""}
actions={<HappiGraphActions rawData={{...rawData}}/>}
onNodeClick={(d: any) => { setSelectedNodeData(d); setOpened(true); }}
onGraphRender={() => { console.log('Graph rendered'); }} />
</div>
</div>
</>;
}
}
Loading