Skip to content

Commit

Permalink
lint
Browse files Browse the repository at this point in the history
  • Loading branch information
@northdpole
northdpole committed Nov 5, 2023
1 parent bfd169e commit 614e82d
Show file tree
Hide file tree
Showing 4 changed files with 321 additions and 296 deletions.
202 changes: 109 additions & 93 deletions application/frontend/src/pages/Explorer/explorer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ import { SearchResults } from '../Search/components/SearchResults';
export const Explorer = () => {
const { apiUrl } = useEnvironment();
const [loading, setLoading] = useState<boolean>(false);
const [filter, setFilter] = useState("");
const [filter, setFilter] = useState('');
const [searchSummary, setSearchSummary] = useState(0);
const [data, setData] = useState<Document[]>()
const [rootCREs, setRootCREs] = useState<Document[]>()
const [filteredData, setFilteredData] = useState<Document[]>()
const [data, setData] = useState<Document[]>();
const [rootCREs, setRootCREs] = useState<Document[]>();
const [filteredData, setFilteredData] = useState<Document[]>();

useQuery<{ data: Document }, string>(
'root_cres',
Expand All @@ -39,59 +39,55 @@ export const Explorer = () => {
},
}
);
const docs = localStorage.getItem("documents")
const docs = localStorage.getItem('documents');
useEffect(() => {
if (docs != null) {
setData(JSON.parse(docs).sort((a, b) => (a.id + '').localeCompare(b.id + '')));
setFilteredData(data)
setFilteredData(data);
}
}, [docs])

const query = useQuery(
'everything',
() => {
if (docs == null) {
fetch(`${apiUrl}/everything`)
.then((res) => { return res.json() })
.then((resjson) => {
return resjson.data
}).then((data) => {
if (data) {
localStorage.setItem("documents", JSON.stringify(data));
setData(data)
}
}),
}, [docs]);

const query = useQuery('everything', () => {
if (docs == null) {
fetch(`${apiUrl}/everything`)
.then((res) => {
return res.json();
})
.then((resjson) => {
return resjson.data;
})
.then((data) => {
if (data) {
localStorage.setItem('documents', JSON.stringify(data));
setData(data);
}
}),
{
retry: false,
enabled: false,
onSettled: () => {
setLoading(false);
},
}
}

};
}
);

});

useEffect(() => {
window.scrollTo(0, 0);
setLoading(true);
query.refetch();
}, []);


if (!data?.length) {
const docs = localStorage.getItem("documents")
const docs = localStorage.getItem('documents');
if (docs) {
setData(JSON.parse(docs).sort((a, b) => (a.id + '').localeCompare(b.id + '')));
setFilteredData(data)
setFilteredData(data);
}
}


