SPGraphviz: визуализация графов в Sharepoint

Я рад сообщить, что несколько дней назад (10.10.2010) проект SPGraphviz был опубликован для всеобщего доступа на Codeplex: http://spgraphviz.codeplex.com. С SPGraphviz вы можете создавать графы, схемы, графические представления и т.п. и затем отображать их в Sharepoint без какого-либо программирования и сторонних приложений. Прикладное применение SPGraphviz достаточно широко: вы можете создавать графическое представление организационных структур, иерархий портала либо их частей, истории версий документов, реверс инжиниринг, и т.п. – способы применения ограничиваются лишь вашей фантазией. Вот пример графов, которые вы можете создавать (взято из галереи Graphviz):

SPGraphviz реализован на основе open source библиотеки для рендеринга графов Graphviz, созданного специалистами компании AT&T достаточно давно. Эта библиотека написана на C. SPGraphviz использует обертку для вызовов native кода, реализованную Дэвидом Брауном (слегка модифицированную). Графы определяются в обычных текстовых файлах с использованием языка описания графов DOT. Это DSL который позволяет описывать структуру графа (вершины, ребра, надписи, и т.д.), а также его представление (цвета, размеры, ориентацию, и т.д.). DOT – достаточно богатый язык, но для простых сценариев вам не нужно углубляться в его изучение. Например, взгляните на следующий граф:

В этом примере показано, как SPGraphviz может быть использован для отображения структуры портала. Для примера я рассмотрел портал, в котором есть корневой сайт, подсайт (либо сайт коллекция) для департаментов, в которой в свою очередь есть 3 сайта для каждого департамента: IT, HR, Sales. Также имеется подсайт для новостей и отдельная сайт коллекция для персональных сайтов (аналог MySites). Этот граф создан с использованием следующего DOT-описания:

digraph example {
        size="6,6";
        node [color=lightblue2, style=filled];
        "Start page" -> "Departments";
        "Start page" -> "News";
        "Start page" -> "Personal sites";
        "Departments" -> "IT";
        "Departments" -> "HR";
        "Departments" -> "Sales";
        "Personal sites" -> "Alexey Sadomov";
        "Personal sites" -> "...";
}

Мы определили граф (digraph example {}), а также описали вершины и связи между ними:

"Start page" -> "Departments";

Также мы включили некоторые настройки представления: размер изображения (size=”6,6”), цвет и стиль заливки вершин ([color=lightblue2, style=filled]). Я думаю, что этот пример достаточно простой для того, чтобы понять как устроен язык DOT и начать создавать свои собственные графы.

Как же использовать SPGraphviz в Sharepoint? Проект содержит специальную веб часть SPGraphvizWebPart, которая умеет отображать графы на основе их текстовых определений на языке DOT. Прежде всего необходимо установить SPGraphviz на вашем сервере так, как описано на странице http://spgraphviz.codeplex.com/documentation:

1. Загрузите и установите библиотеку Graphviz на веб сервере. Во время установки убедитесь, что выбрали “Everyone” на первом шаге мастера установки;
2. Скачайте последний релиз SPGraphviz. В настоящее время релиз содержит один wsp файл;
3. Установите SPGraphvizWebPart.wsp на сервер:

stsadm -o addsolution -filename SPGraphvizWebPart.wsp
stsadm -o deploysolution -local -allowgac -allcontenturls -name SPGraphvizWebPart.wsp
stsadm -o activatefeature -name SPGraphvizWebPart -url http://example.com

Обращаю ваше внимание, что для того, чтобы использовать SPGraphviz необходимо установить Graphviz на ваш веб сервер (либо на все WFE сервера в случае, если у вас настроена ферма). После того, как вы установили указанные компоненты, вы можете создавать определения ваших графов с использованием языка DOT, а затем использовать эти определения для отображения с помощью SPGraphvizWebPart. Для нашего примера возьмем описание графа, представленное выше.

Для того чтобы отобразить граф в Sharepoint, нужно загрузить файл с его описанием в какую-либо библиотеку документов в вашей сайт коллекции. После этого нужно добавить веб часть SPGraphvizWebPart на страницу (веб часть должна быть расположена в группе Graphviz). Последнее что вам необходимо сделать – это в редакторе свойств веб части указать урл файла с описанием графа в свойстве “Dot file URL” (оно находится в категории Custom settings). При этом обращаю ваше внимание на то, что имеется ограничение на то, какой хост вы можете указать в этом свойстве. По умолчанию вы можете указать только тот же хост, что используется для сайт коллекции, в которую установлена веб часть SPGraphvizWebPart (это сделано из-за соображений безопасности). Однако вы можете явно указать, каким хостам вы доверяете, чтобы загружать DOT файл с них – для более подробной информации см. http://spgraphviz.codeplex.com/documentation. После этого, веб часть отобразит графическое представление графа:

Я описал пример создания и отображения графа без программирования. Но SPGraphviz также открывает очень богатые возможности для разработчиков. Как я говорил выше, описание графа – это обычный текстовый файл. Это значит, что разработчики могут написать код, который будет автоматически создавать описание графа на языке DOT, используя какие-либо данные, и затем настроить SPGraphvizWebPart для отображения сгенерированного определения. В следующем примере показан код программы, с помощью которой можно визуализировать иерархию портала:

class Program
{
    static void Main(string[] args)
    {
        if (args.Length != 1)
        {
            Console.WriteLine("Usage: exe <site_collection_url>");
            return;
        }

        Console.WriteLine("digraph sites {");
        Console.WriteLine("size=\"6,6\";");
        Console.WriteLine("node [color=lightblue2, style=filled];");

        using (var site = new SPSite(args[0]))
        {
            using (var web = site.OpenWeb())
            {
                foreach (SPWeb subWeb in web.Webs)
                {
                    iterateSubWebs(subWeb, web.Title);
                }
            }
        }
        Console.WriteLine("}");
    }

    private static void iterateSubWebs(SPWeb web, string parentNode)
    {
        Console.WriteLine("\"{0}\" -> \"{1}\";", parentNode, web.Title);

        foreach (SPWeb subWeb in web.Webs)
        {
            iterateSubWebs(subWeb, web.Title);
        }
    }
}

Этот пример достаточно простой – код итеративно пробегает по всем сайтам и добавляет вершины, соответствующие сайтам, в DOT описание графа:

GraphBuilder.exe http://example.com > graph.txt

Вот пример визуализации структуры сайта, созданного с помощью стандартного шаблона Collaboration Portal:

Естественно вы можете выбрать, какой цвет и форму использовать для каждого сайта. Можете группировать сайты на схеме, указывать атрибуты шрифта и многое другое. Для примеров отсылаю вас на сайт библиотеки Graphviz.

Как видите, с помощью SPGraphviz можно реализовывать множество интересных идей. Я надеюсь, что с помощью этого проекта, ваши сайты в Sharepoint будут более привлекательными и сделают ваших клиентов более счастливыми. Оставайтесь в курсе и делитесь идеями, как можно использовать SPGraphviz в реальных сценариях. Как в другом open source проекте для Sharepoint, в котором я принимаю непосредственное участие в качестве координатора и разработчика Camlex.NET, я всегда открыт для вашего фидбека и новых идей, а также надеюсь что взаимодействие с пользователями станет главным источником улучшения SPGraphviz.