diff --git a/node/src/ts/visualizer/index.tsx b/node/src/ts/visualizer/index.tsx index ece245ee..55110c16 100644 --- a/node/src/ts/visualizer/index.tsx +++ b/node/src/ts/visualizer/index.tsx @@ -106,6 +106,18 @@ const filterContent = ( } } +const isEmptyContent = (content: AppState) => { + if ( + content.structure.length === 0 && + content.properties.length === 0 && + Object.keys(content.classes).length === 0 && + Object.keys(content.prefixes).length === 0 + ) { + return true + } + return false +} + export type Content = { inheritance_structure: Structure[] classes: Classes @@ -132,8 +144,8 @@ const App: React.FC = (props) => { const dispatch = useDispatch() const query = useQuery() + const [rawState, setRawState] = useState(initialAppState) const [state, setState] = useState(initialAppState) - const [stateToDraw, setStateToDraw] = useState(initialAppState) // utility const getReferenceURL = useCallback( @@ -151,6 +163,17 @@ const App: React.FC = (props) => { [state.prefixes] ) useEffect(() => { + const preferredContent = { + structure: content.inheritance_structure, + classes: content.classes, + properties: content.properties, + prefixes: content.prefixes, + } + + if (isEmptyContent(preferredContent) || !isEmptyContent(rawState)) { + return + } + // set locale/messages const localeShortString = getLocaleShortString() setLocale(localeShortString) @@ -163,14 +186,6 @@ const App: React.FC = (props) => { ApiClient.checkHealthy().then((res) => { if (res.data.ok) { - // set content - const preferredContent = { - structure: content.inheritance_structure, - classes: content.classes, - properties: content.properties, - prefixes: content.prefixes, - } - // set blacklist Blacklist.configre({ classes: '/static/blacklists/bcl.txt', @@ -184,17 +199,20 @@ const App: React.FC = (props) => { preferredContent, existsInBlacklist ) + setRawState(filteredContent) setState(filteredContent) - setStateToDraw(filteredContent) } }) - }, [content, footer]) // eslint-disable-line react-hooks/exhaustive-deps + }, [content, rawState]) // eslint-disable-line react-hooks/exhaustive-deps - const restrictNoChildClass = true const { lowerLimitOfClassEntities } = useSelector(selector) useEffect(() => { + if (isEmptyContent(rawState)) { + return + } + if (lowerLimitOfClassEntities === 0) { - setStateToDraw(state) + setState(rawState) return } @@ -205,38 +223,39 @@ const App: React.FC = (props) => { return _.flatMap(elem.children, flattenChildren).concat([elem]) } - const urisToFilter = state.structure + const urisToHide = rawState.structure .flatMap((elem) => flattenChildren(elem)) - .filter((elem) => !restrictNoChildClass || !elem.children) + .filter((elem) => { + const classDetail = rawState.classes[elem.uri] + return ( + elem.children === undefined && + (classDetail === undefined || + classDetail.entities === undefined || + classDetail.entities < lowerLimitOfClassEntities) + ) + }) .map((elem) => elem.uri) - const urisToHide = urisToFilter.filter((uri) => { - const { entities } = state.classes[uri] - return entities === undefined || entities < lowerLimitOfClassEntities - }) const shouldHideElement = (uri: string) => urisToHide.includes(uri) - const filteredState = filterContent(_.cloneDeep(state), shouldHideElement) - setStateToDraw(filteredState) - }, [state, lowerLimitOfClassEntities]) + const filteredState = filterContent( + _.cloneDeep(rawState), + shouldHideElement + ) + setState(filteredState) + }, [rawState, lowerLimitOfClassEntities]) return ( <>
- - - + + +
- - + +
- +