Содержание

 Федеральное государственное автономное образовательное учреждениевысшего образованияКАЗАНСКИЙ (ПРИВОЛЖСКИЙ) ФЕДЕРАЛЬНЫЙ УНИВЕРСИТЕТВЫСШАЯ ШКОЛА ИНФОРМАЦИОННЫХ ТЕХНОЛОГИЙ ИИНФОРМАЦИОННЫХ СИСТЕМСпециальность: 09.03.03 – Прикладная информатикаВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ РАБОТАРазработка веб-приложения для моделирования количественных соотношений "структура-свойство"Работа завершена:?08? июня 2017г. Студент группы 11-303______________ А.В. ЗаляевРабота допущена к защите:Научный руководительм.н.с. ?НИЛ Хемоинформатика и молекулярное моделирование? Химического института им. А.М. Бутлерова КФУ?__?__________20__г. _______________ И.C.Алимова Директор Высшей школы ИТИС?__?_________ 20__ г._______________ А.Ф.ХасьяновКазань – 2017Содержание TOC \h \u \z ВВЕДЕНИЕ…………………………………………………………………………. PAGEREF _59ig7chhprp6 \h 3ГЛАВА 1. РАЗРАБОТКА ВЕБ-ПРИЛОЖЕНИЯ………………………………... PAGEREF _j9op68brjpco \h 41.1 Typescript……………………………………………………………………... PAGEREF _3p3pgv6ade6m \h 41.2 AMD…………………………………………………………………………... PAGEREF _ud7heuh3yg6b \h 51.3 Визуализация данных………………………………………………………... PAGEREF _v5l87hnookzv \h 6ГЛАВА 2. ИНТЕГРАЦИЯ С ГРММ…………………………………………….... PAGEREF _hkoh9ddbr2qx \h 7ГЛАВА 3. СПЕКТРОСКОПИЯ ЯДЕРНОГО МАГНИТНОГО РЕЗОНАНСА (NMR)........................................................................................................................... PAGEREF _gakd7sc3zn1u \h 8ГЛАВА 4. ИК СПЕКТРЫ ОСНОВНЫХ КЛАССОВ ОРГАНИЧЕСКИХ СОЕДИНЕНИЙ………………………………………………………………….... PAGEREF _bhc2aqcy36rg \h 11ЗАКЛЮЧЕНИЕ………………………………………………………………….... PAGEREF _legvzmcyrmns \h 13СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ…………………………... PAGEREF _oykjcyfd447c \h 14ПРИЛОЖЕНИЕ…………………………………………....……………………...16ВВЕДЕНИЕВ процессе работы лаборатории накапливается огромное количество различных данных, полученных экспериментальным путём, в результате моделирования молекул, либо же основанных только на теоретических вычислениях. Вся полученная информация должна быть правильным образом визуализирована, а также иметь возможность её корректирования, для дальнейшей проверки гипотез в сфере молекулярного взаимодействия.В связи с этим возникает проблема покупки дорогостоящего программного обеспечения для каждого вида данных и под каждую вычислительную машину лаборатории. А также дальнейший сбор и обработка полученных результатов в едином месте.В рамках работы над данной дипломной работой была поставлена цель реализовать облачный программный продукт, позволяющий агрегировать разные визуализацию и редактирование данных из разных источников. Критерием сдачи дипломной работы является выполнение следующий задач:Разработать приложение для отображения данных различных представлений в виде графиков, матриц, 3д моделей и т.д.Внедрить возможность работы с данными, полученными в результате работы графического редактора моделирования молекул.Внедрить возможность работы со спектроскопией ядерно магнитного резонанса, а также классификацию вершин в автоматическом режиме.Внедрить работу с инфракрасными спектрами основных классов органических соединений: определение структурных фрагментов молекулы по прямым и косвенным признакам (прим. волновые числа, типы колебаний и др.)ГЛАВА 1. РАЗРАБОТКА ВЕБ-ПРИЛОЖЕНИЯ1.1 TypescriptЯзык JavaScript[1] является единственным языком программирования для клиенской части веб-приложения, выполняемой в браузере. Однако процент поддержки последнего стандарта ecma-262[2] среди различных версий браузеров является крайне небольшим[3] для того чтобы можно было использовать нововведения языка в разработке программного продукта. Что плохо сказывается на времени разработки.Другой проблемой использования JavaScript в разработке является его слабая типизацияTypescript[4] - надмножество над языком javascript позволяет вести разработку программного продукта следуя последним стандартам ecma, собрав готовое решение . Основными преимуществами typescript перед конкурентами (flow, coffeescript) можно выделить:Любая валидная javascript-программа является валидной typescript-программой. Это позволяет использовать typescript на любом этапе разработки, а также импортировать сторонние модулиСтатическая типизация позволяет выявлять ошибки использования интерфейсов на этапе разработки, не допуская их до стадии тестирования или выкладки программного продукта в стадию использования потребителем.Большое сообщество вокруг продукта и хорошая документированностьБоле быстрая разработка, с возможностью создания более качественного программного обеспечения являются основными факторами выбора typescript в качестве основного инструмента разработки.1.2 AMDМодульность — принцип, согласно которому программное средство разделяется на отдельные именованные сущности, называемые модулями. Модульность часто является средством упрощения задачи проектирования программного продукта и распределения процесса разработки между группами разработчиков. При разбиении программного обеспечения на модули для каждого модуля указывается реализуемая им функциональность, а также связи с другими модулями.В языке javascript существует подход, который позволяет создавать модули таким образом, что они и их зависимости могут быть загружены асинхронно. Асинхронная загрузка модулей позволяет улучшить скорость загрузки веб страницы в целом, так как модули загружаются одновременно с остальным контентом сайта. Такой подход называется Asynchronous module definition (AMD).Рисунок 1 - принцип загрузки модулей в AMDВ качестве основы для построения AMD архитектуры разрабатываемого продукта будет использована библиотека require.js[5] т.к. это практически монополистическое решение из продуктов с открытым исходным кодом и возможностью работать с библиотеками, которые построены не в AMD стиле.1.3 Визуализация данныхСледующим этапом разработки приложения была реализация визуализатора данных, для отображения зависимостей между реакциями и структурами в виде графиков, с возможностью их обработки и редактирования пользователем.За основу, для решения этой задачи, была взята библиотека для работы с WebGL в браузере - plotly.js[6]. В ходе работы функционал данной библиотеки был расширен, чтобы предоставить возможность взаимодействия с отрисованными данными, а также изменение их несколькими пользователями в режиме online666751409700рисунок 2 - визуализация полученных данных с возможностью редактированияГЛАВА 2. ИНТЕГРАЦИЯ С ГРММПервым источником данных стал разработанный в лаборатории графический редактор для моделирования молекул, в основе которого лежит библиотека с открытым исходным кодом marvin.js[12]. Задачей данного этапа была получения данных из редактора, которые мы должны привести в необходимую для нас структуру. Также было необходимо предоставить возможность дополнения данных из редактора данными, полученными в результате лабораторных исследований.7057595250Рисунок 3 - Графический редактор моделирования молекулГЛАВА 3. СПЕКТРОСКОПИЯ ЯДЕРНОГО МАГНИТНОГО РЕЗОНАНСА (NMR)Последующим этапом разработки приложения стала реализация функционала автоматической классификации данных на спектроскопии ядерно магнитного резонанса[7][8], для частичного выявления информации о молекулярном строении химических веществ — определение константы скорости химических реакций, величину энергетических барьеров внутримолекулярного вращения.Рисунок 4 - спектроскопия ядерно магнитного резонанса.Перед тем как начать работать со спектроскопией необходимо избавиться от фоновых шумов, которые занимают большую часть диаграммы и не несут в себе полезной информации.Для решения данной задачи были реализованы методы сглаживания сигнала, применяемые в теории вычислительных сетей:Фильтр скользящего среднего[9] - усреднение значения по последним n - элементам. Данный метод имеет оценку сложности O(n) и хороший показатель фильтрации. Однако имеет сильно запоздалое смещение при росте или падении общего значения в диаграмме.Рисунок 5 - пример работы скользящего среднего.Фильтр Калмана[10] - имеет возможность задавать информацию о характере системы и связи переменных для лучшего сглаживания в конкретном примере. В нашем случае это задаётся через среднее значение в диаграмме и статистическое среднеквадратичное отклонение совокупности всех значений.Рисунок 6 - пример работы фильтра Калмана.После сглаживания диаграммы на ней находятся области экстремумов для выявления скачков на исходной диаграмме и последующем их анализе и классификации на основе соответствия их химических сдвигов, относительно друг друга, заранее заданным диапазонам, и размерам отклонения вершин.ГЛАВА 4. ИК СПЕКТРЫ ОСНОВНЫХ КЛАССОВ ОРГАНИЧЕСКИХ СОЕДИНЕНИЙПоследним типом данных, обрабатываемых в рамках данной дипломной работы, является инфракрасные спектры основных классов органических соединений[11].На данном этапе на вход мы получаем три структуры данных:Диаграмма колебания связей.Модель молекулы, описанная в виде матрицы смежности с весами ребер.Табличные данные о структурных фрагментах, диапазонах волн и типах колебаний.-115161847725Рисунок 7 - пример диаграммы колебания связей-1151611962150Рисунок 8 - пример представления табличных данных для ИК спектровЗадачей данного этапа являлось нахождение на диаграмме колибаний точек максимума и сопоставление их со структурными фрагментами молекулы по диапазонам волновых чисел.ЗАКЛЮЧЕНИЕВ ходе работы было разработано облачное приложение для визуализации и редактирования данных. Итоговое решение позволяет сотрудникам лаборатории работать с программным продуктом как в стенах университета, так и с помощью удаленной вычислительной машины, сохранив результат работы на централизованном сервере. Реализована работа с:Графическим редактором моделирования молекулСпектроскопией ядерно магнитного резонансаИнфракрасными спектрами основных классов органических соединенийДанный перечень источников данных является не конечным т.к. имеется возможность масштабирования на различные источники данных за счет построения прослойки интерфейсов взаимодействия и агрегации.СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ1. Axel Rauschmayer Speaking JavaScript/ Axel Rauschmayer. — O'Reilly Media, 2014. — 440 с. 2. Стандарт ecma-262 / ECMAScript? 2016 Language Specification. Статистика поддержки последних версий стандарта ecma различными браузерами. Typescript language. RequireJS is a JavaScript file and module loader. The open source JavaScript graphing library that powers Plotly. Ядерно магнитный резонанс. Ядерно магнитный резонанс. Фильтр скользящего среднего(%D1%84%D0%B8%D0%BB%D1%8C%D1%82%D1%80)10. Фильтр Калмана. ИК спектры основных классов органических соединений - Тарасевич Б.Н., МГУ имени М.В.Ломоносова, химический факультет, кафедра органической химии12. Marvin JS is ChemAxon’s chemical editorПРИЛОЖЕНИЕСтруктура файловeditPanel/EditPanel.tsmath/adder.tsaverenge.tsextremum.tskalman.tsstdev.tsstdevp.tsplotly/events.d.tslayout.tsplotly.d.tstrace.tsutils/utils.tsmain.tstsconfig.jsontslint.jsonmain.tsimport Plotly = require(";);import DataGen = require("test/dataGen");import layout1 = require("plotly/layout");import trace1 = require("plotly/trace");import EditPanel = require("editPanel/EditPanel");let dg = new DataGen();let generatedData = null;dg.getPlotlyData("scatter", 50).then((data) => {let myTrace = Object.assign({}, data, trace1);myTrace.x = myTrace.x.sort((a, b) => (a > b ? 1 : -1));myTrace.tooltip = myTrace.tooltip.map((t, i) => {return t + " - " + i});generatedData = myTrace;Plotly.plot('plotly', {data: [myTrace],layout: layout1});document.getElementById("plotly").on("plotly_click", (data: IEventData) => {edit(data.points[0]);});});function getPoint(pointNumber: number) {return {x: generatedData.x[pointNumber],y: generatedData.y[pointNumber],z: generatedData.z[pointNumber],tooltip: generatedData.tooltip[pointNumber]}}function updatePoint(id: number, point){for (let field in point) {generatedData[field][id] = point[field];}}function edit(clickPoint: IPlotyPoint) {let id = clickPoint.pointNumber;let point = getPoint(clickPoint.pointNumber);panel.show(point).then((newPoint) => {updatePoint(id, newPoint);Plotly.redraw("plotly");}, (err) => {console.error(err);});}let panel = new EditPanel($("#info")[0]);tsconfig.json{ "compilerOptions": { "module": "amd", "target": "es5", "sourceMap": false }, "exclude": [ "node_modules" ]}EditPanel.tsfunction createInput(title: string, value: string | number) {return `<div class="input-group"><span class="label">${title}</span><input type="text" class="form-control" value="${value}" data-field="${title}"></div>`}function createPanel(){return `<div class="close">close[x]</div><div class="content">тут вот должно быть редактирование по клику</div><div class="success btn btn-success">ok</div><div class="cancel btn btn-warning">cancel</div>`}class EditPanel {private _$container;private _$content;private _$successBtn;private _$cancelBtn;private _reject: Function;private _resolve: Function;constructor(node: HTMLElement) {this._$container = $(node);this._$container.html(createPanel());this._$content = this._$container.find(".content");this._$successBtn = this._$container.find(".success");this._$cancelBtn = this._$container.find(".close, .cancel");this._$successBtn.on("click", this._onSuccess.bind(this));this._$cancelBtn.on("click", this._onCancel.bind(this));}show(point): Promise<any> {if (typeof this._reject === "function"){this._reject("canceled edit");}return new Promise((resolve, reject) => {this._$container.addClass("isShow");this._reject = reject;this._resolve = resolve;let result = "";for (let field in point) {result += createInput(field, point[field]);}this._$content.html(result);});}hide() {this._$container.removeClass("isShow");this._$content.html("");}private _onSuccess(){if (typeof this._resolve !== "function"){return;}let newPoint = {};this._$content.find("input").each((i, input) => {let $input = $(input);let field = $input.attr("Data-field");newPoint[field] = $input.val();});this.hide();this._reject = null;this._resolve(newPoint);this._resolve = null;}private _onCancel(){if (typeof this._reject !== "function"){return;}this.hide();this._reject("canceled edit");this._reject = null;}}export = EditPanel;adder.ts// Сумматорexport = (prev: number, current: number): number => (current + prev);averenge.tsfunction average (list: number[]): number {return list.reduce((prev, current) => (current + prev), 0) / list.length;}export = average;extremum.tstype extremum = {value: number;id: number;type: extremumType;}type extremumType = "min" | "max";type isExtremum = (prev: number, current: number, next: number) => boolean;let isMin = (prev, current, next) => {return (current < prev) && (current < next);};let isMax = (prev, current, next) => {return (current > prev) && (current > next);};let each = (list: number[], f: isExtremum, type: extremumType) => {let result = [];for (let i = 1; i < list.length - 1; i++){if (f(list[i-1], list[i], list[i+1])) {result.push({id: i,value: list[i],type})}}return result;};export = {max(list: number[]): extremum[] {return each(list, isMax, "max");},min(list: number[]): extremum[] {return each(list, isMin, "min");},extremum(list: number[]): extremum[] {return [].concat(each(list, isMax, "max"),each(list, isMin, "min"));}}kalman.tsclass Kalman {constructor(meanDeviation: number = 0.25, reactionSpeed: number = 0.05) {let current = 0.0;let prev = 0.0;let hz = 0.0;let G = 0.0;let P = 1.0;return (val: number): number => {hz = P + reactionSpeed;G = hz / (hz + meanDeviation);P = (1 - G) * hz;prev = current;return current = G * (val - prev) + prev;}}}export = Kalman;stdev.tsimport average = require("math/average");import adder = require("math/adder");function stdev (list: number[]): number {let xMean = average(list);let sum = list.map((x: number) => Math.pow(x - xMean, 2)).reduce(adder, 0);return Math.sqrt(sum / list.length);}export = stdev;stdevp.tsimport average = require("math/average");import adder = require("math/adder");function stdevp (list: number[]): number {let xMean = average(list);let sum = list.map((x: number) => Math.pow(x - xMean, 2)).reduce(adder, 0);return Math.sqrt(sum / (list.length - 1));}export = stdevp;events.d.tstype events = 'plotly_click' | 'plotly_hover' | "plotly_unhover" | "plotly_selected ";type eventHandler = (data: IEventData) => void;interface IPlotyPoint {curveNumber: number;data: {}fullData: {}pointNumber: number;x: number;y: number;xaxis: Axis;yaxis: Axis;}interface IEventData {event: MouseEvent;points: Array<IPlotyPoint>}plotly.d.tsinterface Data { // server Data to plotlyx: Array<number | string>;y: Array<number | string>;z?: Array<number | string>;}type ChartType = "scatter" | "bar" | "box" | "heatmap" | "histogram" | "histogram2d" | "area" | "pie" | "contour" |"histogram2dcontour" | "scatter3d";// the chart type;interface Trace extends Data {mode: "lines" | "markers" | "text" | "none" ; // + Any combination -> "lines+markers" | "lines+markers+text" ...line?: {color?: string;width?: number;};marker?: {color?: string;line?: {color?: string;width?: number;}size?: number;};name: string;type: ChartTypeuid: string;opacity?: number;}type Color = string; // 'rgb(number, number, number)',type Anchor = "auto" | "left" | "center" | "right";type font = {color?: Color,family?: string,size?: number}type Margin = {autoexpand?: boolean; // the left, bottom, right, top Marginr?: number;t?: number;b?: number;l?: number;pad?: number;}type Axis = {color?: Color;title?: string;titlefont?: font;type?: "-" | "linear" | "log" | "date" | "category";autorange?: boolean | "reversed";rangemode?: "normal" | "tozero" | "nonnegative";range?: [number, number];fixedrange?: boolean; // If true, then zoom is disabled.tickmode?: "auto" | "linear" | "array";nticks?: number;tick0?: number;dtick?: number;tickvals?: Array<any>; // Only has an effect if `tickmode` is set to "array".tickcolor?: Color;tickfont?: font;ticklen?: number;ticks?: "outside" | "inside" | "";mirror?: boolean | "ticks" | "all" | "allticks";tickwidth?: number;showticklabels?: boolean;tickangle?: number;tickprefix?: string;ticksuffix?: string;showtickprefix?: "all" | "first" | "last" | "none";showticksuffix?: "all" | "first" | "last" | "none";showexponent?: "all" | "first" | "last" | "none";exponentformat?: "none" | "e" | "E" | "power" | "SI" | "B";tickformat?: string; // customize the formathoverformat?: string;linecolor?: Color;linewidth?: number;gridcolor?: Color;gridwidth?: number;showgrid?: boolean; // the Axis grid linesshowline?: boolean;zeroline?: boolean;zerolinecolor?: Color;zerolinewidth?: number;separatethousands?: boolean;side?: "top" | "bottom" | "left" | "right";}type Legend = {bgcolor?: Color;bordercolor?: Color;borderwidth?: number;font?: font;orientation?: "v" | "h";x?: number; // between or equal to -2 and 3xanchor?: Anchor;y?: number; // between or equal to -2 and 3yanchor?: Anchor;z?: number;}type Annotations = {}type Calendar = "gregorian" | "chinese" | "coptic" | "discworld" | "ethiopian" | "hebrew" | "islamic" | "julian" |"mayan" | "nanakshahi" | "nepali" | "persian" | "jalali" | "taiwan" | "thai" | "ummalqura"type Layout = {autosize?: boolean;bargap?: number;bargroupgap?: number;barmode?: 'stack';boxgap?: number;boxgroupgap?: number;boxmode?: 'overlay';dragmode?: 'zoom';font?: font;height?: number;hovermode?: "x" | "y" | "z" | "text" | "name" | string;legend?: Legend;margin?: Margin;paper_bgcolor?: Color;plot_bgcolor?: Color;showlegend?: boolean;title?: string;titlefont?: font;width?: number;xaxis?: Axis;yaxis?: Axis;zaxis?: Axis;}type Sliders = {}type PlotlyConfig = {data: Data;layout: Layout;}type ChartData = {type: ChartType;data: Array<Point | Point3d>;linkToData?: string;mode?: "lines" | "markers" | "text" | "none" ; // + Any combination -> "lines+markers" | "lines+markers+text" ...}type PlotlyData = { // server Data to plotlyx: Array<number | string>;y: Array<number | string>;z?: Array<number | string>;tooltip?: Array<string>;}interface Point {x: number;y: number;tooltip?: string;}interface Point3d extends Point {z: number;}trace.tslet trace: Trace = {line: {color: 'rgb(31, 119, 180)',width: 2},marker: {color: 'rgb(31, 119, 180)',line: {color: 'rgb(217, 217, 217)',width: 0.5},size: 8},// mode: 'lines',type: 'scatter',};export = trace; ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download