Skip to content

Commit

Permalink
Introduce new fsq studio section in home page (keplergl#2308)
Browse files Browse the repository at this point in the history
Signed-off-by: Giuseppe Macri <[email protected]>
  • Loading branch information
macrigiuseppe authored Sep 6, 2023
1 parent 3e39337 commit 8bb0d46
Show file tree
Hide file tree
Showing 19 changed files with 388 additions and 47 deletions.
4 changes: 2 additions & 2 deletions src/components/src/common/data-table/grid.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default class GridHack extends PureComponent<GridProps> {
}

componentWillUnmount() {
//@ts-expect-error _scrollingContainer not typed in Grid
// @ts-expect-error _scrollingContainer not typed in Grid
this.grid?._scrollingContainer?.removeEventListener('wheel', this._preventScrollBack, {
passive: false
});
Expand All @@ -67,7 +67,7 @@ export default class GridHack extends PureComponent<GridProps> {
* This hack exists because we need to add wheel event listener to the div rendered by Grid
*
*/
//@ts-expect-error _scrollingContainer not typed in Grid
// @ts-expect-error _scrollingContainer not typed in Grid
this.grid?._scrollingContainer?.addEventListener('wheel', this._preventScrollBack, {
passive: false
});
Expand Down
2 changes: 1 addition & 1 deletion src/components/src/common/data-table/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,7 @@ const getRowCell = (
const rowIdx = sortOrder && sortOrder.length ? get(sortOrder, rowIndex) : rowIndex;
const {type} = colMeta[column];

let value = dataContainer.valueAt(rowIdx, columns.indexOf(column));
const value = dataContainer.valueAt(rowIdx, columns.indexOf(column));
return value === null || value === undefined || value === ''
? ''
: formatter
Expand Down
2 changes: 1 addition & 1 deletion src/components/src/common/item-selector/item-selector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -324,7 +324,7 @@ class ItemSelectorUnmemoized extends Component<ItemSelectorProps> {
active: this.state.showTypeahead
}),
displayOption,
disabled: disabled,
disabled,
onClick: this._showTypeahead,
error: this.props.isError,
inputTheme,
Expand Down
2 changes: 1 addition & 1 deletion src/components/src/map-container.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -516,7 +516,7 @@ export default function MapContainerFactory(
_onDeckError = (error, layer) => {
const errorMessage = error?.message || 'unknown-error';
const layerMessage = layer?.id ? ` in ${layer.id} layer` : '';
let errorMessageFull =
const errorMessageFull =
errorMessage === 'WebGL context is lost'
? 'Your GPU was disconnected. This can happen if your computer goes to sleep. It can also occur for other reasons, such as if you are running too many GPU applications.'
: `An error in deck.gl: ${errorMessage}${layerMessage}.`;
Expand Down
2 changes: 1 addition & 1 deletion test/browser/components/map/map-control-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ test('MapControlFactory - click options', t => {
toggleMapControl: onToggleMapControl,
setLocale: onSetLocale
};
let updateState = keplerGlReducerCore(StateWSplitMaps, toggleMapControl('mapLegend', 0));
const updateState = keplerGlReducerCore(StateWSplitMaps, toggleMapControl('mapLegend', 0));
const mapContainerProps = mapFieldsSelector(
mockKeplerPropsWithState({
state: updateState,
Expand Down
7 changes: 1 addition & 6 deletions test/browser/components/modals/share-map-modal-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,7 @@ import React from 'react';
import test from 'tape';
import {IntlWrapper, mountWithTheme} from 'test/helpers/component-utils';
import sinon from 'sinon';
import {
ShareMapUrlModalFactory,
SharingUrl,
CloudTile,
StatusPanel
} from '@kepler.gl/components';
import {ShareMapUrlModalFactory, SharingUrl, CloudTile, StatusPanel} from '@kepler.gl/components';
const ShareMapUrlModal = ShareMapUrlModalFactory();

test('Components -> ShareMapUrlModal.mount', t => {
Expand Down
6 changes: 1 addition & 5 deletions test/browser/components/plot-container-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,7 @@ import React from 'react';
import {IntlWrapper, mountWithTheme} from 'test/helpers/component-utils';

import test from 'tape';
import {
appInjector,
PlotContainerFactory,
plotContainerSelector
} from '@kepler.gl/components';
import {appInjector, PlotContainerFactory, plotContainerSelector} from '@kepler.gl/components';
import {mockKeplerProps} from '../../helpers/mock-state';

const PlotContainer = appInjector.get(PlotContainerFactory);
Expand Down
7 changes: 1 addition & 6 deletions test/browser/layer-tests/geojson-layer-specs.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,7 @@
// THE SOFTWARE.

import test from 'tape';
import {
defaultElevation,
defaultLineWidth,
defaultRadius,
KeplerGlLayers
} from '@kepler.gl/layers';
import {defaultElevation, defaultLineWidth, defaultRadius, KeplerGlLayers} from '@kepler.gl/layers';
import {copyTableAndUpdate, createNewDataEntry} from '@kepler.gl/table';

const {GeojsonLayer} = KeplerGlLayers;
Expand Down
32 changes: 24 additions & 8 deletions test/node/utils/editor-utils-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,7 @@ import {EditableGeoJsonLayer} from '@nebula.gl/layers';
import {INITIAL_VIS_STATE} from '@kepler.gl/reducers';
import {VisStateActions} from '@kepler.gl/actions';
import {EDITOR_LAYER_ID, EDITOR_MODES} from '@kepler.gl/constants';
import {
EditorLayerUtils,
getEditorLayer
} from '@kepler.gl/layers';
import {EditorLayerUtils, getEditorLayer} from '@kepler.gl/layers';

test('editorLayerUtils -> isDrawingActive', t => {
t.equal(
Expand All @@ -54,7 +51,11 @@ test('editorLayerUtils -> getCursor', t => {
editorMenuActive: true,
editor
};
t.equal(EditorLayerUtils.getCursor(mockSettings), 'crosshair', 'Should return crosshair for active drawing mode');
t.equal(
EditorLayerUtils.getCursor(mockSettings),
'crosshair',
'Should return crosshair for active drawing mode'
);

mockSettings.editorMenuActive = false;
t.equal(
Expand Down Expand Up @@ -214,20 +215,35 @@ test('editorLayerUtils -> onClick', t => {
const {onLayerClick, setSelectedFeature} = VisStateActions;

t.equal(
EditorLayerUtils.onClick(info, event, {editor, editorMenuActive: true, onLayerClick, setSelectedFeature}),
EditorLayerUtils.onClick(info, event, {
editor,
editorMenuActive: true,
onLayerClick,
setSelectedFeature
}),
true,
'Should return true - onClick is handled as drawing is active'
);

t.equal(
EditorLayerUtils.onClick(info, event, {editor, editorMenuActive: false, onLayerClick, setSelectedFeature}),
EditorLayerUtils.onClick(info, event, {
editor,
editorMenuActive: false,
onLayerClick,
setSelectedFeature
}),
false,
"Should return false - onClick isn't handled"
);

info.layer.id = EDITOR_LAYER_ID;
t.equal(
EditorLayerUtils.onClick(info, event, {editor, editorMenuActive: false, onLayerClick, setSelectedFeature}),
EditorLayerUtils.onClick(info, event, {
editor,
editorMenuActive: false,
onLayerClick,
setSelectedFeature
}),
true,
'Should return true - onClick is handled'
);
Expand Down
5 changes: 3 additions & 2 deletions website/src/components/common/section.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export const SectionContainer = styled.div`
? `url(${props.background})`
: 'white'};
padding: ${props => props.theme.margins.huge};
margin-bottom: ${props => props.theme.margins.large};
// margin-bottom: ${props => props.theme.margins.large};
background-size: cover;
${media.portable`
Expand All @@ -57,6 +57,7 @@ export const SectionHeader = styled.div`
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
`;

export const SectionTitle = styled.div`
Expand All @@ -69,7 +70,7 @@ export const SectionTitle = styled.div`

export const SectionDescription = styled.div`
font-size: 20px;
max-width: 500px;
max-width: 700px;
${media.palm`
font-size: 16px;
`};
Expand Down
14 changes: 11 additions & 3 deletions website/src/components/common/swipeable.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,12 @@ import React, {PureComponent} from 'react';
import styled from 'styled-components';
import SwipeableViews from 'react-swipeable-views';

const Container = styled.div`
display: flex;
flex-direction: column;
gap: 72px;
`;

const PaginationContainer = styled.div`
display: flex;
justify-content: center;
Expand Down Expand Up @@ -58,12 +64,14 @@ export default class Swipeable extends PureComponent {
render() {
const {children, onChange, selectedIndex} = this.props;
return (
<div>
<Container>
<SwipeableViews enableMouseEvents index={selectedIndex} onChange={onChange}>
{children}
</SwipeableViews>
<Pagination items={children} selectedIndex={selectedIndex} onChange={onChange} />
</div>
<div>
<Pagination items={children} selectedIndex={selectedIndex} onChange={onChange} />
</div>
</Container>
);
}
}
11 changes: 7 additions & 4 deletions website/src/components/footer.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {LinkButton} from './common/styled-components';
import {media} from '../styles';
import MapboxLogo from './mapbox-logo';
import NetlifyLogo from './netlify-logo';
import FoursquareLogo from './foursquare-logo';
import {DEMO_LINK} from '../constants';

const Container = styled.div`
Expand All @@ -49,9 +50,8 @@ const BrandingContainer = styled.div`
margin-top: ${props => props.theme.margins.small};
`};
display: grid;
grid-template-columns: repeat(4, auto);
column-gap: 20px;
display: flex;
gap: 20px;
align-items: center;
`;

Expand Down Expand Up @@ -139,6 +139,8 @@ const SocialContainer = styled.div`
`};
`;

const GITHUB_BUTTON_STYLE = {marginLeft: '5px'};

export default class Footer extends PureComponent {
render() {
return (
Expand All @@ -149,6 +151,7 @@ export default class Footer extends PureComponent {
<img src={cdnUrl('icons/uber.svg')} />
<MapboxLogo />
<NetlifyLogo />
<FoursquareLogo />
<CreatedBy>
created by
<StyledLogo className="fg">
Expand All @@ -168,7 +171,7 @@ export default class Footer extends PureComponent {
large
outlineDark
href="https://github.com/keplergl/kepler.gl"
style={{marginLeft: '5px'}}
style={GITHUB_BUTTON_STYLE}
>
<img src={cdnUrl('icons/github.svg')} /> Github
</LinkButton>
Expand Down
63 changes: 63 additions & 0 deletions website/src/components/foursquare-logo.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion website/src/components/home.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import Tutorials from './tutorials';
import Walkthrough from './walkthrough';
import Features from './features';
import Ecosystems from './ecosystems';
import Studio from './studio';
import Footer from './footer';
import Section from './common/section';
import Header from './header';
Expand All @@ -47,7 +48,8 @@ const SECTION_CONTENT = {
features: Features,
examples: Examples,
tutorials: Tutorials,
ecosystems: Ecosystems
ecosystems: Ecosystems,
studio: Studio
};

export default class Home extends PureComponent {
Expand Down
2 changes: 1 addition & 1 deletion website/src/components/mapbox-logo.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion website/src/components/netlify-logo.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 8bb0d46

Please sign in to comment.