Commit e6c7d903 authored by Laurent Wouters's avatar Laurent Wouters
Browse files

[feature] Implementing the side bar

parent 127c8bc12c72
......@@ -32,6 +32,7 @@ import {
} from "../data";
export interface CurrentTabDataSourcesProps {
displayBack: boolean;
data: ResourceData;
onClickBack: () => void;
}
......@@ -129,66 +130,66 @@ export class CurrentTabDataSources extends React.Component<
render() {
let allSources = getSourcesFor(this.props.data);
let renderedSources = Object.keys(allSources).map(
(url: string, index: number) => {
let series = allSources[url];
let totalLoaded = this.props.data.observations[url].totalLoaded;
let origin = this.props.data.observations[url].origin;
return (
<div key={"series-" + index} style={{ marginTop: "10px" }}>
<div className="row">
<span>{"\u25BA"}</span>
<span
className="badge badge-primary"
title="Total loaded triples from this URI"
style={{ marginRight: "5pt", marginLeft: "5pt" }}
>
{totalLoaded}
</span>
<a href={url}>{url}</a>
{origin ? this.renderOrigin(origin) : <span />}
</div>
{series.map((source: DocumentSource, index: number) => (
<div key={"source-" + index} className="row">
<div className="col-12">
<span>{"\u00A0\u00A0\u00A0\u00A0\u21B3"}</span>
{this.renderTriplesCount(source.loaded)}
<span>{source.name}</span>
{this.renderOrigin(source.origin)}
</div>
</div>
))}
</div>
);
}
);
return (
<div className="container-fluid">
<div className="row">
<div className="col-2">
<a
className="btn btn-outline-light"
onClick={this.props.onClickBack}
title="Back"
>
<span style={{ fontSize: "20pt", cursor: "pointer" }}>
<img width="24px" src="../icons/back.svg" />
</span>
</a>
{this.props.displayBack ? (
<div className="row">
<div className="col-2">
<a
className="btn btn-outline-light"
onClick={this.props.onClickBack}
title="Back"
>
<span style={{ fontSize: "20pt", cursor: "pointer" }}>
<img width="24px" src="../icons/back.svg" />
</span>
</a>
</div>
<div className="col-2" />
<div className="col-2" />
<div className="col-6" />
</div>
<div className="col-2" />
<div className="col-2" />
<div className="col-6" />
</div>
) : (
<div />
)}
<div className="row">
<div className="col-12">
<span style={{ fontSize: "17pt" }}>Data sources</span>
</div>
</div>
<hr />
{renderedSources}
{Object.keys(allSources).map((url: string, index: number) => {
let series = allSources[url];
let totalLoaded = this.props.data.observations[url].totalLoaded;
let origin = this.props.data.observations[url].origin;
return (
<div key={"series-" + index} style={{ marginTop: "10px" }}>
<div className="row">
<span>{"\u25BA"}</span>
<span
className="badge badge-primary"
title="Total loaded triples from this URI"
style={{ marginRight: "5pt", marginLeft: "5pt" }}
>
{totalLoaded}
</span>
<a href={url}>{url}</a>
{origin ? this.renderOrigin(origin) : <span />}
</div>
{series.map((source: DocumentSource, index: number) => (
<div key={"source-" + index} className="row">
<div className="col-12">
<span>{"\u00A0\u00A0\u00A0\u00A0\u21B3"}</span>
{this.renderTriplesCount(source.loaded)}
<span>{source.name}</span>
{this.renderOrigin(source.origin)}
</div>
</div>
))}
</div>
);
})}
</div>
);
}
......
......@@ -23,6 +23,7 @@ import { application } from "@logilab/libview";
import { ResourceData } from "../data";
export interface CurrentTabResourcesProps {
displayBack: boolean;
data: ResourceData;
onClickBack: () => void;
}
......@@ -38,22 +39,26 @@ export class CurrentTabResources extends React.Component<
render() {
return (
<div className="container-fluid">
<div className="row">
<div className="col-2">
<a
className="btn btn-outline-light"
onClick={this.props.onClickBack}
title="Back"
>
<span style={{ fontSize: "20pt", cursor: "pointer" }}>
<img width="24px" src="../icons/back.svg" />
</span>
</a>
{this.props.displayBack ? (
<div className="row">
<div className="col-2">
<a
className="btn btn-outline-light"
onClick={this.props.onClickBack}
title="Back"
>
<span style={{ fontSize: "20pt", cursor: "pointer" }}>
<img width="24px" src="../icons/back.svg" />
</span>
</a>
</div>
<div className="col-2" />
<div className="col-2" />
<div className="col-6" />
</div>
<div className="col-2" />
<div className="col-2" />
<div className="col-6" />
</div>
) : (
<div />
)}
<div className="row">
<div className="col-12">
<span style={{ fontSize: "17pt" }}>Supplementary resources</span>
......
......@@ -23,6 +23,7 @@ import { application, definition } from "@logilab/libview";
import { ResourceData } from "../data";
export interface CurrentTabViewsProps {
displayBack: boolean;
data: ResourceData;
registry: definition.ViewRegistry;
onClickBack: () => void;
......@@ -36,22 +37,26 @@ export class CurrentTabViews extends React.Component<CurrentTabViewsProps, {}> {
render() {
return (
<div className="container-fluid">
<div className="row">
<div className="col-2">
<a
className="btn btn-outline-light"
onClick={this.props.onClickBack}
title="Back"
>
<span style={{ fontSize: "20pt", cursor: "pointer" }}>
<img width="24px" src="../icons/back.svg" />
</span>
</a>
{this.props.displayBack ? (
<div className="row">
<div className="col-2">
<a
className="btn btn-outline-light"
onClick={this.props.onClickBack}
title="Back"
>
<span style={{ fontSize: "20pt", cursor: "pointer" }}>
<img width="24px" src="../icons/back.svg" />
</span>
</a>
</div>
<div className="col-2" />
<div className="col-2" />
<div className="col-6" />
</div>
<div className="col-2" />
<div className="col-2" />
<div className="col-6" />
</div>
) : (
<div />
)}
<div className="row">
<div className="col-12">
<span style={{ fontSize: "17pt" }}>Evaluated views</span>
......
......@@ -203,6 +203,7 @@ class Popup extends React.Component<{}, State> {
<CurrentTabViews
data={this.state.data}
registry={this.state.registry}
displayBack={true}
onClickBack={() => {
self.state.pane = "tab";
self.setState(self.state);
......@@ -213,6 +214,7 @@ class Popup extends React.Component<{}, State> {
return (
<CurrentTabDataSources
data={this.state.data}
displayBack={true}
onClickBack={() => {
self.state.pane = "tab";
self.setState(self.state);
......@@ -223,6 +225,7 @@ class Popup extends React.Component<{}, State> {
return (
<CurrentTabResources
data={this.state.data}
displayBack={true}
onClickBack={() => {
self.state.pane = "tab";
self.setState(self.state);
......
/*******************************************************************************
* Copyright 2003-2018 LOGILAB S.A. (Paris, FRANCE), all rights reserved.
* contact http://www.logilab.fr/ -- mailto:contact@logilab.fr
*
* This file is part of CubicWeb.
*
* CubicWeb is free software: you can redistribute it and/or modify it under the
* terms of the GNU Lesser General Public License as published by the Free
* Software Foundation, either version 2.1 of the License, or (at your option)
* any later version.
*
* CubicWeb is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
* details.
*
* You should have received a copy of the GNU Lesser General Public License along
* with CubicWeb. If not, see <http://www.gnu.org/licenses/>.
******************************************************************************/
import React = require("react");
import {
ResourceData,
getSourcesFor,
DocumentSource,
Origin,
ORIGIN_KIND_DIRECT,
ORIGIN_KIND_NEGOTIATED,
ORIGIN_KIND_LINKED_HTTP,
ORIGIN_KIND_LINKED_HTML,
ORIGIN_KIND_REDIRECTED
} from "../common/data";
export interface SideBarDataSourcesProps {
data: ResourceData;
}
export class SideBarDataSources extends React.Component<
SideBarDataSourcesProps,
{}
> {
constructor(props: SideBarDataSourcesProps) {
super(props);
}
renderOrigin(origin: Origin): React.ReactNode {
if (origin.kind == ORIGIN_KIND_DIRECT) {
return (
<span
title={"Direct request of " + origin.url}
style={{ color: "blue", cursor: "pointer", marginLeft: "5pt" }}
>
Why?
</span>
);
} else if (origin.kind == ORIGIN_KIND_REDIRECTED) {
return (
<span
title={"Redirected from from " + origin.url}
style={{ color: "blue", cursor: "pointer", marginLeft: "5pt" }}
>
Why?
</span>
);
} else if (origin.kind == ORIGIN_KIND_NEGOTIATED) {
return (
<span
title={"Negotiated from " + origin.url}
style={{ color: "blue", cursor: "pointer", marginLeft: "5pt" }}
>
Why?
</span>
);
} else if (origin.kind == ORIGIN_KIND_LINKED_HTTP) {
return (
<span
title={"Linked in HTTP headers from " + origin.url}
style={{ color: "blue", cursor: "pointer", marginLeft: "5pt" }}
>
Why?
</span>
);
} else if (origin.kind == ORIGIN_KIND_LINKED_HTML) {
return (
<span
title={"Linked in HTML headers from " + origin.url}
style={{ color: "blue", cursor: "pointer", marginLeft: "5pt" }}
>
Why?
</span>
);
}
}
renderTriplesCount(count: number): React.ReactNode {
if (count == -1) {
return (
<span
className="badge badge-danger"
title="Failed to load this source"
style={{ marginRight: "5pt", marginLeft: "5pt" }}
>
error
</span>
);
}
if (count == 0) {
return (
<span
className="badge badge-secondary"
title="Not loaded"
style={{ marginRight: "5pt", marginLeft: "5pt" }}
>
0
</span>
);
}
return (
<span
className="badge badge-secondary"
title="Total loaded triples from this source"
style={{ marginRight: "5pt", marginLeft: "5pt" }}
>
{count}
</span>
);
}
render() {
let allSources = getSourcesFor(this.props.data);
return (
<div className="container-fluid">
<div className="row">
<div className="col-12">
<span style={{ fontSize: "17pt" }}>
Sources of data for this tab
</span>
</div>
</div>
<hr />
{Object.keys(allSources).map((url: string, index: number) => {
let series = allSources[url];
let totalLoaded = this.props.data.observations[url].totalLoaded;
let origin = this.props.data.observations[url].origin;
return (
<div key={"series-" + index} style={{ marginTop: "10px" }}>
<div className="row">
<span>{"\u25BA"}</span>
<span
className="badge badge-primary"
title="Total loaded triples from this URI"
style={{ marginRight: "5pt", marginLeft: "5pt" }}
>
{totalLoaded}
</span>
<a href={url}>{url}</a>
{origin ? this.renderOrigin(origin) : <span />}
</div>
{series.map((source: DocumentSource, index: number) => (
<div key={"source-" + index} className="row">
<div className="col-12">
<span>{"\u00A0\u00A0\u00A0\u00A0\u21B3"}</span>
{this.renderTriplesCount(source.loaded)}
<span>{source.name}</span>
{this.renderOrigin(source.origin)}
</div>
</div>
))}
</div>
);
})}
</div>
);
}
}
......@@ -24,7 +24,9 @@ import { definition } from "@logilab/libview";
import { getViewRegistry, getCurrentResource } from "../common/messages";
import { ResourceData } from "../common/data";
import { ConfigLoading } from "../common/config/ConfigLoading";
import { SideBarDataSources } from "./SideBarDataSources";
import { CurrentTabDataSources } from "../common/config/CurrentTabDataSources";
import { CurrentTabViews } from "../common/config/CurrentTabViews";
import { CurrentTabResources } from "../common/config/CurrentTabRessources";
/**
* Gets the identifier of the currently active tab
......@@ -91,7 +93,26 @@ class Sidebar extends React.Component<{}, State> {
} else if (this.state.data == null || this.state.data == undefined) {
return <span>This tab is not using an active Linked Data browser.</span>;
} else {
return <SideBarDataSources data={this.state.data} />;
return (
<div>
<CurrentTabViews
data={this.state.data}
registry={this.state.registry}
displayBack={false}
onClickBack={() => {}}
/>
<CurrentTabDataSources
data={this.state.data}
displayBack={false}
onClickBack={() => {}}
/>
<CurrentTabResources
data={this.state.data}
displayBack={false}
onClickBack={() => {}}
/>
</div>
);
}
}
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment