Существует два основных варианта использования визуализации данных в графических базах данных, таких как Neo4j:
Визуализация может помочь администраторам и разработчикам баз данных понять схему своей базы данных Neo4j, а также просматривать содержимое и проверять свои запросы с помощью таких инструментов, как Cypher и Neo4j Desktop .

Но не только разработчики и разработчики серверной части могут извлечь выгоду из визуализации: многие приложения для конечных пользователей, которые позволяют пользователям работать с данными, хранящимися в базах данных графов, также получают большую выгоду от более визуального интерфейса для своих данных:

Создание удобной, хорошо работающей и информативной визуализации для конечных пользователей - дело тривиальное, и простые визуализации, которые разработчики используют для своих внутренних инструментов, часто просто не годятся.

В этом посте я собираюсь представить инструмент, который может помочь вам с этой задачей. С его помощью вы можете создавать высококачественные визуализации графиков и диаграмм для приложений конечного пользователя, которые идеально передают информацию, содержащуюся в вашей базе данных, конечному пользователю.

Имея чуть более 60 строк кода, мы создадим интерактивное веб-приложение, которое отображает уникальную диаграмму ваших данных. Вот как это будет выглядеть при использовании с базой данных примеров фильмов:

Профессиональное построение диаграмм: yFiles для HTML

Инструмент, который я использую для этого, - yFiles for HTML - универсальная библиотека программирования визуализации графов для веб-платформы, которая может помочь вам реализовать те последние десять или двадцать процентов ваших требований, которые вы не будете выполнять. возможность реализации с другими инструментами: yFiles - это целое семейство библиотек программирования визуализации графов, которые были коммерчески доступны для различных целевых платформ более 15 лет и используются компаниями и корпорации по всему миру из самых разных отраслей.

Вариант для веб-платформы не предназначен исключительно для использования в качестве интерфейса визуализации для Neo4j, однако в этом посте я покажу вам, насколько хорошо yFiles для HTML и Neo4j работают вместе.

Одностраничное веб-приложение, которое мы собираемся создать, использует yFiles для HTML и драйвер JavaScript Bolt Neo4j для запроса вашей собственной базы данных Neo4j. Результаты запроса будут отображаться в графической визуализации с уникальным автоматическим макетом, настраиваемыми визуализациями элементов и взаимодействиями с пользователем.

Чтобы следовать инструкциям в этом посте, вы можете загрузить бесплатную ознакомительную версию программного пакета yFiles для HTML, и у вас должна быть запущена база данных Neo4j, которую вы можете использовать для тестирования.

В этом посте мы собираемся лишь вкратце коснуться поверхности yFiles API и обширного набора возможностей и функций, которые предлагает yFiles, поэтому, если вы хотите узнать больше, обязательно посмотрите различные демонстрации и возможности. онлайн-ресурсы »или просмотрите этот плейлист YouTube по этой теме .

Кроме того, как существующий пользователь Neo4j, обязательно ознакомьтесь с бесплатным онлайн-приложением Neo4j Explorer, которое поможет вам визуализировать вашу базу данных без какого-либо программирования!

Приступим к кодированию!

Мы начинаем с создания минимального набора yFiles на основе исходников ES6 на базе WebPack для HTML-приложения, которое не зависит от стороннего программного обеспечения во время выполнения.
Мы также можем использовать такие UI-фреймворки, как Angular, React, VueJS или что-то еще. похоже, но для простоты мы будем использовать здесь обычный HTML.

После распаковки библиотеки yFiles для HTML в какую-либо директорию на нашем компьютере мы можем использовать npm или yarn и yeoman, чтобы сформировать приложение. Более подробные инструкции доступны в отдельном скринкасте. На консоли делаем:

> npm install -g generator-yfiles-app
> yo yfiles-app

И йомен заставит вас задать несколько вопросов. Вот ответы, которые я выбрал для этой задачи:

