feat: url format fallback to short text

packages/api-client/src/index.ts

@@ -4,8 +4,8 @@
  */
 
 export * from './client';
+export * from './client/constants';
 export * from './client/error';
 export * from './client/types';
-export * from './client/constants';
 export * from './odsql';
 export * from './odsql/clauses';

packages/api-client/test/client.test.ts

@@ -2,8 +2,8 @@
  * @jest-environment jsdom
  */
 
+import { beforeEach, describe, expect, it } from '@jest/globals';
 import { enableFetchMocks } from 'jest-fetch-mock';
-import { expect, it, beforeEach, describe } from '@jest/globals';
 import { ApiClient, field, fromCatalog } from '../src';
 import { AuthenticationError, NotFoundError, ServerError, UserError } from '../src/client/error';
 

packages/api-client/test/odsql.test.ts

@@ -2,24 +2,24 @@
  * @jest-environment jsdom
  */
 
-import { expect, it, describe, test } from '@jest/globals';
+import { describe, expect, it, test } from '@jest/globals';
 import {
+    all,
+    date,
+    dateFromIsoString,
+    dateTime,
+    field,
     fromCatalog,
     fromDataNetwork,
     fromMonitoring,
-    Query,
-    field,
-    string,
-    dateTime,
-    date,
-    all,
-    one,
     list,
     not,
-    dateFromIsoString,
+    one,
+    Query,
+    string,
     textSearch,
-    textSuggest,
     textStartWith,
+    textSuggest,
 } from '../src';
 
 describe('ODSQL query builder', () => {

packages/visualizations/src/components/Chart/datasets.ts

@@ -1,7 +1,7 @@
 import type { ChartDataset } from 'chart.js';
 import type { Options as DataLabelsOptions } from 'chartjs-plugin-datalabels/types/options';
+import { assureMaxLength, defaultCompactNumberFormat } from 'components/utils/formatter';
 import type { DataFrame } from 'types';
-import { defaultCompactNumberFormat, assureMaxLength } from 'components/utils/formatter';
 import type {
     ChartSeries,
     DataLabelsConfiguration,
@@ -10,9 +10,9 @@ import type {
 } from './types';
 import {
     defaultValue,
-    singleChartJsColor,
-    multipleChartJsColors,
     DEFAULT_GREY_COLOR,
+    multipleChartJsColors,
+    singleChartJsColor,
 } from './utils';
 
 function chartJsFill(fill: FillConfiguration | undefined) {

packages/visualizations/src/components/Chart/index.ts

@@ -1,4 +1,4 @@
-import { Chart as ChartModule, registerables, defaults } from 'chart.js';
+import { Chart as ChartModule, defaults, registerables } from 'chart.js';
 import { TreemapController, TreemapElement } from 'chartjs-chart-treemap';
 import DataLabels from 'chartjs-plugin-datalabels';
 import Stacked100Plugin from 'chartjs-plugin-stacked100';

packages/visualizations/src/components/Chart/legend.ts

@@ -1,7 +1,7 @@
-import type { LegendOptions, ChartConfiguration, Chart } from 'chart.js';
+import type { Chart, ChartConfiguration, LegendOptions } from 'chart.js';
 import type { _DeepPartialObject } from 'chart.js/dist/types/utils';
-import { assureMaxLength } from 'components/utils/formatter';
 import { CATEGORY_ITEM_VARIANT } from 'components/Legend/types';
+import { assureMaxLength } from 'components/utils/formatter';
 import type { ChartOptions } from './types';
 import { defaultValue, DEFAULT_GREY_COLOR } from './utils';
 

packages/visualizations/src/components/Chart/pieDataLabelsPlugin.ts

@@ -1,5 +1,5 @@
 /* eslint-disable no-underscore-dangle */
-import type { Plugin, ChartConfiguration, ChartDataset } from 'chart.js';
+import type { ChartConfiguration, ChartDataset, Plugin } from 'chart.js';
 
 const pieDataLabelsPlugin: Plugin<'pie'> = {
     id: 'ods-chartjs-plugin-datalabels',

packages/visualizations/src/components/Chart/scales.ts

@@ -1,14 +1,14 @@
 import type {
-    ChartOptions as ChartJsChartOptions,
     CartesianScaleOptions,
+    ChartOptions as ChartJsChartOptions,
+    GridLineOptions,
     RadialLinearScaleOptions,
     Scale,
     Tick,
-    GridLineOptions,
 } from 'chart.js';
-import { DateTime } from 'luxon';
 import type { DeepPartial } from 'chart.js/dist/types/utils';
 import { assureMaxLength, defaultCompactNumberFormat } from 'components/utils/formatter';
+import { DateTime } from 'luxon';
 import type {
     CartesianAxisConfiguration,
     ChartOptions,

packages/visualizations/src/components/Chart/types.ts

@@ -1,5 +1,5 @@
-import type { Async, Color, DataFrame, Source } from 'types';
 import type { LegendConfiguration } from 'components/Legend/types';
+import type { Async, Color, DataFrame, Source } from 'types';
 
 export interface ChartOptions {
     /** Specify label column in DataFrame (mandatory for all charts except Treemap) */

packages/visualizations/src/components/ChoroplethMap/constants.ts

@@ -1,6 +1,6 @@
 import type { FeatureCollection } from 'geojson';
+import type { Color, ColorScale } from 'types';
 import { ColorScaleTypes } from 'types';
-import type { ColorScale, Color } from 'types';
 
 export const DEFAULT_COLORS: Record<string, Color> = {
     Default: '#CCCCCC',

packages/visualizations/src/components/ChoroplethMap/types.ts

@@ -1,8 +1,8 @@
-import type { Feature, FeatureCollection, Position, BBox } from 'geojson';
-import type { FillLayerSpecification, Popup, GestureOptions, LngLatBoundsLike } from 'maplibre-gl';
-import type { DebouncedFunc } from 'lodash';
-import type { ColorScale, Color, Source } from 'types';
 import type { LegendPositions } from 'components/Legend/types';
+import type { BBox, Feature, FeatureCollection, Position } from 'geojson';
+import type { DebouncedFunc } from 'lodash';
+import type { FillLayerSpecification, GestureOptions, LngLatBoundsLike, Popup } from 'maplibre-gl';
+import type { Color, ColorScale, Source } from 'types';
 
 export interface ChoroplethOptions {
     /** Configuration for the color scale used to color the choropleth shapes. */

packages/visualizations/src/components/ChoroplethMap/utils.ts

@@ -1,21 +1,21 @@
-import chroma from 'chroma-js';
-import turfBbox from '@turf/bbox';
-import maplibregl, { ExpressionInputType, ExpressionSpecification } from 'maplibre-gl';
 import { viewport } from '@placemarkio/geo-viewport';
-import type { Feature, FeatureCollection, Position, BBox } from 'geojson';
+import turfBbox from '@turf/bbox';
 import type { Scale } from 'chroma-js';
+import chroma from 'chroma-js';
 import { assertUnreachable } from 'components/utils';
-import { Color, ColorScale, DataBounds, isGroupByForMatchExpression, ColorScaleTypes } from 'types';
+import type { BBox, Feature, FeatureCollection, Position } from 'geojson';
+import maplibregl, { ExpressionInputType, ExpressionSpecification } from 'maplibre-gl';
+import { Color, ColorScale, ColorScaleTypes, DataBounds, isGroupByForMatchExpression } from 'types';
 import { DEFAULT_COLORS } from './constants';
 
 import type {
     ChoroplethDataValue,
     ChoroplethFixedTooltipDescription,
-    MapFilter,
+    ChoroplethLayer,
     ChoroplethTooltipFormatter,
-    MapRenderTooltipFunction,
     ComputeTooltipFunction,
-    ChoroplethLayer,
+    MapFilter,
+    MapRenderTooltipFunction,
 } from './types';
 import { ChoroplethTooltipMatcherTypes, TooltipParams } from './types';
 

packages/visualizations/src/components/Map/Poi/types.ts

@@ -1,6 +1,6 @@
-import type { Async, Source } from 'types';
 import type { CategoryLegend } from 'components/Legend/types';
 import type { WebGlMapData, WebGlMapOptions } from 'components/Map/WebGl/types';
+import type { Async, Source } from 'types';
 
 export type PoiMapData = Async<WebGlMapData>;
 

packages/visualizations/src/components/Map/WebGl/WebGl.ts

@@ -1,41 +1,41 @@
 import type { BBox } from 'geojson';
 import { debounce, difference } from 'lodash';
-import MaplibreGl from 'maplibre-gl';
 import type {
-    Map,
+    CircleLayerSpecification,
     LngLatBoundsLike,
     LngLatLike,
+    Map,
     MapGeoJSONFeature,
     MapLayerMouseEvent,
     MapMouseEvent,
     MapOptions,
     StyleSpecification,
-    CircleLayerSpecification,
     SymbolLayerSpecification,
 } from 'maplibre-gl';
+import MaplibreGl from 'maplibre-gl';
 
 import {
     CONTROL_POSITION,
+    DEFAULT_SORT_KEY_VALUE,
+    POPUP_DISPLAY,
+    POPUP_DISPLAY_CLASSNAME_MODIFIER,
     POPUP_FEATURE_CONTENT,
     POPUP_FEATURE_CONTENT_LOADING,
-    POPUP_DISPLAY_CLASSNAME_MODIFIER,
-    POPUP_NAVIGATION_CONTROLS_CLASSNAME,
     POPUP_NAVIGATION_ARROWS_WRAPPER_CLASSNAME,
     POPUP_NAVIGATION_ARROW_BUTTON_CLASSNAME,
     POPUP_NAVIGATION_ARROW_BUTTON_ICON_CLASSNAME,
     POPUP_NAVIGATION_CLOSE_BUTTON_CLASSNAME,
     POPUP_NAVIGATION_CLOSE_BUTTON_ICON_CLASSNAME,
+    POPUP_NAVIGATION_CONTROLS_CLASSNAME,
+    POPUP_NAVIGATION_CONTROLS_OFFSET_CLASSNAME,
     POPUP_OPTIONS,
     POPUP_WIDTH,
-    POPUP_NAVIGATION_CONTROLS_OFFSET_CLASSNAME,
-    DEFAULT_SORT_KEY_VALUE,
-    POPUP_DISPLAY,
 } from './constants';
 import type {
-    PopupConfigurationByLayers,
     CenterZoomOptions,
-    PopupDisplayTypes,
     Images,
+    PopupConfigurationByLayers,
+    PopupDisplayTypes,
 } from './types';
 
 const CURSOR = {

packages/visualizations/src/components/Map/WebGl/constants.ts

@@ -1,8 +1,8 @@
 import type {
-    DataDrivenPropertyValueSpecification,
-    StyleSpecification,
     ControlPosition,
+    DataDrivenPropertyValueSpecification,
     PopupOptions,
+    StyleSpecification,
 } from 'maplibre-gl';
 import type { Color } from 'types';
 

packages/visualizations/src/components/Map/WebGl/index.ts

@@ -1,4 +1,4 @@
-import WebGl from './WebGl.svelte';
 import 'maplibre-gl/dist/maplibre-gl.css';
+import WebGl from './WebGl.svelte';
 
 export default WebGl;

packages/visualizations/src/components/Map/WebGl/types.ts

@@ -1,3 +1,4 @@
+import type { BBox, GeoJsonProperties } from 'geojson';
 import type {
     CircleLayerSpecification,
     FillLayerSpecification,
@@ -9,7 +10,6 @@ import type {
     StyleSpecification,
     SymbolLayerSpecification,
 } from 'maplibre-gl';
-import type { BBox, GeoJsonProperties } from 'geojson';
 import type { Color } from 'types';
 
 import type { POPUP_DISPLAY } from './constants';

packages/visualizations/src/components/Map/WebGl/utils.ts

@@ -1,27 +1,27 @@
 import type {
     CircleLayerSpecification,
+    ExpressionInputType,
     ExpressionSpecification,
+    FillLayerSpecification,
     MapOptions as MapLibreMapOptions,
     StyleSpecification,
-    ExpressionInputType,
     SymbolLayerSpecification,
-    FillLayerSpecification,
 } from 'maplibre-gl';
 
-import { isGroupByForMatchExpression, Color } from 'types';
+import { Color, isGroupByForMatchExpression } from 'types';
 
+import { DEFAULT_BASEMAP_STYLE, DEFAULT_DARK_GREY, DEFAULT_SORT_KEY_VALUE } from './constants';
 import type {
+    CenterZoomOptions,
     CircleLayer,
-    LayerSpecification,
+    FillLayer,
     Layer,
-    WebGlMapData,
-    WebGlMapOptions,
+    LayerSpecification,
     PopupConfigurationByLayers,
     SymbolLayer,
-    CenterZoomOptions,
-    FillLayer,
+    WebGlMapData,
+    WebGlMapOptions,
 } from './types';
-import { DEFAULT_DARK_GREY, DEFAULT_BASEMAP_STYLE, DEFAULT_SORT_KEY_VALUE } from './constants';
 
 export const getMapStyle = (style: WebGlMapOptions['style']): MapLibreMapOptions['style'] => {
     if (!style) return DEFAULT_BASEMAP_STYLE;

packages/visualizations/src/components/Map/index.ts

@@ -1,7 +1,5 @@
-export { default as WebGlMap } from './WebGl';
 export { default as PoiMap } from './Poi';
-
+export * from './Poi/types';
+export { default as WebGlMap } from './WebGl';
 export { POPUP_DISPLAY } from './WebGl/constants';
-
 export * from './WebGl/types';
-export * from './Poi/types';

packages/visualizations/src/components/Table/Cell/Format/URLFormat.svelte

@@ -1,17 +1,19 @@
 <script lang="ts">
-    import { warn } from './utils';
+    import ShortTextFormat from './ShortTextFormat.svelte';
 
     export let rawValue: unknown;
     export let display = (v: string) => v;
     export let target: HTMLAnchorElement['target'] = '_blank';
+    export let rel = 'nofollow noreferrer noopener';
 
     function format(v: unknown) {
         try {
             // eslint-disable-next-line no-new
             new URL(v as string);
-            return v as string;
-        } catch (error) {
-            warn(v, 'URL');
+            return display(v as string);
+        } catch (_) {
+            // eslint-disable-next-line no-console
+            console.warn(`ODS Dataviz SDK - Table: no url detected, formatting as string`);
             return null;
         }
     }
@@ -20,7 +22,7 @@
 </script>
 
 {#if value}
-    <a href={value} {target}>{display(value)}</a>
+    <a href={value} {rel} {target}>{display(value)}</a>
 {:else}
-    {rawValue}
+    <ShortTextFormat {rawValue} />
 {/if}

packages/visualizations/src/components/Table/Cell/Format/index.ts

@@ -1,10 +1,10 @@
 import BooleanFormat from './BooleanFormat.svelte';
 import DateFormat from './DateFormat.svelte';
+import GeoFormat from './GeoFormat.svelte';
+import LongTextFormat from './LongTextFormat.svelte';
 import NumberFormat from './NumberFormat.svelte';
-import URLFormat from './URLFormat.svelte';
 import ShortTextFormat from './ShortTextFormat.svelte';
-import LongTextFormat from './LongTextFormat.svelte';
-import GeoFormat from './GeoFormat.svelte';
+import URLFormat from './URLFormat.svelte';
 import { isValidRawValue } from './utils';
 
 const Format = {

packages/visualizations/src/components/Table/types.ts

@@ -1,7 +1,7 @@
-import type { DataFrame, Source, Async } from 'types';
 import type { WebGlMapData, WebGlMapOptions } from 'components/Map';
-import type { DATA_FORMAT } from './constants';
+import type { Async, DataFrame, Source } from 'types';
 import type { Pagination } from '../Pagination/types';
+import type { DATA_FORMAT } from './constants';
 
 type DataFormatKey = keyof typeof DATA_FORMAT;
 export type DataFormat = typeof DATA_FORMAT[DataFormatKey];
@@ -82,6 +82,8 @@ export type URLColumn = BaseColumn & {
         display?: (v: string) => string;
         /** Default is `_blank` */
         target?: string;
+        /** Default is `nofollow noopener noreferrer` */
+        rel?: string;
     };
 };