Custom formatter for IGraph

customFormatter.js

PROPERTY_WHITELIST = [ // decides whether or not consecutive items will be added
    'graph',
    'nodes',
    'edges',
    'labels',
    'tag',
    'text'
]

anonymous = ($class) => $class.isAnonymous || $class.namespace.startsWith('yfiles._R');
collection = ($class) => $class.implementedInterfacesList && $class.implementedInterfacesList.some((interface) => interface.namespace === 'yfiles.collections')
yFilesClass = (object) => typeof object.getClass === 'function';

window.devtoolsFormatters = [
    {
        header (object) {
            if (!yFilesClass(object)) return;
            let $class = object.getClass();
            // TODO: Properly display anonymous description
            return ['span', {}, (anonymous($class)) ? $class.implementedInterfacesList[0].fullName : $class.fullName];
        },
        hasBody (object) {
            if (!yFilesClass(object)) return;
            let $class = object.getClass();
            return $class.getProperties().some((property) => PROPERTY_WHITELIST.includes(property.name)) || collection($class);
        },
        body (object) {
            if (!yFilesClass(object)) return;
            let $class = object.getClass();
            if (collection($class)) {
                // TODO: Think about LARGE collections. Can we use the iterator protocol here?
                return ['object', {'object': object.toArray()}]
            } else {
                return ['object', {'object': $class
                .getProperties()
                .filter((property) => PROPERTY_WHITELIST.includes(property.name))
                .reduce((acc, property) => {
                    if (object[property.name] !== null) {
                        acc[property.name] = object[property.name]
                    }
                    return acc
                }, {})
                }]
            }
        }
    }
]