? Application name Neo_post
? Path of yFiles for HTML package C:\Path\to\your\yFilesForHTMLPackage
? Path of license file (e.g. 'path/to/license.js') C:\Path\to\your\yFilesForHTMLPackage\demos\resources\license.js
? Which kind of yFiles modules do you want to use? ES6 Modules
? Which modules do you want to use? yfiles/algorithms, yfiles/layout-hierarchic, yfiles/view-component, yfiles/view-editor, yfiles/view-layout-bridge
? Which language variant do you want to use? ES6
? Which webpack version would you like to use? 4.x
? What else do you want? WebStorm/PHP-Storm/Intellij IDEA Ultimate Project files
? Which package manager would you like to use? yarn

Затем yeoman сотворит чудеса, и через несколько секунд он создаст блестящее новое веб-приложение, которое использует yFiles для HTML и Webpack 4 с ES6 / EcmaScript2015 для загрузки, компоновки и рендеринга тривиального графика, который вы можете редактировать в интерактивном режиме с помощью мышь, клавиатуру и сенсорные устройства.

И вот как будет выглядеть приложение, когда мы будем использовать npm start или yarn start для компиляции, обслуживания и запуска кода в нашем браузере:

Вы согласитесь со мной, что это пока еще не выдающаяся визуализация, и что мы действительно хотим сделать, так это проверить содержимое нашей базы данных Neo4j!

Представляем Сайфера и Болта

Чтобы связать Neo4j с yFiles для HTML, мы сначала добавляем в наше приложение драйвер JavaScript Bolt.

На консоли делаем:

> yarn add neo4j-driver

Затем в коде мы просто загружаем драйвер Neo4j, добавляя следующий оператор импорта вверху файла:

import neo4j from 'neo4j-driver/lib/browser/neo4j-web'

Убедитесь, что у вас есть учетные данные и IP-адрес для базы данных Neo4j, которую вы хотели бы изучить, потому что со следующей строкой кода мы уже можем подключиться к базе данных:

const neo4jDriver = neo4j.driver("bolt://1.2.3.4", 
  neo4j.auth.basic("theusername", "theS3cr3t"))

(Конечно, вам нужно будет настроить IP-адрес, имя пользователя и пароль.)

Теперь мы собираемся сначала упростить скаффолд-код, который для нас создал йомен. Снимите его так, чтобы он выглядел так:

Это приведет к скучному пустому графу, потому что мы запросили только узлы в базе данных, но пока ничего не делаем с результатами. На этом этапе важно понимать, что основная библиотека yFiles для HTML не знает, как интерпретировать результаты запроса, возвращаемого коннектором Neo4j Bolt. Однако существуют вспомогательные классы, которые помогут нам импортировать любые структурированные данные, к которым у нас есть доступ в нашей среде JavaScript. Данные могут быть получены из файла, из сети, через REST, WebSockets или созданы динамически на клиенте. Конечно, это работает и с данными Neo4j: все, что нам нужно, это некоторое понимание того, как структурированы данные ответа Neo4j.

Для простого запроса, приведенного выше, результирующий объект JavaScript выглядит так:

