Skip to content

Commit e4c1530

Browse files
marek-kozlovsky-atamarek-kozlovsky-ata
committed
Search overview layout change.
1 parent f0a0bd3 commit e4c1530

File tree

4 files changed

+180
-124
lines changed

4 files changed

+180
-124
lines changed

‎public/disableYasgui.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11

2-
#yasgui div.controlbar {
2+
.yasgui-disable-styles div.controlbar {
33
display: none;
44
}
55

6-
#yasgui div.tabsList {
6+
.yasgui-disable-styles div.tabsList {
77
display: none;
88
}
99

10-
#yasgui div.yasqe_buttons {
10+
.yasgui-disable-styles div.yasqe_buttons {
1111
display: none;
1212
}
1313

14-
#yasgui div.yasr {
14+
.yasgui-disable-styles div.yasr {
1515
display: none;
1616
}

‎src/components/search/SearchOptionsPicker.js‎

Lines changed: 90 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ import Row from "react-bootstrap/Row";
44
import Button from "react-bootstrap/Button";
55
import ListGroup from "react-bootstrap/ListGroup";
66
import Col from "react-bootstrap/Col";
7-
import Form from "react-bootstrap/Form";
8-
import {ExtensibleAutocompleteFields} from "./ExtensibleAutocompleteFields";
97

108

