Merge branch 'master' into Tania

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "homepage": "https://agentlab.ru/rdf-scheme-editor",
   "dependencies": {
-    "antd": "^3.12.3",
+    "antd": "^3.14.1",
     "i18next": "^15.0.2",
     "i18next-browser-languagedetector": "^3.0.0",
     "i18next-xhr-backend": "^2.0.0",

run-in-container.ps1

@@ -1 +1 @@
-docker run -p 3043:3000/tcp -p 3083:9009/tcp -it --rm --name rdf-scheme-editor -v ${PWD}:/usr/src/app -w /usr/src/app node:11 bash
+docker run -p 3043:3000/tcp -p 3083:9009/tcp -p 35729:35729/tcp --env CHOKIDAR_USEPOLLING=true -it --rm --name rdf-scheme-editor -v ${PWD}:/usr/src/app:rw -w /usr/src/app node:11 bash

src/AddRDF.stories.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import 'antd/dist/antd.css';
+import './index.css';
+
+import { Form, Input, Button, Checkbox,Select, Radio, Layout } from 'antd';
+
+
+  const { TextArea } = Input;
+
+  class AddRDFForm extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+        formLayout: 'horizontal',
+        }; } 
+
+        handleFormLayoutChange = (e) => {
+            this.setState({ formLayout: e.target.value });
+            }
+
+    render() {
+       const { formLayout } = this.state;
+            const formItemLayout = {
+            labelCol: { span: 4 },
+            wrapperCol: { span: 14 },
+            } ;
+
+      return (
+          <div>
+        <Form layout={formLayout}>
+            <Form.Item  id = "base" {...formItemLayout} label= "Base URI: ">
+
+                 <Layout>
+                    <Input readOnly style={{ width:  '50%'}} ></Input> 
+                    <Checkbox> use base URI as context identifier </Checkbox>
+                 </Layout>
+            </Form.Item>
+
+            <Form.Item id = "context" {...formItemLayout} label="Context:">
+                 <Input readOnly style={{ width:  '50%' }} ></Input> 
+            </Form.Item> 
+
+            <Form.Item id = "dataFormat" {...formItemLayout} label="Data format:" >
+                <Layout>
+                <Select defaultValue="(autodetect)" style={{ width: 120 }}>
+                    <Option value="(autodetect)">(autodetect)</Option>
+                    <Option value="N-Triples">N-Triples</Option>
+                    <Option value="RDF/XML">RDF/XML</Option>
+                    <Option value="Turtle">Turtle</Option>
+                </Select>
+                <Radio>Location of the RDF data you wish to upload</Radio> 
+                </Layout>
+            </Form.Item>  
+
+
+            <Form.Item id = "RDFdataUrl" {...formItemLayout} label="RDF Data URL:">
+                <Layout>
+                 <Input readOnly style={{ width:  '50%' }} ></Input>
+                 <Radio>Select the file containing the RDF data you wish to upload</Radio> 
+                 </Layout>
+            </Form.Item> 
+
+
+            <Form.Item id = "RDFdataFile" {...formItemLayout} label="RDF Data File:">
+                <Layout>
+                <Button style={{ width:  '30%' }} >Выберете файл</Button> 
+                <Radio>Enter the RDF data you wish to upload</Radio>
+                </Layout>
+            </Form.Item> 
+
+
+            <Form.Item id = "RDFcontent" {...formItemLayout} label="RDF Content:">
+                <Layout>
+                <TextArea  readOnly rows={4} style={{ width:  '50%' }} />
+                <Button style={{ width:  '30%' }}>Upload</Button>
+                </Layout>
+            </Form.Item>
+
+        </Form>
+        </div>
+      );
+    }
+  }
+
+storiesOf('Add RDF', module)
+.add('form', () => (
+    <AddRDFForm></AddRDFForm>
+    ));

src/Explore.stories.js

@@ -0,0 +1,104 @@
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import 'antd/dist/antd.css';
+import './index.css';
+import {
+  Form, Select, Input, Button, Table, Checkbox
+} from 'antd';
+
+const dataSource = [{
+}];
+
+const columns = [{
+  title: 'Subject',
+  dataIndex: 'subject',
+  key: 'subject',
+}, {
+  title: 'Predicate',
+  dataIndex: 'predicate',
+  key: 'predicate',
+}, {
+  title: 'Object',
+  dataIndex: 'object',
+  key: 'object',
+}, {
+  title: 'Context',
+  dataIndex: 'context',
+  key: 'context',
+}];
+
+class FormLayoutDemo extends React.Component {
+    constructor() {
+      super();
+      this.state = {
+        formLayout: 'horizontal',
+      };
+    }
+
+    render() {
+      const { formLayout } = this.state;
+      const formItemLayout = formLayout === 'horizontal' ? {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 14 },
+      } : null;
+      const selectItemLayout = formLayout === 'horizontal' ? {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 2, offset: 3 },
+      } : null;
+      const buttonItemLayout = formLayout === 'horizontal' ? {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 5, offset: 3 },
+      } : null;
+      const tailFormItemLayout = formLayout === 'horizontal' ? {
+        labelCol: { span: 7 },
+        wrapperCol: { span: 4, offset: 0 },
+      } : null;
+      return (
+        <div>
+          <Form layout={formLayout}>
+            <Form.Item
+              label="Resource: "
+              {...formItemLayout}
+            >
+              <Input placeholder="" />
+            </Form.Item>
+            <Form.Item
+              label="Results per page: "
+              {...selectItemLayout}
+            >
+              <Select defaultValue="1">
+                <Option value="1">All</Option>
+                <Option value="2">10</Option>
+                <Option value="3">50</Option>
+                <Option value="4">100</Option>
+                <Option value="5">200</Option>
+              </Select>
+            </Form.Item>
+
+            <Form.Item
+              label="Results offset: "
+              {...buttonItemLayout}
+            >
+              <Button type="secondary">Previous 0</Button>
+              <Button type="secondary">Next 0</Button>
+            </Form.Item>
+
+            <Form.Item
+              label="Show data types & language tags: "
+              {...tailFormItemLayout}
+            >
+              <Checkbox />
+            </Form.Item>
+          </Form> 
+          <Table dataSource={dataSource} columns={columns} />
+        </div>
+      );
+    }
+  }
+
+  storiesOf('Explore', module)
+    .add('Explore', () => ( 
+      <FormLayoutDemo />
+    ));
+
+

src/ExportRepository.stories.js

@@ -0,0 +1,141 @@
+
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import ReactDOM from 'react-dom';
+import 'antd/dist/antd.css';
+import './index.css';
+import {
+  Form, Input, Select, Button, Table
+} from 'antd';
+
+
+const InputGroup = Input.Group;
+const Option = Select.Option;
+
+class CompactDemo extends React.Component {
+  state = {
+    dataSource: [],
+  }
+
+  render() {
+    return (
+      <div>
+        <h1 align="left" margin-left="50px"> Export Repository </h1>
+      <table>
+        <td>
+            <b>
+              <Form.Item
+                  label="Download format: ">
+              </Form.Item>
+              </b> 
+        </td>
+        <td>
+              <InputGroup compact>
+                  <Select defaultValue="N-Triples">
+                    <Option value="N-Triples">N-Triples</Option>
+                    <Option value="RDF/XML">RDF/XML</Option>
+                    <Option value="Turtle">Turtle</Option>
+                    <Option value="N3">N3</Option>
+                    <Option value="TriG">TriG</Option>
+                    <Option value="TriX">TriX</Option>
+                  </Select>
+              </InputGroup>
+        </td>  
+        <td >
+              <Form.Item >
+                <Button type="submit">  Download</Button>
+              </Form.Item>
+        </td>
+      </table>
+
+      <table>
+        <td>
+            <b>
+              <Form.Item
+                  label="Results per page: ">
+              </Form.Item>
+              </b> 
+        </td>
+        <td>
+              <InputGroup compact>
+                  <Select defaultValue="All">
+                    <Option value="All">All</Option>
+                    <Option value="10">10</Option>
+                    <Option value="50">50</Option>
+                    <Option value="100">100</Option>
+                    <Option value="200G">200</Option>
+                  </Select>
+              </InputGroup>
+        </td>  
+        <td>
+              <Form.Item 
+                    label="The results shown maybe truncated">  
+              </Form.Item>
+        </td>
+      </table>
+      </div>
+      );
+    }
+  }
+
+ const columns = [
+   {
+      title: "Subject",
+      dataIndex: "subject",
+      key:"subject",
+      width: 150,
+   },
+   {
+      title: "Predicate",
+      dataIndex: "predicate",
+      key: "predicate",
+      width: 150,
+   },
+   {
+      title: "Object",
+      dataIndex: "object",
+      key: "object",
+      width: 700,
+   },
+   {
+      title: "Context",
+      dataIndex: "context",
+      key: "context",
+      width: 50,
+   }
+ ];
+
+ const data = [
+   {
+      key: "1",
+      subject: "oslc",
+      predicate: "rdf:type",
+      object: "owl:Ontology",
+      context: "oslc",
+   },
+   {
+      key: "2",
+      subject: "oslc",
+      predicate: "rdf:type",
+      object: "owl:label",
+      context: "oslc",
+    },
+    {
+      key: "3",
+      subject: "oslc",
+      predicate: "rdf:type",
+      object: "owl:descrision",
+      context: "oslc",
+    }
+ ];
+
+ storiesOf('Lab 2', module)
+ .add('Export Repository', () =>
+ <div>
+   <CompactDemo />
+   <Table columns={columns} dataSource={data} bordered size="small" />
+ </div>
+ );
+
+
+