{
  "records": [{
    "keys": ["node"],
    "length": 1,
    "_fields": [{
        "identity": {
          "low": 0,
          "high": 0
        },
        "labels": ["Movie"],
        "properties": {
          "title": "The Matrix",
          "tagline": "Welcome to the Real World",
          "released": {
            "low": 1999,
            "high": 0
          }
        }
      }
    ],
    "_fieldLookup": {
      "node": 0
    }
  }

Мы можем использовать следующий Bolt JavaScript API, чтобы получить массив всех запрошенных узлов:

const nodes = nodeResult.records.map(record => record.get("node"))

Теперь, когда у нас есть узлы, мы можем использовать вспомогательный класс GraphBuilder из yFiles, чтобы вывести график на экран:

graphBuilder.nodesSource = nodes
graphBuilder.buildGraph()

Это было просто! Но результат по-прежнему оставляет желать лучшего с визуальной и интерактивной точки зрения:

Давайте улучшим это: мы назначаем более приятный стиль для визуализации узла и простое сопоставление меток: если у узла есть свойство с именем "title" или "name", мы используем его для метки. И вместо того, чтобы оставлять все узлы в местах по умолчанию, мы применяем алгоритм автоматической компоновки, чтобы удобно расположить узлы на экране.

График теперь выглядит лучше, но мы по-прежнему не видим никаких взаимосвязей.

Давайте изменим это с помощью другого запроса к базе данных! Мы запрашиваем все ребра между узлами, которые мы запросили перед использованием этого кода:

Вот как выглядит результат в форме JSON:

{
  "identity": {
    "low": 7,
    "high": 0
  },
  "start": {
    "low": 8,
    "high": 0
  },
  "end": {
    "low": 0,
    "high": 0
  },
  "type": "ACTED_IN",
  "properties": {
    "roles": ["Emil"]
  }
}

Как видите, отношения ссылаются на их исходный и целевой узлы через свойство identity, которое было прикреплено к узлам. Мы можем использовать функцию toString, предоставленную Bolt, чтобы получить представление идентификаторов, которые могут быть легко использованы GraphBuilder. Мы говорим вспомогательному классу использовать эту информацию для определения конечных точек соединений и построения графика в памяти для отображения:

Собираем все вместе, вот что у нас теперь есть в нашей функции загрузки:

А вот так визуализация выглядит в браузере:

Нам еще нужно немного поработать над интерактивностью, макетом и визуализацией. Сейчас мы ничем не лучше большинства других инструментов. Допустим, мы хотим показать некоторые детали во всплывающей подсказке, чтобы пользователь мог выбирать элементы и реагировать на щелчки на графике. Для этого мы добавляем в наш компонент так называемый GraphViewerInputMode:

const inputMode = new GraphViewerInputMode()
graphComponent.inputMode = inputMode

Это позволяет пользователю выбирать элементы, удобно перемещаться по ним и использовать клавиатуру для навигации по графику. Теперь мы также можем легко указать подробные подсказки для наших элементов: для этого мы используем информацию, предоставленную нам базой данных, и перечисляем все свойства в очень простом списке HTML:

И чтобы лучше понять структуру графика, мы добавляем возможность пользователю центрировать макет вокруг заданного элемента, который он дважды щелкает:

Вот и все. Снова проверьте окончательный результат:

Думаю, вы видите, что с очень небольшими настройками теперь вы можете настраивать запросы Cypher для ваших конкретных баз данных и создавать богатые интерактивные визуализации ваших данных!

Вот и все, что касается этого очень краткого введения о том, как использовать yFiles для HTML для визуализации ваших баз данных Neo4j. Вы найдете закомментированную версию исходников для этой демонстрации на GitHub.

Что дальше?

Конечно, есть гораздо больше функций, которые еще не были рассмотрены в этом посте. Взгляните на множество онлайн-демонстраций yFiles для HTML, чтобы понять, что еще можно делать с библиотеками yFiles и Neo4j!

Я оставляю это упражнение для вас, чтобы улучшить визуализацию, чтобы она выглядела так 😉:

И чтобы дать вам больше идей о возможностях, с помощью некоторого кода, yFiles для HTML и Neo4j вы можете:

  • используйте WebGL, Canvas и SVG вместе с шаблонами и привязкой данных для создания более богатых визуализаций с анимацией и только нужной информацией, необходимой вашим пользователям.
  • подключаться к сторонним источникам данных и службам, чтобы улучшить визуализацию с помощью живых данных и позволить пользователю запускать действия в удаленных системах при взаимодействии с визуализацией.
  • встроить визуализацию графа как компонент white label в свои собственные приложения, возможно, используя Angular, ReactJS, VueJS или любой другой фреймворк, который вы предпочитаете
  • интерактивно исследуйте базу данных и постепенно добавляйте новые элементы в визуализацию с помощью дополнительных автоматических макетов
  • использовать разные, более привлекательные стили макета и предоставлять более сложные ограничения макета для выделения определенных структур, компонентов или элементов в вашем наборе данных в визуализации.
  • используйте методы вложения, фильтрации и детализации, чтобы пользователи могли в интерактивном режиме исследовать ваши данные.
  • позволяют пользователям редактировать ваши графики с помощью мыши, клавиатуры, пера и сенсорных устройств.

Так чего же ты ждешь? Иди и визуализируй свою базу данных Neo4j как профессионал! Удачного построения диаграмм!