119
export class SearchOptionsPicker extends React.Component {
@@ -22,17 +20,15 @@ export class SearchOptionsPicker extends React.Component {
2220
this.updateQueryEditor()
2321
}
2422

25-
updateQueryEditor(queryId, parameter1, parameter2) {
23+
updateQueryEditor(queryId, editorNumber) {
2624
API.get("/rest/search/updateQuery", {
2725
params: {
2826
projectName: this.props.projectName,
2927
queryId: queryId,
30-
parameter1: parameter1 || "",
31-
parameter2: parameter2 || ""
3228
}
3329
}).then((response) => {
3430
this.setState({query: response.data})
35-
this.props.changeQuery(response.data);
31+
this.props.changeQuery(response.data, editorNumber);
3632
}).catch((error) => {
3733
console.log(error)
3834
this.setState({showError: true, showSuccess: false}); // todo: improve handling individual messages
@@ -45,7 +41,7 @@ export class SearchOptionsPicker extends React.Component {
4541
params: {
4642
projectName: this.props.projectName,
4743
depth: 0,
48-
questionOriginPath: "http://vfn.cz/ontologies/fss-form/primary-treatment--d-h--size-of-the-tumor--latero-lateral-q-qo"
44+
questionOriginPath: "http://vfn.cz/ontologies/fss-form/light-treatment--d-h--size-of-the-tumor--latero-lateral-q-qo"
4945
}
5046
}).then((response) => {
5147
// this.setState({query: response.data})
@@ -58,108 +54,113 @@ export class SearchOptionsPicker extends React.Component {
5854
);
5955
}
6056

57+
createEntityUseCaseLine(name, useCaseId) {
58+
return <div><Row>
59+
<Col>
60+
<h5>{name}</h5>
61+
<Button variant="light"
62+
onClick={() => this.updateQueryEditor(useCaseId, 1)}>
63+
1
64+
</Button>
65+
{' '}
66+
<Button variant="light"
67+
onClick={() => this.updateQueryEditor(useCaseId, 2)}>
68+
2
69+
</Button>
70+
{' '}
71+
<Button variant="light"
72+
onClick={() => this.updateQueryEditor(useCaseId, 3)}>
73+
3
74+
</Button>
75+
</Col>
76+
</Row>
77+
</div>
78+
}
79+
80+
createCustomUseCaseLine(name, descriptionDiv, useCaseId) {
81+
return <ListGroup.Item>
82+
<Row>
83+
<Col xs={10}>
84+
<h5>{name}</h5>
85+
{descriptionDiv}
86+
</Col>
87+
<Col>
88+
<Button variant="light"
89+
onClick={() => this.updateQueryEditor(useCaseId, 2)}>
90+
2
91+
</Button>
92+
{' '}
93+
<Button variant="light"
94+
onClick={() => this.updateQueryEditor(useCaseId, 3)}>
95+
3
96+
</Button>
97+
</Col>
98+
</Row>
99+
<br/>
100+
</ListGroup.Item>;
101+
}
102+
61103
render() {
62104

63105
return <ListGroup>
64-
{/*<ListGroup.Item>*/}
65-
{/* <Row>*/}
66-
{/* <Col xs={10}>*/}
67-
{/* <h5>Autocomplete</h5>*/}
68-
{/* <IntelligentQuestionSelector projectName={this.props.projectName}/>*/}
69-
{/* </Col>*/}
70-
{/* </Row>*/}
71-
{/*</ListGroup.Item>*/}
72-
73106
<ListGroup.Item>
74107
<Row>
75-
<Col xs={10}>
76-
<h5>Use Case 1</h5>
77-
<span>For <b>any FormTemplateVersion</b>, what question have <b>always the same answer</b>?</span>
78-
<br/>
79-
108+
<Col xs={4} className={"text-left"}>
109+
{this.createEntityUseCaseLine("Record", "record")}
80110
</Col>
81-
<Col>
82-
<Button variant="primary" onClick={() => this.updateQueryEditor("usecase1")}>
83-
Load SPARQL
84-
</Button>
111+
<Col xs={4} className={"text-center"}>
112+
{this.createEntityUseCaseLine("RecordSnapshot", "record-snapshot")}
85113
</Col>
86-
</Row>
87-
</ListGroup.Item>
88-
<ListGroup.Item>
89-
<Row>
90-
<Col xs={10}>
91-
<h5>Use Case 2</h5>
92-
<span>For <b>specific FormTemplateVersion</b>, what question have <b>always the same answer</b>?</span>
93-
<br/>
94-
<br/>
95-
<Form.Group controlId="useCase2Parameter1FG">
96-
<Form.Control type="text" placeholder="versionKey"
97-
onChange={(event) => {
98-
this.setState({usecase1Parameter1: event.target.value});
99-
this.getAutocompleteValues()
100-
}
101-
}/>
102-
</Form.Group>
103-
</Col>
104-
<Col>
105-
<Button variant="primary"
106-
onClick={() => this.updateQueryEditor("usecase2", this.state.usecase1Parameter1)}>
107-
Load SPARQL
108-
</Button>
114+
<Col xs={4} className={"text-right"}>
115+
{this.createEntityUseCaseLine("RecordVersion", "record-version")}
109116
</Col>
110117
</Row>
111-
</ListGroup.Item>
112-
<ListGroup.Item>
118+
<br/>
113119
<Row>
114-
<Col xs={10}>
115-
<h5>Use Case 3</h5>
116-
<span>Find all records where <b>latest answer</b> conforms <b>certain condition</b>.</span>
117-
<br/>
118-
<br/>
120+
<Col xs={4} className={"text-left"}>
121+
{this.createEntityUseCaseLine("FormTemplate", "form-template")}
119122
</Col>
120-
<Col>
121-
<Button variant="primary"
122-
onClick={() => this.updateQueryEditor("usecase3")}>
123-
Load SPARQL
124-
</Button>
123+
<Col xs={4} className={"text-center"}>
124+
{this.createEntityUseCaseLine("FormTemplateVersion", "form-template-version")}
125125
</Col>
126126
</Row>
127-
</ListGroup.Item>
128-
<ListGroup.Item>
129-
<Row>
130-
<Col xs={10}>
131-
<h5>Use Case 4</h5>
132-
<span>Find all records where <b>2 latest answers</b> conform <b>certain condition</b>.</span>
133-
<br/>
134-
<br/>
135-
</Col>
136-
<Col>
137-
<Button variant="primary"
138-
onClick={() => this.updateQueryEditor("usecase4")}>
139-
Load SPARQL
140-
</Button>
141-
</Col>
142-
</Row>
143-
</ListGroup.Item>
144-
<ListGroup.Item>
127+
<br/>
145128
<Row>
146-
<Col xs={10}>
147-
<h5>Use Case with autocomplete</h5>
148-
<span>Find all records where <b>2 latest answers</b> conform <b>certain condition</b>.</span>
149-
<br/>
150-
<br/>
151-
<ExtensibleAutocompleteFields projectName={this.props.projectName}/>
129+
<Col xs={4} className={"text-left"}>
130+
{this.createEntityUseCaseLine("QuestionTemplate", "question-template")}
152131
</Col>
153-
<Col>
154-
<Button variant="primary"
155-
onClick={() => this.updateQueryEditor("usecase4")}>
156-
Load SPARQL
157-
</Button>
132+
<Col xs={4} className={"text-center"}>
133+
{this.createEntityUseCaseLine("QuestionTemplateSnapshot", "question-template-snapshot")}
158134
</Col>
159135
</Row>
136+
<br/>
160137
</ListGroup.Item>
161138

162139

140+
{this.createCustomUseCaseLine(
141+
"UC1: any FormTemplateVersion - same answer everytime?",
142+
<span>For <b>any FormTemplateVersion</b>, what questions have <b>always the same answer</b>?</span>,
143+
"usecase1"
144+
)}
145+
146+
{this.createCustomUseCaseLine(
147+
"UC2: specific FormTemplateVersion - same answer everytime?",
148+
<span>For <b>specific FormTemplateVersion</b>, what questions have <b>always the same answer</b>?</span>,
149+
"usecase2"
150+
)}
151+
152+
{this.createCustomUseCaseLine(
153+
"UC3: 1 answer 1 condition",
154+
<span>Find records with <b>latest answers</b> conforming <b>1 condition</b>.</span>,
155+
"usecase3"
156+
)}
157+
158+
{this.createCustomUseCaseLine(
159+
"UC4: 2 answers 2 condition",
160+
<span>Find records with <b>2 latest answers</b> conforming <b>2 condition</b>.</span>,
161+
"usecase4"
162+
)}
163163
</ListGroup>
164164
}
165+
165166
}

0 commit comments

Comments
 (0)