function processGroupedLinks(link) {
let title = ""
let title = '';
if (link.document.hyperlink) {
title = link.document.name;
if (link.sections.length > 0) {
Expand All @@ -101,95 +97,115 @@ export const Explorer = () => {
}
return (
<div id="grouped-link">
{link.document.hyperlink ?
{link.document.hyperlink ? (
<a target="_blank" href={link.document.hyperlink} title={title}>
{link.document.name}
{link.sections.length > 1 ? '(' + link.sections.length + ')' : ""}
</a> : ""}
{link.sections.length > 1 ? '(' + link.sections.length + ')' : ''}
</a>
) : (
''
)}
</div>
)
);
}

function processNode(item: Document) {
if (!item || !item.id) {
return (<></>)
return <></>;
}

const groupedLinks: LinkedDocument[] = [];
const groupedLinksMap = [];
item.links?.filter(link => link.ltype === 'Linked To').forEach(link => {
const doc = link.ltype + ' ' + link.document.doctype + ' ' + link.document.name;
if (!groupedLinksMap[doc]) {
groupedLinksMap[doc] = link
groupedLinksMap[doc].sections = []
groupedLinks.push(link);
}
if (link.document.section) {
groupedLinksMap[doc].sections.push(link.document.section);
}
});
let name
item.links
?.filter((link) => link.ltype === 'Linked To')
.forEach((link) => {
const doc = link.ltype + ' ' + link.document.doctype + ' ' + link.document.name;
if (!groupedLinksMap[doc]) {
groupedLinksMap[doc] = link;
groupedLinksMap[doc].sections = [];
groupedLinks.push(link);
}
if (link.document.section) {
groupedLinksMap[doc].sections.push(link.document.section);
}
});
let name;
if (filter.length && item.name.toLocaleLowerCase() === filter.toLocaleLowerCase()) {
name = <span className='bg-yellow'>{filter.charAt(0).toUpperCase() + filter.slice(1)}</span>
name = <span className="bg-yellow">{filter.charAt(0).toUpperCase() + filter.slice(1)}</span>;
}
return (
<div className="group" >
<div className="group">
<div className="group-1">
<div className='group-2'>
<a target="_blank" href={"https://opencre.org/cre/" + item?.id}>
<div className="group-2">
<a target="_blank" href={'https://opencre.org/cre/' + item?.id}>
<span id="group-span"> {item.id} : </span>
{name}
</a>
</div>
<div id="grouped-links-container">
{groupedLinks.map(link => { return processGroupedLinks(link) })}
</div>
<div /*style="font-size: 90%"*/>
{
item.links?.map(child =>
processNode(child.document)
)
}
{groupedLinks.map((link) => {
return processGroupedLinks(link);
})}
</div>
<div /*style="font-size: 90%"*/>{item.links?.map((child) => processNode(child.document))}</div>
</div>
</div>
)
);
}
function update(event) {
setFilter(event.target.value)
setFilteredData(data?.filter(item => item.name.toLowerCase().includes(filter)))
setFilter(event.target.value);
setFilteredData(data?.filter((item) => item.name.toLowerCase().includes(filter)));
}

return (<>
{/* <LoadingAndErrorIndicator loading={loading} error={query.error} /> */}
<div id="explorer-content">
<h1>
<img src="assets/logo.png" />
<b>Open CRE Explorer</b>
</h1>
<p>A visual explorer of Open Common Requirement Enumerations (CREs).
Data source: <a target="_blank" href="https://opencre.org/">opencre.org</a>.</p>

<div id="explorer-wrapper">
<div>
<input id="filter" type="text" placeholder="search..."
onKeyUp={update} />
<div id="search-summary"></div>
</div>
<div id="graphs">graphs (3D):
<a target="_blank" href="visuals/force-graph-3d-all.html">CRE dependencies</a> -
<a target="_blank" href="visuals/force-graph-3d-contains.html">hierarchy only</a> -
<a target="_blank" href="visuals/force-graph-3d-related.html">related only</a> |
<a target="_blank" href="visuals/force-graph-3d-linked.html">links to external standards</a> |
<a target="_blank" href="visuals/circles.html">zoomable circles</a>
return (
<>
{/* <LoadingAndErrorIndicator loading={loading} error={query.error} /> */}
<div id="explorer-content">
<h1>
<img src="assets/logo.png" />
<b>Open CRE Explorer</b>
</h1>
<p>
A visual explorer of Open Common Requirement Enumerations (CREs). Data source:{' '}
<a target="_blank" href="https://opencre.org/">
opencre.org
</a>
.
</p>

<div id="explorer-wrapper">
<div>
<input id="filter" type="text" placeholder="search..." onKeyUp={update} />
<div id="search-summary"></div>
</div>
<div id="graphs">
graphs (3D):
<a target="_blank" href="visuals/force-graph-3d-all.html">
CRE dependencies
</a>{' '}
-
<a target="_blank" href="visuals/force-graph-3d-contains.html">
hierarchy only
</a>{' '}
-
<a target="_blank" href="visuals/force-graph-3d-related.html">
related only
</a>{' '}
|
<a target="_blank" href="visuals/force-graph-3d-linked.html">
links to external standards
</a>{' '}
|
<a target="_blank" href="visuals/circles.html">
zoomable circles
</a>
</div>
</div>
<div id="content"></div>
{filteredData?.map((item) => {
return processNode(item);
})}
</div>
<div id="content"></div>
{filteredData?.map(item => {
return processNode(item)
})}
</div>

</>
</>
);
};
Loading

0 comments on commit 614e82d

Please sign in to comment.