Commit 76a17680 authored by Laurent Wouters's avatar Laurent Wouters
Browse files

[fix] Refactoring the popup UI

parent 1b73b37753e4
......@@ -30,7 +30,9 @@ import {
fetchObservableAt,
ObservableContent,
observeContent,
getAcceptRdf
getAcceptRdf,
ORIGIN_KIND_DIRECT,
ORIGIN_KIND_LINKED_HTML
} from "../common/data";
import { Message, activateNegotiated } from "../common/messages";
/// <reference path="./fallback.d.ts"/>
......@@ -191,8 +193,12 @@ function onHeadersReceived(
linkHeader: getHeader(details.responseHeaders, "Link"),
url: details.url
};
let obs = observeContent(observable);
let obs = observeContent(observable, {
kind: ORIGIN_KIND_DIRECT,
url: details.url
});
let observation = resolveObservationsForTab(allObservations, details.tabId);
observation.origin = obs.origin;
observation.url = obs.url;
observation.primaryTopic = obs.primaryTopic;
observation.sources = obs.sources;
......@@ -258,7 +264,10 @@ chrome.runtime.onMessage.addListener(
observation.primaryTopic = detectTopicOnlinks(request.payload);
}
observation.sources = observation.sources.concat(
detectDataOnLinks(request.payload)
detectDataOnLinks(request.payload, {
kind: ORIGIN_KIND_LINKED_HTML,
url: observation.url
})
);
onObservedTabUpdated(sender.tab.id);
} else if (request.requestType == "GetTabId") {
......
......@@ -32,7 +32,8 @@ import {
observeContent,
ResourceUserCommand,
DocumentSource,
DocumentObservations
DocumentObservations,
ORIGIN_KIND_DIRECT
} from "../common/data";
import {
getResourceContent,
......@@ -229,7 +230,12 @@ class LDBrowserImpl implements LDBrowser {
self.cacheResources[uri] = data;
fetchObservableAt(uri)
.then((observable: ObservableContent) => {
onObservations(observeContent(observable));
onObservations(
observeContent(observable, {
kind: ORIGIN_KIND_DIRECT,
url: uri
})
);
})
.catch((reason: any) => {
console.log(reason);
......
......@@ -19,7 +19,16 @@
******************************************************************************/
import React = require("react");
import { ResourceData, getSourcesFor, DocumentSource } from "../data";
import {
ResourceData,
getSourcesFor,
DocumentSource,
Origin,
ORIGIN_KIND_DIRECT,
ORIGIN_KIND_NEGOTIATED,
ORIGIN_KIND_LINKED_HTTP,
ORIGIN_KIND_LINKED_HTML
} from "../data";
export interface CurrentTabDataSourcesProps {
data: ResourceData;
......@@ -34,6 +43,46 @@ export class CurrentTabDataSources extends React.Component<
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_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 (
......@@ -74,6 +123,7 @@ export class CurrentTabDataSources extends React.Component<
(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" }}>
......@@ -87,6 +137,7 @@ export class CurrentTabDataSources extends React.Component<
{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">
......@@ -94,6 +145,7 @@ export class CurrentTabDataSources extends React.Component<
<span>{"\u00A0\u00A0\u00A0\u00A0\u21B3"}</span>
{this.renderTriplesCount(source.loaded)}
<span>{source.name}</span>
{this.renderOrigin(source.origin)}
</div>
</div>
))}
......
......@@ -158,11 +158,15 @@ export function detectTopicOnlinks(links: Link[]): string {
/**
* Detects linked data in HTTP headers
* @param links The links in the header
* @param origin The origin for the links
*/
export function detectDataOnLinks(links: Link[]): DocumentSourceLinked[] {
export function detectDataOnLinks(
links: Link[],
origin: Origin
): DocumentSourceLinked[] {
return links
.filter((link: Link) => refersToData(link))
.map((link: Link) => new DocumentSourceLinked(link));
.map((link: Link) => new DocumentSourceLinked(link, origin));
}
/**
......@@ -319,10 +323,45 @@ export function getAcceptRdf(includeHTML: boolean): string {
);
}
/**
* Describes the origin of a document or source
*/
export interface Origin {
/**
* The kind of origin
*/
kind: string;
/**
* The associated URI
*/
url: string;
}
/**
* The document or source is linked from the HTTP headers
*/
export const ORIGIN_KIND_LINKED_HTTP: string = "httpLink";
/**
* The document or source is linked from HTML content
*/
export const ORIGIN_KIND_LINKED_HTML: string = "htmlLink";
/**
* The document or source has been obtained through negotiation
*/
export const ORIGIN_KIND_NEGOTIATED: string = "negotiated";
/**
* The document or source is the direct response from the server
*/
export const ORIGIN_KIND_DIRECT: string = "direct";
/**
* A source for a document
*/
export interface DocumentSource {
/**
* The origin of this source
*/
origin: Origin;
/**
* A descriptor of the type of source
*/
......@@ -354,6 +393,7 @@ export interface DocumentSource {
*/
export class DocumentSourceNone implements DocumentSource {
constructor() {
this.origin = { kind: "none", url: "" };
this.sourceType = "DocumentSourceNone";
this.name = "No data";
this.url = "";
......@@ -361,6 +401,7 @@ export class DocumentSourceNone implements DocumentSource {
this.priority = Number.MAX_SAFE_INTEGER;
this.loaded = 0;
}
origin: Origin;
sourceType: string;
name: string;
url: string;
......@@ -373,7 +414,8 @@ export class DocumentSourceNone implements DocumentSource {
* A data source with inline content
*/
export class DocumentSourceInline implements DocumentSource {
constructor(url: string, mime: MimeInfo, content: string) {
constructor(url: string, mime: MimeInfo, content: string, origin: Origin) {
this.origin = origin;
this.sourceType = "DocumentSourceInline";
this.name = "Inline content (" + url + ")";
this.url = url;
......@@ -382,6 +424,7 @@ export class DocumentSourceInline implements DocumentSource {
this.loaded = 0;
this.content = content;
}
origin: Origin;
sourceType: string;
name: string;
url: string;
......@@ -398,8 +441,9 @@ export class DocumentSourceInline implements DocumentSource {
* The data about a page
*/
export class DocumentSourcePage implements DocumentSource {
constructor(url: string, contentType: string) {
constructor(url: string, contentType: string, origin: Origin) {
let mime = MIME[contentType];
this.origin = origin;
this.sourceType = "DocumentSourcePage";
this.name =
"Page's content" +
......@@ -409,6 +453,7 @@ export class DocumentSourcePage implements DocumentSource {
this.priority = 1;
this.loaded = 0;
}
origin: Origin;
sourceType: string;
name: string;
url: string;
......@@ -446,10 +491,11 @@ function doFetchDocumentPage(page: DocumentSourcePage): Promise<RawContent> {
* A link for a related resource
*/
export class DocumentSourceLinked implements DocumentSource {
constructor(link: Link) {
constructor(link: Link, origin: Origin) {
let mime = MIME[link.tags.type];
if (mime == null || mime == undefined) throw "Unrecognized link type";
this.tags = link.tags;
this.origin = origin;
this.sourceType = "DocumentSourceLinked";
this.name =
"Linked content" +
......@@ -466,6 +512,7 @@ export class DocumentSourceLinked implements DocumentSource {
* The various tags for this link
*/
tags: { [tag: string]: string };
origin: Origin;
sourceType: string;
name: string;
url: string;
......@@ -537,7 +584,8 @@ export const NO_DATA = new DocumentSourceNone();
* The observations made for a specific document
*/
export class DocumentObservations {
constructor() {
constructor(origin: Origin) {
this.origin = origin;
this.url = "";
this.sources = [];
this.primaryTopic = "";
......@@ -545,6 +593,10 @@ export class DocumentObservations {
this.negotiated = null;
this.totalLoaded = 0;
}
/**
* The origin of this document
*/
origin: Origin;
/**
* The document's url
*/
......@@ -574,9 +626,11 @@ export class DocumentObservations {
/**
* Observes the content of an observable to get the observed data
* @param observable An observable
* @param origin The origin of the observable
*/
export function observeContent(
observable: ObservableContent
observable: ObservableContent,
origin: Origin
): DocumentObservations {
if (MIME.hasOwnProperty(observable.contentType)) {
// Linked-data content at this URI
......@@ -587,15 +641,18 @@ export function observeContent(
? new DocumentSourceInline(
observable.url,
MIME[observable.contentType],
observable.content
observable.content,
{ kind: ORIGIN_KIND_DIRECT, url: observable.url }
)
: new DocumentSourceLinked(
new Link(observable.url, [
{ name: "rel", value: "alternate" },
{ name: "type", value: observable.contentType }
])
]),
{ kind: ORIGIN_KIND_NEGOTIATED, url: observable.url }
);
let observations: DocumentObservations = {
origin: origin,
primaryTopic: primary == null ? "" : primary,
url: observable.url,
sources: [source],
......@@ -624,11 +681,15 @@ export function observeContent(
if (primary == null || primary == undefined || primary == "")
primary = detectTopicOnlinks(links);
}
let sources = detectDataOnLinks(links);
let sources = detectDataOnLinks(links, {
kind: ORIGIN_KIND_LINKED_HTTP,
url: observable.url
});
let negotiated = sources.find(
(source: DocumentSourceLinked) => source.url == observable.url
);
let observations: DocumentObservations = {
origin: origin,
primaryTopic: primary == null || primary == undefined ? "" : primary,
url: observable.url,
sources: sources,
......@@ -773,7 +834,12 @@ export function tryNegotiateData(
{ name: "type", value: contentType },
{ name: "rel", value: "alternate" }
]);
resolve(new DocumentSourceLinked(link));
resolve(
new DocumentSourceLinked(link, {
kind: ORIGIN_KIND_NEGOTIATED,
url: target
})
);
}
};
xmlHttp.open("HEAD", target, true);
......@@ -799,7 +865,7 @@ export function resolveObservationsForTab(
id: number
): DocumentObservations {
if (!registry.hasOwnProperty(id)) {
registry[id] = new DocumentObservations();
registry[id] = new DocumentObservations(null);
}
return registry[id];
}
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